/* ---------------------------------------------------------------- HERO
   The source frame is a 1600x2400 PORTRAIT: a woman seated on a black
   panther against red seamless. The shipped build cropped it to 16:9,
   which threw the panther away and put a scrim across her face. Here the
   photo keeps its own shape and gets half the screen; the type takes the
   other half on the dark ground, where cream on #0B0708 is legible
   without a gradient fighting the picture. */
#step-in-like-you-already-own-the-frame{
  position:relative;background:var(--c-dark-bg);
  display:grid;grid-template-columns:1fr;
  padding:0!important;
}
#step-in-like-you-already-own-the-frame .hero__img{
  display:block;width:100%;height:auto;aspect-ratio:2/3;
  object-fit:cover;object-position:50% 20%;
}
#step-in-like-you-already-own-the-frame .hero__copy{
  padding:clamp(2rem,7vw,3rem) clamp(1.5rem,6vw,3rem) clamp(2.75rem,9vw,3.5rem);
}
#step-in-like-you-already-own-the-frame .kicker{margin:0 0 var(--sp-4)}
#step-in-like-you-already-own-the-frame h1{
  font-family:var(--ff-display);font-size:clamp(2.9rem,13vw,4.2rem);
  line-height:.9;letter-spacing:.005em;margin:0 0 var(--sp-5);
  color:var(--c-text);
}
#step-in-like-you-already-own-the-frame .hero__sub{
  font-size:1rem;line-height:1.6;color:var(--c-mute);
  max-width:34ch;margin:0 0 var(--sp-6);
}
#step-in-like-you-already-own-the-frame .hero__cta{
  display:flex;flex-direction:column;gap:.75rem;
}
#step-in-like-you-already-own-the-frame .hero__cta .btn{width:100%}
@media (min-width:600px){
  #step-in-like-you-already-own-the-frame .hero__cta{flex-direction:row;flex-wrap:wrap;gap:.75rem}
  #step-in-like-you-already-own-the-frame .hero__cta .btn{width:auto}
}
@media (min-width:900px){
  /* The photo is absolutely positioned into the right half rather than
     laid out as a grid item: an <img> with height:100% inside an
     auto-sized row resolves to its own intrinsic height, which made the
     hero 1080px tall instead of one screen. */
  #step-in-like-you-already-own-the-frame{
    display:block;min-height:calc(100svh - var(--header-h));
  }
  /* The copy column is NOT a flat 50%. Its left padding tracks the header's
     centred 1200px container, so past about 1500px that padding grows faster
     than half the viewport does and the text column keeps LOSING room on a
     wider screen: at 2560 it was down to 68px and the headline broke into
     eight lines. --hero-copy is "whichever is wider, half the screen or
     enough room for the aligned padding plus 34rem of text", which holds the
     alignment and guarantees the headline somewhere to live. */
  #step-in-like-you-already-own-the-frame{
    --hero-copy: max(30rem, calc((100vw - var(--container)) / 2 + var(--gutter) + 34rem));
  }
  #step-in-like-you-already-own-the-frame .hero__img{
    position:absolute;top:0;right:0;bottom:0;left:auto;
    width:calc(100% - var(--hero-copy));height:100%;aspect-ratio:auto;
    object-position:50% 16%;
  }
  #step-in-like-you-already-own-the-frame .hero__copy{
    position:relative;z-index:1;
    width:var(--hero-copy);min-height:calc(100svh - var(--header-h));
    /* global.css caps every .hero__copy at min(92vw, 860px). That cap is what
       held this column at 860 while its left padding grew past 700, which is
       how the headline reached eight lines at 2560. The split hero owns its
       own width here. */
    max-width:none;
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(3rem,6vh,4.5rem) clamp(2.5rem,4vw,4rem) clamp(3rem,6vh,4.5rem)
      max(clamp(2.5rem,4vw,4rem), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
  #step-in-like-you-already-own-the-frame h1{font-size:clamp(3rem,5.6vw,4.75rem)}
  #step-in-like-you-already-own-the-frame .hero__sub{font-size:1.0625rem}
}

/* ---------------------------------------------------------------- WORK
   Portrait frames shown as portrait frames, at the largest size the page
   allows, offset against each other so the scroll has a rhythm instead of
   three identical letterbox slabs. */
