/* =========================================================
   V66 — ONE GLOBAL SITE FRAME
   Header and content share exactly the same viewport.
   Mobile outer margin: 10px left + 10px right.
========================================================= */
:root{
  --frame-max:1440px;
  --frame-edge:32px;
  --frame-width:min(var(--frame-max), calc(100vw - var(--frame-edge) - var(--frame-edge)));
}
@media (min-width:1600px){:root{--frame-edge:40px;}}
@media (min-width:1280px) and (max-width:1599px){:root{--frame-edge:32px;}}
@media (min-width:1025px) and (max-width:1279px){:root{--frame-edge:22px;}}
@media (min-width:768px) and (max-width:1024px){:root{--frame-edge:12px;}}
@media (max-width:767px){:root{--frame-edge:10px;}}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
*,*::before,*::after{box-sizing:border-box;}

/* One outer frame for navigation and every principal content wrapper. */
body .navbar__inner,
body.page:not(.page--home) .navbar__inner,
.story-page .navbar__inner,
.container,
.page-hero__inner,
.story-shell,
.footer-contact__inner,
.footer-contact__bottomInner,
body.page--consultation .booking__wrap{
  width:var(--frame-width) !important;
  max-width:var(--frame-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Story pages use the same frame variable as the header. */
.story-page{
  --shell:var(--frame-width) !important;
}
.story-shell{
  width:var(--frame-width) !important;
  max-width:var(--frame-max) !important;
}

/* Nested grids must fill their parent frame, not calculate another viewport. */
body:has(.project-challenges) .project-gallery__grid,
body:has(.project-challenges) .project-challenges__inner,
body.page--portfolio .projects .page-hero__inner,
body.page--portfolio .portfolio-gallery .page-hero__inner,
body.page--portfolio .portfolio-context > .page-hero__inner,
body.page--privacy .privacy-hero__inner,
body.page--privacy .privacy-document > .page-hero__inner{
  width:var(--frame-width) !important;
  max-width:var(--frame-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body:has(.project-challenges) .page-hero__inner .project-gallery__grid{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Full-width moving/visual modules are clipped to the same header viewport. */
.marquee-section .marquee,
body.page--portfolio .portfolio-context__logos,
.logo-marquee{
  width:var(--frame-width) !important;
  max-width:var(--frame-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden;
}

/* Never allow a content component to push the frame wider. */
.main,main,section,article,form,fieldset,
.page-hero__inner,.story-shell,.container,
.project-gallery__grid,.project-challenges__inner,
.portfolio-hero__layout,.portfolio-context__heading,
.about-grid,.info-grid,.contact-paths,.contact-grid-2,
.booking-grid,.booking-card,.privacy-row{
  min-width:0 !important;
}
img,video,svg,canvas,picture,iframe{
  max-width:100% !important;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width:1024px){
  body .navbar__inner,
  body.page:not(.page--home) .navbar__inner,
  .story-page .navbar__inner{
    width:var(--frame-width) !important;
    max-width:none !important;
  }
  .drawer__nav{
    left:var(--frame-edge) !important;
    right:var(--frame-edge) !important;
    width:auto !important;
  }
}

/* =========================================================
   MOBILE — EXACTLY 10PX OUTER MARGIN EVERYWHERE
========================================================= */
@media (max-width:767px){
  :root{
    --frame-edge:10px;
    --frame-width:calc(100vw - 20px);
  }

  body .navbar__inner,
  body.page:not(.page--home) .navbar__inner,
  .story-page .navbar__inner,
  .container,
  .page-hero__inner,
  .story-shell,
  .footer-contact__inner,
  .footer-contact__bottomInner,
  body.page--consultation .booking__wrap,
  body:has(.project-challenges) .project-gallery__grid,
  body:has(.project-challenges) .project-challenges__inner,
  body.page--portfolio .projects .page-hero__inner,
  body.page--portfolio .portfolio-gallery .page-hero__inner,
  body.page--portfolio .portfolio-context > .page-hero__inner,
  body.page--privacy .privacy-hero__inner,
  body.page--privacy .privacy-document > .page-hero__inner,
  .marquee-section .marquee,
  body.page--portfolio .portfolio-context__logos,
  .logo-marquee{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .drawer__nav{
    left:10px !important;
    right:10px !important;
  }

  /* Modals and overlays keep the same mandatory 10px safe edge. */
  .cookie-modal__panel{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    margin:10px auto !important;
    max-height:calc(100dvh - 20px) !important;
  }
  .lightbox__stage{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .lightbox__btn--prev{left:10px !important;}
  .lightbox__btn--next{right:10px !important;}
  .lightbox__close{right:10px !important;top:10px !important;}

  /* Typography must fit the safe frame without horizontal scrolling. */
  .page-hero__title,
  .story-hero__title,
  .story-display,
  .project-title,
  .project-challenges__title,
  .project-final__title,
  .project-final__answer,
  .privacy-hero__title,
  .section-title,
  .big-quote{
    max-width:100% !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .page-hero,
  .story-section,
  .project-gallery,
  .project-challenges,
  .project-final,
  .subpage-section,
  .subpage-cta,
  .privacy-hero,
  .privacy-document{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* No accidental second outer gutter inside main frame. */
  .container,
  .page-hero__inner,
  .story-shell{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* =========================================================
   V68 — FINAL CTA GEOMETRY / NO ACID ROUTE
   Homepage 04 + project case-study 02 use the same safe composition.
========================================================= */
.story-final__inner,
body.page--project .project-final__inner{
  --final-copy-shift:clamp(34px,6vw,92px);
}

.story-final__title,
.story-final__answer,
body.page--project .project-final__title,
body.page--project .project-final__answer{
  font-size:clamp(52px,7.1vw,112px) !important;
  line-height:.88 !important;
  letter-spacing:-.022em !important;
}

.story-final__title,
body.page--project .project-final__title{
  width:100% !important;
  max-width:100% !important;
}

.story-final__answer,
body.page--project .project-final__answer{
  width:calc(100% - var(--final-copy-shift)) !important;
  max-width:calc(100% - var(--final-copy-shift)) !important;
  margin-left:var(--final-copy-shift) !important;
  margin-right:0 !important;
  margin-top:clamp(18px,2vw,28px) !important;
  text-align:right !important;
}

@media (max-width:899px){
  .story-final__inner,
  body.page--project .project-final__inner{
    --final-copy-shift:clamp(20px,5vw,42px);
  }
  .story-final__title,
  .story-final__answer,
  body.page--project .project-final__title,
  body.page--project .project-final__answer{
    font-size:clamp(40px,8.4vw,68px) !important;
    line-height:.9 !important;
  }
}

@media (max-width:599px){
  .story-final__inner,
  body.page--project .project-final__inner{
    --final-copy-shift:clamp(12px,4vw,22px);
  }
  .story-final__title,
  .story-final__answer,
  body.page--project .project-final__title,
  body.page--project .project-final__answer{
    font-size:clamp(31px,8.1vw,46px) !important;
    line-height:.94 !important;
    letter-spacing:-.018em !important;
  }
  .story-final__answer,
  body.page--project .project-final__answer{
    margin-top:16px !important;
  }
}

/* =========================================================
   V88 — MOBILE H1 SAFE FIT
   Keep every H1 inside the viewport; consultation stays on one line.
========================================================= */
@media (max-width:799px){
  body.page h1{
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  body.page--consultation .consultation-hero .page-hero__title,
  body.page--consultation .page-hero__title{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(22px,8.6vw,42px) !important;
    line-height:.95 !important;
    letter-spacing:-.01em !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
}