/* ==========================================================================
   responsive.css — ALL media-query CSS lives here (plain CSS, hand-written).
   style.scss holds base desktop styles only.

   Write selectors FULLY EXPANDED — flatten the SCSS nesting chain into one
   selector string. No SCSS nesting, no `&`.

     SCSS base:  .mainsec { header { ul { li { a { … } } } } }
     here:       .mainsec header ul li a { … }

   Use the breakpoint blocks already in this file. Do NOT add new ones.

   From 767 down: centre everything EXCEPT the nav menu and list content
   (.whychoose ul, .processcont ul, .blogarticle ul, .ftnav ul, .social ul, …),
   which stay left-aligned so multi-line items still read properly. Keep
   spacing tight — sections should not drift apart on small screens.

   NOTE: `ul` elements carry no classes (SOP §13) — WordPress can't add them.
   Always hook a UL through its parent: `.ftnav ul`, never `ul.ftnav`.

   Every block here is max-width. The container block at the very end is the
   one exception and uses min-width. Keep it last.
   ========================================================================== */

@media screen and (max-width: 1900px) {
}

@media screen and (max-width: 1400px) {
  h1 {
    font-size: 3rem;
    line-height: 1.15;
  }

  h2 {
    font-size: 2.375rem;
  }

  .mainbanner {
    min-height: 40rem;
  }

  /* Below 1400 the container drops to 1140 but the brand + nav + CTA still
       want 1175, so the nav overran the row and sat flush against the logo.
       Trimming the nav and the button back buys the row its spacing again. */
  .mainhd .headerright {
    gap: 1.5rem;
  }

  .mainhd .navigation .stellarnav > ul {
    gap: 1rem;
  }

  .mainhd .navigation .stellarnav > ul > li > a {
    font-size: 0.875rem;
  }

  .mainhd .contact .btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.8125rem;
  }

  .mainft .ftcontact ul,
  .mainft .ftcontact ul li {
    gap: 3rem;
  }

  .bloghero h1 {
    font-size: 2.75rem;
  }
}

@media screen and (max-width: 1200px) {
  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.125rem;
  }

  h3 {
    font-size: 1.875rem;
  }

  h4 {
    font-size: 1.375rem;
  }

  .sec-space {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sec-space-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Row gaps only bite once the grid wraps, so they are safe at any width */
  .whychoose .row,
  .about .row,
  .process .row,
  .insights .row,
  .blogmain .row,
  .stats .row {
    row-gap: 3rem;
  }

  .mainhd .headerright {
    gap: 1rem;
  }

  .mainhd .navigation .stellarnav > ul {
    gap: 0.75rem;
  }

  .mainhd .navigation .stellarnav > ul > li > a {
    font-size: 0.8125rem;
    padding: 0.5rem;
  }

  .mainhd .contact .btn {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
  }

  .mainhd .logo img {
    width: 5rem;
  }

  .mainhd .logo .logopartner img {
    width: 6.25rem;
  }

  .btn {
    min-width: 11rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
  }

  /* Header here is topbar (50) + logo/nav row (115) = 165px */
  body:has(.navigation-white) {
    padding-top: 10.5rem;
  }

  .mainbanner {
    min-height: 35rem;
  }

  .mainbanner > .container {
    bottom: 3.5rem;
  }

  .whychoose .playbtn {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.75rem;
  }

  .lifestyle {
    padding: 3.5rem 0;
  }

  .process {
    padding-bottom: 5rem;
  }

  .process .processcont {
    padding: 2.5rem 0;
  }

  .process .processmediacont {
    padding: 2.5rem;
  }

  .testimonials .tsttop p {
    font-size: 1.125rem;
  }

  .testimonials .tstquote {
    font-size: 3.5rem;
  }

  .insights {
    padding-bottom: 4rem;
  }

  .insights .insightcont {
    padding: 1.5rem;
  }

  .showcase .showcasevideo {
    width: 15rem;
    bottom: 2rem;
  }

  .contact-area {
    padding-top: 5rem;
  }

  .contact-area .contactband {
    padding: 4rem 0 10rem;
  }

  .contact-area .contactvideo {
    top: -9rem;
    width: 14rem;
  }

  .contact-area.contact-area_center .contactband {
    padding: 3rem 0 12rem;
  }

  .mainft .ftnav ul,
  .mainft .ftnav ul li {
    gap: 0.75rem;
  }

  .mainft .ftnav ul li a {
    font-size: 0.875rem;
  }

  .bloghero {
    padding: 3.5rem 0 2.5rem;
  }

  .bloghero h1 {
    font-size: 2.5rem;
  }

  .blogmain {
    padding-top: 3.5rem;
  }

  .blogmain .blogarticle h3 {
    font-size: 1.75rem;
  }

  .blogmain .blogquote p {
    font-size: 1.25rem;
  }

  .blogmain .blogcallout,
  .blogmain .blogreads {
    padding: 1.5rem;
  }

  .blogmain .blogcallout h4 {
    font-size: 1.5rem;
  }
  .mainft .ftcontact ul,
  .mainft .ftcontact ul li {
    gap: 1rem;
  }
  .mainft .ftaddress {
    white-space: normal;
  }
}