#the-work{background:var(--c-bg);padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2rem,5vw,3rem)}
#the-work .work__head{max-width:var(--container);margin:0 auto clamp(2rem,5vw,3rem);padding-inline:var(--gutter)}
#the-work .work__index{display:flex;align-items:center;gap:1rem}
#the-work .work__num{
  font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2rem);
  line-height:1;letter-spacing:.02em;color:var(--c-secondary);
}
#the-work .work__rule{
  display:block;flex:1 1 auto;height:1px;background:rgba(199,121,138,.5);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--mo-dur) var(--mo-ease);
}
#the-work .work__head.is-visible .work__rule{transform:scaleX(1)}

#the-work .plate{
  margin:0 0 clamp(3rem,8vw,6rem);padding-inline:var(--gutter);
  display:grid;gap:1rem;
}
#the-work .plate:last-of-type{margin-bottom:0}
#the-work .media-zoom{display:block;overflow:hidden;background:var(--c-dark-bg)}
#the-work .plate img{
  display:block;width:100%;height:auto;aspect-ratio:2/3;
  object-fit:cover;object-position:50% 30%;
}
#the-work figcaption{
  font-size:.8125rem;line-height:1.4;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-accent);
  display:flex;align-items:baseline;gap:.75rem;
}
#the-work figcaption::before{
  content:attr(data-n);font-family:var(--ff-display);font-weight:400;
  font-size:1.5rem;line-height:1;letter-spacing:.02em;
  color:var(--c-secondary);
}
@media (min-width:900px){
  /* The plates are the grid, not each plate individually — a caption in
     its own 5-column track left 74vh of empty page beside every photo.
     Caption sits under its own image; the stagger does the composing. */
  #the-work{
    padding-bottom:clamp(3rem,7vw,5rem);
    display:grid;grid-template-columns:repeat(12,1fr);
    column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:0;
    max-width:var(--container);margin-inline:auto;
    padding-inline:var(--gutter);align-items:start;
  }
  #the-work .work__head{grid-column:1 / -1;padding-inline:0;margin-inline:0}
  #the-work .plate{
    display:block;padding-inline:0;margin-bottom:0;
  }
  /* natural 2:3 at whatever width the column gives it: no crop at all */
  #the-work .plate img{aspect-ratio:2 / 3;height:auto;object-position:50% 50%}
  #the-work .plate--1{grid-column:1 / span 6}
  #the-work .plate--2{grid-column:7 / span 6;margin-top:clamp(3rem,7vw,6rem)}
  #the-work .plate--3{grid-column:3 / span 8;margin-top:clamp(3rem,8vw,7rem)}
  #the-work figcaption{font-size:.875rem;letter-spacing:.18em;padding-top:1.1rem}
  #the-work figcaption::before{font-size:1.75rem}
}
@media (prefers-reduced-motion: reduce){#the-work .work__rule{transform:scaleX(1);transition:none}}

/* ------------------------------------------------------- THREE THINGS
   Three services read as three columns, not three stacked rows with an
   empty right half. */
#three-things-fendishotit-does{background:var(--c-bg);padding-block:clamp(3rem,7vw,5rem)}
#three-things-fendishotit-does h2{
  font-family:var(--ff-display);font-size:clamp(2rem,4.4vw,3rem);
  line-height:1;margin:0 0 clamp(2rem,4vw,3rem);
}
#three-things-fendishotit-does .svc{list-style:none;margin:0;padding:0;display:grid;gap:0}
#three-things-fendishotit-does .svc__row{border-top:1px solid var(--c-line);padding-block:1.75rem}
#three-things-fendishotit-does .svc__index{display:flex;align-items:center;gap:.75rem;margin:0 0 var(--sp-3)}
#three-things-fendishotit-does .svc__num{
  font-family:var(--ff-display);font-size:1.625rem;line-height:1;
  letter-spacing:.02em;color:var(--c-secondary);
}
#three-things-fendishotit-does .svc__rule{
  display:block;flex:1 1 auto;height:1px;background:rgba(199,121,138,.5);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--mo-dur) var(--mo-ease) var(--reveal-delay,0ms);
}
#three-things-fendishotit-does .svc__row.is-visible .svc__rule,
#three-things-fendishotit-does .reveal-stagger.is-visible > .svc__row .svc__rule{transform:scaleX(1)}
#three-things-fendishotit-does h3{
  font-family:var(--ff-display);font-size:clamp(1.6rem,3.4vw,2.1rem);
  line-height:1.05;margin:0 0 var(--sp-3);
}
#three-things-fendishotit-does .svc__body p{font-size:1rem;line-height:1.6;color:var(--c-mute);margin:0}
#three-things-fendishotit-does .svc__note{margin-top:var(--sp-4)!important;color:var(--c-accent)}
#three-things-fendishotit-does .svc__row--rental{background:var(--c-surface)}
@media (min-width:900px){
  #three-things-fendishotit-does .svc{
    grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--c-line);
  }
  #three-things-fendishotit-does .svc__row{
    border-top:0;padding:2.25rem clamp(1.5rem,2.5vw,2.25rem) 2.5rem;
  }
  #three-things-fendishotit-does .svc__row + .svc__row{border-left:1px solid var(--c-line)}
  #three-things-fendishotit-does .svc__row:first-child{padding-left:0}
  #three-things-fendishotit-does .svc__body p{font-size:1.0625rem;max-width:34ch}
}

