/* =========================================================
   PHONE HEROES — PORTFOLIO STYLE (About, Contact, SEO)
   Each hero is a background photo + a cut-out of Ellie, both on a
   1080x1920 canvas where the photo fills only part of the canvas.
   On phones the canvas is cropped to the photo and scaled to the full
   width (21px margins, like Portfolio); background and cut-out get the
   same transform so they stay aligned. Values measured from the images:
     About-FC / SEO-Mobile-bg: photo at 12.4–87.4% x 9.7–90.2% (ratio .524)
     CONTACT-FC:               photo at 10–89.8%   x 9.7–90.2% (ratio .558)
   --crop = share of the photo's height cut from the top.
   Loaded after the page stylesheets so these rules win on phones.
========================================================= */

@media(max-width:767px){

  html body:not(#fc-ts) .fc-about-hero,
  html body:not(#fc-ts) .fc-about-hero__inner,
  html body:not(#fc-ts) .fc-contact-hero,
  html body:not(#fc-ts) .fc-contact-hero__inner,
  html body:not(#fc-ts) .fc-seo-hero,
  html body:not(#fc-ts) .fc-seo-hero__stage{
    height:auto !important;
    min-height:0 !important;
  }

  /* the photo frame */
  html body:not(#fc-ts) .fc-about-hero__stage,
  html body:not(#fc-ts) .fc-contact-hero__stage,
  html body:not(#fc-ts) .fc-seo-hero__art{
    position:relative !important;
    inset:auto !important;
    width:calc(100% - 42px) !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:18px auto 0 !important;
    padding:0 !important;
    overflow:hidden !important;
    transform:none !important;
  }

  html body:not(#fc-ts) .fc-about-hero__stage{ aspect-ratio:.655 !important; --photo-l:12.4%; --photo-w:133.33%; --crop:.02; }
  html body:not(#fc-ts) .fc-seo-hero__art{ aspect-ratio:.655 !important; --photo-l:12.4%; --photo-w:133.33%; --crop:.2; }
  html body:not(#fc-ts) .fc-contact-hero__stage{ aspect-ratio:.649 !important; --photo-l:10%; --photo-w:125.31%; --crop:0; }

  html body:not(#fc-ts) .fc-about-hero__stage > picture,
  html body:not(#fc-ts) .fc-contact-hero__stage > picture{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  /* background + cut-out: same size and offset, so they stay aligned */
  html body:not(#fc-ts) .fc-about-hero__stage picture img,
  html body:not(#fc-ts) .fc-contact-hero__stage picture img,
  html body:not(#fc-ts) .fc-seo-hero__art img[class*="--mobile"]{
    position:absolute !important;
    inset:auto !important;
    left:0 !important;
    top:0 !important;
    width:var(--photo-w) !important;
    max-width:none !important;
    height:auto !important;
    object-fit:fill !important;
    transform:translate(calc(-1 * var(--photo-l)), calc(-9.7% - var(--crop) * 80.5%)) !important;
  }

  /* masthead over the photo */
  html body:not(#fc-ts) .fc-about-hero__title,
  html body:not(#fc-ts) .fc-contact-hero__title,
  html body:not(#fc-ts) .fc-seo-hero__word{
    position:absolute !important;
    inset:auto !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    transform:none !important;
    text-align:center !important;
    line-height:.9 !important;
  }
  html body:not(#fc-ts) .fc-about-hero__title{ top:3.5% !important; font-size:23vw !important; }
  html body:not(#fc-ts) .fc-contact-hero__title{ top:3% !important; font-size:18vw !important; }
  html body:not(#fc-ts) .fc-seo-hero__word{ top:7% !important; font-size:30vw !important; }

  /* breadcrumb above, text and barcode below — flowing, like Portfolio */
  html body:not(#fc-ts) .fc-about-hero__top,
  html body:not(#fc-ts) .fc-contact-hero__top{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    display:flex !important;
    justify-content:space-between !important;
    gap:20px !important;
    width:100% !important;
    margin:0 !important;
    padding:23px 21px 0 !important;
    box-sizing:border-box !important;
  }

  html body:not(#fc-ts) .fc-about-hero__bottom,
  html body:not(#fc-ts) .fc-contact-hero__bottom,
  html body:not(#fc-ts) .fc-seo-hero__copy{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    margin-top:22px !important;
  }

  html body:not(#fc-ts) .fc-about-hero__bottom,
  html body:not(#fc-ts) .fc-contact-hero__bottom{
    width:100% !important;
    padding-left:21px !important;
    padding-right:21px !important;
    box-sizing:border-box !important;
  }

  html body:not(#fc-ts) .fc-about-hero__bottom .fc-about-hero__intro h2,
  html body:not(#fc-ts) .fc-contact-hero__bottom .fc-contact-hero__intro h2{
    font-size:min(44px, 9vw) !important;
  }

  html body:not(#fc-ts) .fc-about-hero__barcode,
  html body:not(#fc-ts) .fc-contact-hero__barcode{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    display:flex !important;
    justify-content:flex-end !important;
    width:max-content !important;
    margin:18px 21px 0 auto !important;
  }
}


/* =========================================================
   PHONE CRUMB — one line above every phone banner, as on Portfolio
   ("FEMME CREATIVE / PAGE"). The longer desktop labels are hidden.
========================================================= */

.fc-phone-crumb{
  display:none;
}

@media(max-width:767px){

  html body:not(#fc-ts) .fc-about-hero__top,
  html body:not(#fc-ts) .fc-contact-hero__top,
  html body:not(#fc-ts) .fc-seo-hero__top,
  html body:not(#fc-ts) .fcs-hero-top,
  html body:not(#fc-ts) .fc-editorial-home__topline{
    display:none !important;
  }

  html body:not(#fc-ts) .fc-phone-crumb{
    display:block !important;
    position:relative;
    z-index:8;
    margin:0 0 18px !important;
    padding:0 !important;
    font-family:var(--sans, 'Inter', sans-serif) !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase;
    color:#050505 !important;
    text-align:left !important;
  }

  html body:not(#fc-ts) .fc-phone-crumb b{
    color:#780000;
    font-weight:700;
    padding:0 12px;
  }

  /* Portfolio spacing: crumb 23px under the header, banner 18px under it */
  html body:not(#fc-ts) .fc-about-hero .fc-phone-crumb,
  html body:not(#fc-ts) .fc-contact-hero .fc-phone-crumb,
  html body:not(#fc-ts) .fc-seo-hero .fc-phone-crumb{
    margin:23px 21px 0 !important;
  }

  html body:not(#fc-ts) .fc-seo-hero__stage{
    padding-top:0 !important;
  }

  /* Web Design: crumb lines up with the photo frame (88% wide, centred) */
  html body:not(#fc-ts) .fc-cover-hero{
    padding-top:23px !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile .fc-phone-crumb{
    margin:0 6% 18px !important;
  }

  /* Home: the banner layers are placed from --fc-mobile-top-space */
  html body:not(#fc-ts) .fc-editorial-home{
    --fc-mobile-top-space:56px !important;
  }

  html body:not(#fc-ts) .fc-editorial-home .fc-phone-crumb{
    position:absolute !important;
    top:23px;
    left:var(--fc-mobile-panel-gap, 24px);
    right:var(--fc-mobile-panel-gap, 24px);
    margin:0 !important;
  }
}



/* =========================================================
   PHONE BANNER SIZE — same frame as Portfolio on every page:
   full width less 21px each side, min(62vh, 460px) tall.
   Home is a touch smaller (min(56vh, 420px)).
========================================================= */

@media(max-width:767px){

  html body:not(#fc-ts) .fc-about-hero__stage,
  html body:not(#fc-ts) .fc-contact-hero__stage,
  html body:not(#fc-ts) .fc-seo-hero__art{
    aspect-ratio:auto !important;
    height:min(62vh, 460px) !important;
  }

  /* Web Design: Mobile-WD-BG / WB-Mobile-Ellie are 1080x1920 with the photo
     at 4.1–95.9% across. Both layers are scaled so the photo fills the frame
     width, shifted up by --wd-crop, and clipped to the frame. The frame
     itself stays overflow:visible so WEB / DESIGN can still bleed out. */
  html body:not(#fc-ts) .fc-cover-mobile-stage{
    --wd-crop:.1;
    --wd-h:min(62vh, 460px);
    width:calc(100% - 42px) !important;
    aspect-ratio:auto !important;
    height:var(--wd-h) !important;
    overflow:visible !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile-bg,
  html body:not(#fc-ts) .fc-cover-mobile-person{
    inset:auto !important;
    left:-4.47% !important;
    top:0 !important;
    width:108.9% !important;
    height:auto !important;
    object-fit:fill !important;
    transform:translateY(calc(-1 * var(--wd-crop) * 100%)) !important;
    clip-path:inset(calc(var(--wd-crop) * 100%) 4.1% calc(100% - var(--wd-crop) * 100% - var(--wd-h)) 4.1%) !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile .fc-phone-crumb{
    margin:0 21px 18px !important;
  }

  /* Home */
  html body:not(#fc-ts) .fc-editorial-home{
    --fc-mobile-panel-gap:21px !important;
    --fc-mobile-panel-height:min(56vh, 420px) !important;
    --fc-mobile-portrait-height:calc(var(--fc-mobile-panel-height) * .82) !important;
  }

  html body:not(#fc-ts) .fc-editorial-home__word--one{
    top:calc(var(--fc-mobile-top-space) + 26px) !important;
  }

  html body:not(#fc-ts) .fc-editorial-home__word--two{
    top:calc(var(--fc-mobile-top-space) + 104px) !important;
  }
}


/* =========================================================
   PHONE FIXES — round 2
========================================================= */

@media(max-width:767px){

  /* About banner: "Scroll to discover" moves under the intro instead of
     running off the right edge */
  html body:not(#fc-ts) .fc-about-hero__bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }

  html body:not(#fc-ts) .fc-about-hero__scroll{
    margin:0 !important;
    white-space:nowrap;
  }

  /* Pure white backgrounds */
  html body:not(#fc-ts) .fc-enquiry,
  html body:not(#fc-ts) .fc-founder,
  html body:not(#fc-ts) .fc-personal{
    background:#fff !important;
  }

  /* Web Design: the beige "Conversion" section runs straight into the
     Creative Process photo (no white band) */
  html body:not(#fc-ts) .fcd-details{
    padding-bottom:48px !important;
  }

  html body:not(#fc-ts) .fc-web-design-page .fc-process{
    padding-top:0 !important;
  }

  /* Home: tighter gap between "Engineered to grow" and "Our philosophy" */
  html body:not(#fc-ts) .fc-design-section{
    padding-bottom:40px !important;
  }

  html body:not(#fc-ts) .fc-feel-content{
    padding-top:56px !important;
  }
}


/* =========================================================
   TABLET (768–1100px)
========================================================= */

@media(min-width:768px) and (max-width:1100px){

  /* Web Design hero: less space above, WEB tucked behind Ellie's hair
     (as on desktop), DESIGN lower right */
  html body:not(#fc-ts) .fc-cover-shell{
    padding-top:36px !important;
  }

  html body:not(#fc-ts) .fc-cover-masthead span:first-child{
    font-size:clamp(110px, 16vw, 175px) !important;
  }

  html body:not(#fc-ts) .fc-cover-masthead span:last-child{
    top:52% !important;
    right:2% !important;
    font-size:clamp(90px, 12.5vw, 140px) !important;
  }

  /* Web Design "See for yourself": copy sits under the heading, centred */
  html body:not(#fc-ts) .fc-museum-copy{
    position:static !important;
    inset:auto !important;
    max-width:520px !important;
    margin:22px auto 0 !important;
    text-align:center !important;
  }

  /* Web Design gallery: 9 exhibits = three even rows of three */
  html body:not(#fc-ts) .fc-exhibit[data-project="SOUL BLUEPRINT"]{
    display:none !important;
  }

  /* Web Design "The Collection": name on its own line, then description |
     price | contact underneath */
  html body:not(#fc-ts) .fc-collection-item{
    grid-template-columns:44px 1fr auto !important;
    gap:16px 28px !important;
    padding:34px 6px !important;
    align-items:end !important;
  }

  html body:not(#fc-ts) .fc-collection-number{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start !important;
  }

  html body:not(#fc-ts) .fc-collection-name{
    grid-column:2 / 4 !important;
    grid-row:1 !important;
  }

  html body:not(#fc-ts) .fc-collection-details{
    grid-column:2 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items:end !important;
    gap:32px !important;
  }

  html body:not(#fc-ts) .fc-collection-description{
    max-width:420px !important;
    margin:0 !important;
  }

  html body:not(#fc-ts) .fc-collection-price{
    text-align:right !important;
  }

  html body:not(#fc-ts) .fc-collection-action{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  /* SEO "Hidden in plain sight": heading full width, intro underneath */
  html body:not(#fc-ts) .fc-seo-gallery__heading{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  html body:not(#fc-ts) .fc-seo-gallery__intro{
    max-width:560px !important;
    margin:0 !important;
  }
}

/* Portfolio tablet: featured work 2 x 2; archive of 15 = five even rows */
@media(min-width:701px) and (max-width:1100px){

  html body:not(#fc-ts) .fcp-real-gallery__featured{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  html body:not(#fc-ts) .fcp-real-card:has(a[href*="beautifuldaze"]){
    display:none !important;
  }

  html body:not(#fc-ts) .fcp-real-gallery__count{
    grid-column:1 / -1 !important;
  }
}


/* =========================================================
   PORTRAIT TABLETS (768–1100px, portrait): Home and Web Design banners
   use the phone composition (portrait artwork, sharper on these screens),
   sized up for the larger screen.
========================================================= */

@media(min-width:768px) and (max-width:1100px) and (orientation:portrait){

  /* one-line crumb above the banner */
  html body:not(#fc-ts) .fc-editorial-home__topline{
    display:none !important;
  }

  html body:not(#fc-ts) .fc-editorial-home .fc-phone-crumb,
  html body:not(#fc-ts) .fc-cover-mobile .fc-phone-crumb{
    display:block !important;
    position:relative;
    z-index:8;
    padding:0 !important;
    font-family:var(--sans, 'Inter', sans-serif) !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase;
    color:#050505 !important;
    text-align:left !important;
  }

  html body:not(#fc-ts) .fc-phone-crumb b{
    color:#780000;
    font-weight:700;
    padding:0 12px;
  }

  /* Home */
  html body:not(#fc-ts) .fc-editorial-home{
    --fc-mobile-panel-gap:32px !important;
    --fc-mobile-top-space:64px !important;
    --fc-mobile-panel-height:min(64vh, 820px) !important;
    --fc-mobile-portrait-height:calc(var(--fc-mobile-panel-height) * .84) !important;
  }

  html body:not(#fc-ts) .fc-editorial-home .fc-phone-crumb{
    position:absolute !important;
    top:28px;
    left:var(--fc-mobile-panel-gap);
    right:var(--fc-mobile-panel-gap);
    margin:0 !important;
  }

  html body:not(#fc-ts) .fc-editorial-home__word--one{
    top:calc(var(--fc-mobile-top-space) + 4.5vw) !important;
    font-size:21vw !important;
  }

  html body:not(#fc-ts) .fc-editorial-home__word--two{
    top:calc(var(--fc-mobile-top-space) + 20.5vw) !important;
    font-size:13.5vw !important;
  }

  html body:not(#fc-ts) .fc-editorial-home__portrait{
    width:100% !important;
  }

  /* Web Design */
  html body:not(#fc-ts) .fc-cover-hero{
    padding-top:28px !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile .fc-phone-crumb{
    margin:0 32px 20px !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile-stage{
    --wd-crop:.15;
    --wd-h:min(calc((100vw - 64px) * 1.18), 80vh);
    width:calc(100% - 64px) !important;
    aspect-ratio:auto !important;
    height:var(--wd-h) !important;
    overflow:visible !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile-bg,
  html body:not(#fc-ts) .fc-cover-mobile-person{
    inset:auto !important;
    left:-4.47% !important;
    top:0 !important;
    width:108.9% !important;
    height:auto !important;
    object-fit:fill !important;
    transform:translateY(calc(-1 * var(--wd-crop) * 100%)) !important;
    clip-path:inset(calc(var(--wd-crop) * 100%) 4.1% calc(100% - var(--wd-crop) * 100% - var(--wd-h)) 4.1%) !important;
  }

  html body:not(#fc-ts) .fc-cover-mobile-info{
    width:calc(100% - 64px) !important;
  }

  /* Website audit (phone composition): centre the description */
  html body:not(#fc-ts) .fc-museum-audit .fc-museum-description{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Landscape tablets keep the desktop-style Web Design banner: WEB at the top */
@media(min-width:768px) and (max-width:1100px) and (orientation:landscape){
  html body:not(#fc-ts) .fc-cover-masthead span:first-child{
    top:4% !important;
    left:6% !important;
  }
}