@media screen and (max-width: 991px) {
  /* Bootstrap stacks the col-lg-* columns below this width */
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.875rem;
  }

  h3 {
    font-size: 1.625rem;
  }

  .sec-space {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sec-space-sm {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sechead {
    margin-bottom: 1.75rem;
  }

  .mainbanner {
    min-height: 31rem;
  }

  /* Media panels no longer have a neighbouring column to take height from.
       .processmedia holds an absolutely-positioned image, so without an
       aspect-ratio here it collapses to 0 and the photo disappears. */
  .whychoose .whychoosemedia {
    height: auto;
    aspect-ratio: 785 / 787;
  }

  .process .processmedia {
    height: auto;
    aspect-ratio: 816 / 754;
  }
  .process .processmedia .processvideo {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 30%;
    transform: translate(50%, -50%);
  }

  .about .aboutcont,
  .process .processcont,
  .contact-area .contactcont {
    max-width: none;
  }

  .process .processcont {
    padding: 2rem 0 0;
  }

  .lifestyle {
    padding: 3rem 0;
  }

  .lifestyle .sechead.lifestyle_head,
  .testimonials .sechead.testimonials_head,
  .insights .sechead.insights_head {
    margin-bottom: 2rem;
  }

  .lifestyle .lifestyletext {
    margin-top: 2rem;
  }

  .testimonials .tstnav {
    margin-top: 2rem;
  }

  .showcase .showcasevideo {
    width: 13rem;
  }

  /* .contact-area .contactvideo {
    top: -7rem;
    width: 16rem;
  } */

  .contact-area .contactband {
    padding: 3.5rem 0 8rem;
  }

  .mainft .ftmain {
    flex-direction: column;
    gap: 2rem;
  }

  .mainft .ftrow {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .mainft .ftcontact ul {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .mainft .ftcontact ul li {
    gap: 1.5rem;
  }

  .blogmain .blogsidebar {
    gap: 1.5rem;
  }

  /* ===== Burger takes over here (stellarNav breakpoint: 991 in app.js) =====
       Below 992 Bootstrap's container is 720px, but the six-item nav plus both
       logos and the CTA need ~945px. Release the desktop flex row, drop the
       header CTA, and let the cloned one inside the menu carry it. */
  /* The panel is closed by default and stellarnav opens it by toggling
     .current-menu-item on the nav. Both rules are scoped to .mobile so they
     out-specify the desktop `.mainhd .navigation .stellarnav > ul { display:
     flex }` in style.css — without that the panel counts as permanently open,
     stellarnav's windowCheck() hides it with an inline `display: none` on load,
     and no class toggle can ever beat that inline style: the burger goes dead.

     Navy ground, because the item and CTA colours below were drawn for a dark
     panel (white link text, white pill button) — on stellarnav's stock white
     one the menu opens blank. */
  .mainhd .navigation .stellarnav.mobile > ul {
    display: none;
    gap: 0;
    background: var(--primary, #002349);
  }

  .mainhd .navigation .stellarnav.mobile.current-menu-item > ul {
    display: block;
  }

  /* Dividers and close cross both default to a light ground (black hairline,
     #ff783e cross) — neither reads on navy. */
  .mainhd .navigation .stellarnav.mobile li a {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  .mainhd .navigation .stellarnav.mobile .icon-close:before,
  .mainhd .navigation .stellarnav.mobile .icon-close:after {
    border-bottom-color: var(--white, #ffffff);
  }

  .mainhd .navigation .stellarnav > ul > li > a {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }

  .mainhd .contact {
    display: none;
  }

  .mainhd .navigation .stellarnav > ul > li.navcta {
    display: block;
    padding: 0.75rem 1rem 1rem;
  }

  .mainhd .navigation .stellarnav > ul > li.navcta > a {
    display: flex;
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: var(--white, #ffffff);
    color: var(--primary, #002349);
    border-color: var(--white, #ffffff);
    text-decoration: none;
  }

  .mainhd .headerrow {
    gap: 0.75rem;
    padding: 0.375rem 0;
  }

  /* Header here is topbar (50) + logo/burger row (107) = 157px */
  body:has(.navigation-white) {
    padding-top: 10rem;
  }

  .stats .statnum {
    font-size: 2.75rem;
  }
  .contact-area .contactform input:not([type="submit"]),
  .contact-area .contactform input[type="submit"] {
    line-height: 2rem;
  }
  /* Stacked, the panel lands straight under the submit button with nothing
       between them — the desktop layout relied on the absolute offset for that
       gap, so the margin has to supply it here. */
  .contact-area .contactvideo {
    top: -10rem;
    width: 13rem;
  }
  body:has(.navigation-white) .navigation .stellarnav > ul > li > a {
    color: #fff;
  }
  body:has(.navigation-white) .navigation .stellarnav > ul > li > a:hover {
    background: #fff;
    color: var(--primary, #002349);
    opacity: 1;
  }
  header .stellarnav .menu-toggle {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  header .stellarnav .menu-toggle span.bars {
    top: 0;
  }
  .topbar-hidden .mainhd {
    transform: unset;
  }
  .topbar-hidden .topbar {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  /* ======================================================================
       MOBILE — centre everything EXCEPT the nav menu and list content.
       Spacing pulled in hard so sections don't drift apart.
       ====================================================================== */

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.625rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  h5 {
    font-size: 1.125rem;
  }

  p {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  /* Two neighbouring sections each contribute their own padding, so 2rem
       here reads as a 4rem band between them — already generous on a phone. */
  .sec-space {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sec-space-sm {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .whychoose .row,
  .about .row,
  .process .row,
  .insights .row,
  .blogmain .row,
  .stats .row {
    row-gap: 1.5rem;
  }

  .sechead {
    margin-bottom: 1rem;
  }

  /* ===== Centre everything ===== */
  .mainbanner .bannercont,
  .stats .statitem,
  .sechead,
  .about .aboutcont,
  .about .aboutcaption,
  .lifestyle .lifestyletext,
  .process .processcont,
  .process .processmediacont,
  .testimonials .tstitem,
  .insights .insightcont,
  .contact-area .contactcont,
  .bloghero .blogherocont,
  .blogfeatured .blogcaption,
  .blogmain .blogarticle,
  .blogmain .blogcallout,
  .blogmain .blogreads,
  .mainft .ftmain,
  .mainft .ftbrand,
  .mainft .ftaddress,
  .mainft .ftbottom {
    text-align: center;
  }

  /* Flex rows need centring rather than text-align */
  .testimonials .tstauthor,
  .bloghero .blogauthor,
  .contact-area .contactform form {
    justify-content: center;
  }

  .about .aboutcont,
  .process .processcont,
  .contact-area .contactcont,
  .bloghero .blogherocont,
  .lifestyle .lifestyletext,
  .insights .insightlink,
  .process .processmediacont:before,
  .testimonials .tsttop:after,
  .mainft .ftbrand:after {
    margin-inline: auto;
  }

  .mainft .ftmain,
  .mainft .ftright,
  .mainft .ftrow,
  .mainft .ftbottom {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .mainft .ftbrand {
    align-items: center;
    max-width: none;
  }

  /* ===== NOT centred — nav menu and list content stay left ===== */
  /* .tstmeta and .blogauthorinfo sit beside an avatar, so their name and role
       read left off it even though the block around them is centred. */
  .testimonials .tstmeta,
  .bloghero .blogauthorinfo,
  .mainhd .navigation .stellarnav ul,
  .mainhd .navigation .stellarnav ul li,
  .whychoose ul,
  .process .processcont ul,
  .blogmain .blogarticle ul,
  .blogmain .blogreads ul,
  .mainft .ftnav ul,
  .mainft .ftlegal ul,
  .mainft .ftcontact ul,
  .topbar .topcontact ul,
  .topbar .social ul,
  .bloghero .blogherocont > ul {
    text-align: left;
  }

  /* ===== Header =====
       The topbar is dropped on mobile. Stacked, it ran to three rows and took
       117px of a 185px header — that pushed the logo row past the hero's top
       scrim, leaving the logos washed out over the bright photo, and collided
       with the h1. Phone, email and socials all still appear in the footer. */
  /* .topbar {
    display: none;
  } */
  .topbar .topcontact ul li a > em {
    display: none;
  }

  .icocircle {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.75rem;
  }

  /* Visibility is owned by the .mobile / .current-menu-item pair in the 991
     block above — don't restate display here or the panel can't close */
  .mainhd .navigation .stellarnav > ul {
    gap: 0;
  }

  .mainhd .navigation .stellarnav > ul > li > a {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }

  /* Logo + burger on one row — the CTA is duplicated inside the menu, and
       keeping it here forces a second row that eats a third of the screen */
  .mainhd .headerrow {
    gap: 0.75rem;
    padding: 0.375rem 0;
  }

  .mainhd .headerright {
    gap: 0.75rem;
  }

  .mainhd .contact {
    display: none;
  }

  /* …and reappears as the last item inside the mobile menu panel */
  .mainhd .navigation .stellarnav > ul > li.navcta {
    display: block;
    padding: 0.75rem 1rem 1rem;
  }

  .mainhd .navigation .stellarnav > ul > li.navcta > a {
    display: flex;
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: var(--white, #ffffff);
    color: var(--primary, #002349);
    border-color: var(--white, #ffffff);
    text-decoration: none;
  }

  .mainhd .logo a {
    padding: 0;
  }

  .mainhd .logo img {
    width: 3.75rem;
  }

  .mainhd .logo .logopartner img {
    width: 4.5rem;
  }

  .btn {
    min-width: 0;
    padding: 0.375rem 1.125rem;
    font-size: 0.8125rem;
  }

  /* Only the nav row is left now that the topbar is hidden — 68px of it, so
       5rem opened a 12px dead band above the hero */
  body:has(.navigation-white) {
    padding-top: 7.5rem;
  }

  /* Nothing to slide away once the topbar is gone */
  .topbar-hidden .mainhd {
    transform: none;
  }

  /* ===== Banner ===== */
  .mainbanner {
    min-height: 28rem;
  }

  .mainbanner > .container {
    bottom: 2rem;
  }

  /* ===== Stats ===== */
  .stats .statnum {
    font-size: 2.25rem;
  }

  .stats .statlabel {
    font-size: 0.8125rem;
  }

  /* ===== Why choose ===== */
  .whychoose .reasonitem {
    padding: 1rem 0;
  }

  .whychoose .reasonrow {
    gap: 1rem;
  }

  .whychoose .reasonnum {
    width: 2.5rem;
    font-size: 1.75rem;
  }

  .whychoose .playbtn {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.125rem;
  }

  /* ===== Lifestyle ===== */
  .lifestyle {
    padding: 2rem 0;
  }

  .lifestyle .lifestyletext {
    margin-top: 1rem;
  }

  .lifestyle .lifestyletext p {
    font-size: 0.9375rem;
  }

  /* ===== About ===== */
  .about .aboutcont .sechead {
    margin-bottom: 1rem;
  }

  .about .aboutcaption {
    margin-top: 1rem;
    font-size: 1rem;
  }

  /* ===== Process ===== */
  .process {
    padding-bottom: 2rem;
  }

  /* .process .row already supplies row-gap between the stacked columns —
       a top padding here doubles it */
  .process .processcont {
    padding: 0;
  }

  .process .processmediacont {
    padding: 1.5rem;
  }

  .process .stepitem {
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  /* The rule divides steps — the last one has nothing to divide from */
  .process .stepitem:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .process .stepnum {
    width: 2.5rem;
    font-size: 1.75rem;
  }

  /* ===== Showcase — panel comes out of the corner =====
       No min-height and no translate: a transform moves the panel visually but
       not in layout, so min-height left a dead band above and below it. Let
       padding + the panel set the band's height instead. */
  .showcase {
    aspect-ratio: auto;
    padding: 1.5rem 0;
  }

  .showcase > .container {
    height: auto;
  }

  .showcase .showcasevideo {
    position: static;
    width: 11rem;
    margin: 0 auto;
  }

  /* ===== Testimonials ===== */
  .testimonials .tstitem {
    padding: 1.25rem;
    gap: 1rem;
  }

  .testimonials .tsttop {
    gap: 1rem;
  }

  .testimonials .tstquote {
    font-size: 2.75rem;
  }

  .testimonials .tstnav {
    margin-top: 1rem;
  }

  /* ===== Insights ===== */
  .insights {
    padding-bottom: 2rem;
  }

  .insights .insightcont {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  /* ===== Contact CTA — panel comes out of the overlap ===== */
  .contact-area {
    padding-top: 0;
  }

  .contact-area .contactband,
  .contact-area.contact-area_center .contactband {
    padding: 2rem 0;
  }

  .contact-area .contactform input:not([type="submit"]),
  .contact-area .contactform input[type="submit"] {
    width: 100%;
  }

  /* Stacked, the panel lands straight under the submit button with nothing
       between them — the desktop layout relied on the absolute offset for that
       gap, so the margin has to supply it here. */
  .contact-area .contactvideo {
    position: static;
    width: 13rem;
    margin: 2rem auto 0;
    border-width: 0.5rem;
  }

  /* ===== Footer ===== */
  .mainft {
    padding: 2.5rem 0 1.5rem;
  }

  .mainft .ftnav ul,
  .mainft .ftnav ul li,
  .mainft .ftlegal ul,
  .mainft .ftlegal ul li {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
  }

  .mainft .ftnav ul {
    padding: 0;
  }

  .mainft .ftcontact ul,
  .mainft .ftcontact ul li {
    flex-direction: column;
    gap: 1rem;
  }

  .mainft .ftcontact ul li:not(:last-child):after {
    display: none;
  }

  .mainft .ftbottom {
    margin-top: 1.5rem;
    gap: 0.75rem;
  }

  .mainft .ftlogo img {
    width: 6.25rem;
  }

  /* ===== Video popup ===== */
  .videomodal {
    padding: 1rem;
  }

  .videomodalclose {
    top: -2.75rem;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }

  /* ===== Blog details ===== */
  .bloghero {
    padding: 2rem 0 1.5rem;
  }

  .bloghero .blogherocont {
    gap: 1.25rem;
  }

  .bloghero h1 {
    font-size: 1.75rem;
  }

  .bloghero .bloglead {
    font-size: 1rem;
  }

  .bloghero .blogherocont > ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  .bloghero .blogherocont > ul li {
    gap: 0.5rem;
  }

  .blogmain {
    padding-top: 2.5rem;
  }

  .blogmain .blogarticle p {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
  }

  .blogmain .blogarticle h3 {
    font-size: 1.375rem;
    margin-bottom: 1.5rem;
  }

  .blogmain .blogquote {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .blogmain .blogquote p {
    font-size: 1.0625rem;
  }

  .blogmain .blogarticle ul {
    margin-bottom: 1.5rem;
  }

  .blogmain .blogarticle ul li {
    padding-left: 1.5rem;
    font-size: 0.9375rem;
  }

  .blogmain .blogcallout,
  .blogmain .blogreads {
    padding: 1.25rem;
  }

  .blogmain .blogcallout h4 {
    font-size: 1.25rem;
  }
  .mainft .ftcontact ul li a,
  .mainft .ftcompany,
  .mainft .ftlegal ul li a {
    font-size: 0.9rem;
  }
  .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
  }
  .process .processmediacont:before {
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 639px) {
}

@media screen and (max-width: 576px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.375rem;
  }

  /* Section rhythm is already 2rem / 1.5rem from the 767 block — repeating it
       here would be a second rule saying the same thing. */

  .mainbanner {
    min-height: 24rem;
  }

  .stats .statnum {
    font-size: 1.875rem;
  }

  .whychoose .reasonrow,
  .process .stepitem {
    gap: 0.75rem;
  }

  .whychoose .reasonnum,
  .process .stepnum {
    width: 2rem;
    font-size: 1.5rem;
  }

  .testimonials .tstquote {
    font-size: 2.25rem;
  }

  .contact-area .contactvideo {
    width: 11rem;
  }

  .showcase .showcasevideo {
    width: 9rem;
  }

  .bloghero h1 {
    font-size: 1.5rem;
  }

  .blogmain .blogarticle h3 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 480px) {
}

@media screen and (max-width: 320px) {
}

/* ==========================================================================
   CONTAINER WIDTHS — keep this block LAST in the file (SOP §3b).

   Bootstrap 5.3 native .container max-widths (left untouched):
     >= 576px  -> 540px
     >= 768px  -> 720px
     >= 992px  -> 960px
     >= 1200px -> 1140px
     >= 1400px -> 1320px

   Figma frame is 1600px wide, content spans x=30 -> x=1570 = 1540px.
   That is wider than Bootstrap's largest native tier, so only the tiers
   above 1400px are overridden. Every smaller tier keeps the Bootstrap value.

   .container keeps Bootstrap's 0.75rem inline padding — .row applies a
   matching -0.75rem margin, so columns still reach the full max-width edge.
   ========================================================================== */

/* @media screen and (min-width: 1600px) {
    .container { */
/* max-width: 1540px;  */
/* 1540px — Figma content width */
/* }
} */

@media screen and (min-width: 1500px) {
  .container {
    max-width: 95%;
    /* 1900px */
  }
}

@media screen and (min-width: 1600px) {
  .container {
    max-width: 95%;
    /* 1900px */
  }
}

@media screen and (min-width: 1700px) {
  .container {
    max-width: 98%;
    /* 1900px */
  }
}

@media screen and (min-width: 1800px) {
  .container {
    max-width: 98%;
    /* 1900px */
  }
}

@media screen and (min-width: 1920px) {
  .container {
    max-width: 98%;
    /* 1900px */
  }
}