/* --------------------------------------------------------- ABOUT BAND */
#rishon-behind-the-camera{border-top:1px solid var(--c-accent)}
#rishon-behind-the-camera .kicker{margin:0 0 var(--sp-4)}
#rishon-behind-the-camera h2{
  font-family:var(--ff-display);font-size:clamp(1.9rem,4.6vw,3.6rem);
  line-height:1.02;margin:0 0 var(--sp-5);max-width:16ch;
}
#rishon-behind-the-camera .band__copy{font-size:1.0625rem;line-height:1.65;max-width:54ch;color:var(--c-text);margin:0}
#rishon-behind-the-camera .facts{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column}
#rishon-behind-the-camera .facts li{
  font-weight:500;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text);border-top:1px solid var(--c-accent);padding:.9rem 0;
}
@media (min-width:900px){
  #rishon-behind-the-camera .backdrop-band__inner{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2.5rem,6vw,5rem);align-items:start;
  }
  #rishon-behind-the-camera .kicker{grid-column:1;margin-bottom:var(--sp-3)}
  #rishon-behind-the-camera h2{grid-column:1;margin:0}
  #rishon-behind-the-camera .band__copy{grid-column:2;grid-row:1 / span 2;align-self:center}
  #rishon-behind-the-camera .facts{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:clamp(2rem,4vw,3rem)}
  #rishon-behind-the-camera .facts li{border-top:0;padding:.2rem 1.5rem}
  #rishon-behind-the-camera .facts li:first-child{padding-left:0}
  #rishon-behind-the-camera .facts li + li{border-left:1px solid var(--c-accent)}
}

/* ------------------------------------------------------------- FAQ */
#questions-before-you-book{background:var(--c-bg);padding-block:clamp(3rem,7vw,4.5rem)}
#questions-before-you-book h2{font-family:var(--ff-display);font-size:clamp(1.9rem,4vw,2.75rem);line-height:1;margin:0 0 clamp(1.75rem,3.5vw,2.5rem)}
#questions-before-you-book .faq{display:grid;grid-template-columns:1fr}
#questions-before-you-book .faq__col{border-bottom:1px solid var(--c-line)}
#questions-before-you-book .faq__row{border-top:1px solid var(--c-line);padding-block:1.4rem}
#questions-before-you-book .faq__q{font-weight:700;font-size:1.0625rem;line-height:1.45;color:var(--c-text);margin:0 0 var(--sp-2)}
#questions-before-you-book .faq__n{
  display:inline-block;font-family:var(--ff-display);font-weight:400;font-size:1.625rem;
  line-height:1;letter-spacing:.02em;color:var(--c-secondary);margin-right:.5rem;transform:translateY(.06em);
}
#questions-before-you-book .faq__a{font-size:1rem;line-height:1.65;color:var(--c-mute);max-width:46ch;margin:0}
@media (min-width:900px){
  #questions-before-you-book .faq{grid-template-columns:1fr 1fr}
  #questions-before-you-book .faq__n{font-size:1.75rem}
  #questions-before-you-book .faq__col{padding-right:clamp(2rem,4vw,3.5rem)}
  #questions-before-you-book .faq__col + .faq__col{border-left:1px solid var(--c-line);padding-right:0;padding-left:clamp(2rem,4vw,3.5rem)}
}

/* ------------------------------------------------------------- CTA */
#call-the-studio{border-top:1px solid var(--c-accent)}
#call-the-studio h2{font-family:var(--ff-display);font-size:clamp(2.2rem,6vw,4.5rem);line-height:.96;color:var(--c-text);margin:0 0 var(--sp-4);max-width:14ch}
#call-the-studio .cta__line{color:#FFFFFF;font-size:1.0625rem;line-height:1.55;max-width:44ch;margin:0}
#call-the-studio .cta__row{display:flex;flex-direction:column;align-items:stretch;gap:1rem;margin-top:var(--sp-6)}
#call-the-studio .cta__tel{
  display:flex;align-items:center;justify-content:center;min-height:60px;padding:.7rem 1.25rem;
  font-family:var(--ff-display);font-size:1.9rem;letter-spacing:.02em;color:var(--c-text);
  background:var(--c-bg);border-radius:var(--radius);
  transition:background-color var(--mo-fast) var(--mo-ease),color var(--mo-fast) var(--mo-ease);
}
#call-the-studio .cta__tel:hover,#call-the-studio .cta__tel:focus-visible{background:var(--c-dark-bg);color:#FFFFFF}
#call-the-studio .cta__second{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:700;font-size:1rem;color:#FFFFFF;text-decoration:underline;text-underline-offset:5px}
#call-the-studio .cta__second:hover,#call-the-studio .cta__second:focus-visible{color:var(--c-bg)}
@media (min-width:900px){
  #call-the-studio .backdrop-band__inner{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(2.5rem,6vw,5rem);align-items:center;
  }
  #call-the-studio h2{grid-column:1;grid-row:1;margin:0}
  #call-the-studio .cta__line{grid-column:2;grid-row:1;margin:0}
  #call-the-studio .cta__row{
    grid-column:1 / -1;grid-row:2;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:2rem;margin-top:clamp(2rem,4vw,3rem);
  }
  #call-the-studio .cta__tel{background:transparent;padding:0;min-height:0;font-size:clamp(2.6rem,5vw,4rem)}
  #call-the-studio .cta__tel:hover,#call-the-studio .cta__tel:focus-visible{background:transparent;color:var(--c-bg)}
  #call-the-studio .cta__second{
    border:1px solid #F6EDEF;border-radius:var(--radius);padding:.85rem 1.5rem;text-decoration:none;
    transition:background-color var(--mo-fast) var(--mo-ease),color var(--mo-fast) var(--mo-ease);
  }
  #call-the-studio .cta__second:hover,#call-the-studio .cta__second:focus-visible{background:#F6EDEF;color:var(--c-primary)}
}

/* ------------------------------------------------- BAND ALIGNMENT
   Both red bands carry an inline padding-inline of max(16px,4vw), which
   lands their content at x=120 on a 1440 screen while the header lockup
   and every other section sit at 168. Pull them onto the same vertical. */
.backdrop-band .backdrop-band__inner{
  max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:900px){
  #call-the-studio .backdrop-band__inner{align-items:start}
}

/* --------------------------------------------------- HERO ON A PHONE
   At its full 2:3 the hero frame is 618px on a 412 screen and eats the
   whole first viewport: the headline and both buttons landed below the
   fold. Cropped to 46svh the panther and her face still read, and the
   kicker, headline, sub and Call the Studio all sit above the fold. */
@media (max-width:899px){
  /* Square, not a landscape strip. crop-gate fails a portrait frame put in a
     landscape box and it is right to: 412x343 was discarding 44% and turning
     the picture on its side, which is the Fendishotit defect in miniature. A
     1:1 box keeps her and the whole panther, discards 33%, and still leaves
     the kicker and the full headline above the fold on a 659px screen. The
     above-the-fold call to action is the Call button in the header, which is
     there at every scroll position. */
  #step-in-like-you-already-own-the-frame .hero__img{
    aspect-ratio:1 / 1;height:auto;
    object-position:50% 28%;
  }
  #step-in-like-you-already-own-the-frame .hero__copy{
    padding-top:1.5rem;padding-bottom:2rem;
  }
  #step-in-like-you-already-own-the-frame h1{
    font-size:clamp(2.3rem,9.6vw,3.1rem);margin-bottom:var(--sp-4);
  }
  #step-in-like-you-already-own-the-frame .hero__sub{
    margin-bottom:var(--sp-5);
  }
}