@media only screen and (max-width: 3000px) and (min-width: 2500.98px) {
	.container {
		max-width: 2100px;
	}



}

@media only screen and (max-width: 2500px) and (min-width: 1921px) {
	.container {
		max-width: 1800px;
	}

}

@media only screen and (max-width: 1920px) and (min-width: 1500px) {
	.container {
		max-width: 1600px;
	}

}

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

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

@media only screen and (max-width: 1366px) {
	html {
		font-size: 15px;
	}
}

@media (max-width: 1199.98px) {
	html {
		font-size: 14px;
	}
}

@media (max-width: 991.98px) {
	html {
		font-size: 13px;
	}
}

@media (max-width: 767.98px) {
	html {
		font-size: 12px;
	}
}

@media (max-width: 575.98px) {}

@media (max-width: 320.98px) {}
/* Hero: stop the vertical "Follow us" bar overlapping the heading. The rail
   sits at left:1%; the text column's left edge only clears it from ~1050px
   up, so the padding has to run through the 992-1199 band as well. */
@media (max-width: 1199.98px) {
    .main-slider .slideOne { padding-left: 52px; }
}
@media (max-width: 575px) {
    .main-slider .header_links { display: none; }
    .main-slider .slideOne { padding-left: 0; }
}

/* ==========================================================================
   RESPONSIVE — 2026-09-03. See docs/superpowers/specs/2026-09-03-responsive-design.md
   custom.min.css is never edited; every breakpoint rule lives here.
   ========================================================================== */

/* Header: .navbar-brand carries 19.6rem of horizontal padding to build its
   angled clip-path. That is ~235px at the mobile root — wider than the logo
   itself — and is what pushed every page 68px off screen. */
@media (max-width: 991.98px) {
  .navbar-brand {
    padding: 0.6rem 3.5rem 0.6rem 1rem;
    max-width: 100%;
  }
  .navbar-brand img {
    max-width: 190px;
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand {
    padding: 0.5rem 2.2rem 0.5rem 0.75rem;
  }
  .navbar-brand img {
    max-width: 150px;
  }
}

/* Buttons: fixed 3.2rem side padding left too little room for the label,
   so "VIEW MORE" wrapped inside its own pill. custom.min.css shadows plain
   .themeBtn padding with 0,3,0 selectors on the packages heading/cards
   (.section-5 .top-bar .themeBtn, .section-5/.section-15 .pkg-content
   .themeBtn), so those are matched here to actually win. */
@media (max-width: 991.98px) {
  .themeBtn,
  .section-5 .top-bar .themeBtn,
  .section-5 .pkg-content .themeBtn,
  .section-15 .pkg-content .themeBtn {
    padding: 1.1rem 2rem;
    font-size: 1.15rem;
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .themeBtn,
  .section-5 .top-bar .themeBtn,
  .section-5 .pkg-content .themeBtn,
  .section-15 .pkg-content .themeBtn {
    padding: 1rem 1.6rem;
    font-size: 1.05rem;
  }
}

/* Footer nav: flex with a 5rem gap and no wrap, so five items ran off screen. */
@media (max-width: 991.98px) {
  .footer-menu ul {
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }
}

@media (max-width: 575.98px) {
  .footer-menu ul {
    gap: 0.75rem 1.25rem;
    font-size: 1.05rem;
  }
  footer .contact-details ul {
    word-break: break-word;
  }
}

/* Display type: px/vw clamps so headings scale continuously and no longer
   depend on the root font-size ramp. Upper bounds reproduce the current
   >=1367px sizes exactly (hero 80, large 128, h2 44, h3 25.6, h4 20). */
:root {
  --fs-large:  clamp(48px, 7.70vw + 25px,   128px);
  --fs-hero:   clamp(34px, 4.80vw + 16px,    80px);
  --fs-banner: clamp(34px, 4.80vw + 16px,    80px);
  --fs-h2:     clamp(26px, 1.82vw + 19.2px,  44px);
  --fs-h3:     clamp(18px, 0.77vw + 15.1px,  25.6px);
  --fs-h4:     clamp(15px, 0.51vw + 13.1px,  20px);
}

/* Long single words (e.g. "Creative") must never split mid-word.
   .inner-banner .mainHead is added to the brief's selector list: custom.min.css
   (line ~4076) carries a 0,2,0 rule `.inner-banner .mainHead { overflow-wrap:
   normal; ... }` that would otherwise beat a plain 0,1,0 .mainHead selector on
   every inner-page banner (services, portfolio, pricing, contact-us, privacy,
   terms). */
h1, h2, h3, .mainHead, .heading-sec h2, .inner-banner .mainHead {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Hero, 576-1199 (2026-09-05). Three separate failures in this band:
   - 992-1199: the col-lg-6 text column is 450px wide but the CTA row needs
     ~554px, so the phone number clipped. The collage is fixed-px pieces
     (204/192px cards, 100px tiles, 600px circle) over a fluid photo, so in
     the narrower column the cards land on the model's face.
   - 768-991: the columns stack, but .main-slider is locked to 100vh with the
     slide content vertically centred, so text + collage (~1220px) is cropped
     at both ends and the photo covers the buttons.
   - 576-767: col-sm-8 left ~280px for the copy. */

/* CTA row wraps whenever the text column is under ~560px. */
@media (max-width: 1199.98px) {
  .main-slider .top-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
}

/* Short viewports (e.g. 1024x600): .main-slider is a fixed 100vh box with
   the slide absolutely positioned inside it and its content centred. The
   header is in normal flow above it, so the box always runs one header
   height past the fold, and once the copy plus the wrapped CTA row is as
   tall as the screen the "Call Us" line is pushed under the fold and hard
   against the slide's bottom edge. Below 1200 the slide is put back into
   normal flow so the hero grows with its content: 100vh is a floor, not a
   ceiling. The "Follow us" rail becomes absolute so it stays out of flow
   at the same 31% offset it had. Desktop (>=1200) is untouched. */
@media (max-width: 1199.98px) {
  .main-slider {
    height: auto !important;
  }
  .homeSlider.swiper-container {
    position: relative;
    height: auto;
  }
  .homeSlider .slide-inner {
    position: relative;
    height: auto;
    min-height: 100vh;
    padding: 56px 0 64px;
  }
  .main-slider .header_links {
    position: absolute;
    top: 31%;
    left: 1%;
  }
}

/* 992-1199: the text column is 398px wide, where 21px lead copy runs ~32
   characters a line. 18px reads better there and takes ~60px less height. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-slider p {
    font-size: 18px;
  }
}

/* The collage only ever makes sense beside the text. Once the columns stack
   it has no position that fits the fixed-height slide, so it goes. */
@media (max-width: 991.98px) {
  .main-slider .right-content {
    display: none;
  }
}

/* 992-1199: lay the collage out at its >=1200 width (540px) and zoom that
   to the 450px column, so it is the desktop composition, just smaller.
   Guarded so a browser without `zoom` keeps today's layout rather than
   overflowing the column by 90px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  @supports (zoom: 1) {
    .main-slider .right-content {
      width: 540px;
      zoom: 0.8333;
    }
  }
}

/* With the collage gone there is nothing beside the copy: give it the row. */
@media (max-width: 767.98px) {
  .main-slider .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* section-2 collage: absolutely positioned at intrinsic size (img-1 is 654px)
   and opacity:0 until GSAP animates it in. Invisible, but it still extended
   the document's scrollWidth by 346px at 375. */
@media (max-width: 991.98px) {
  .images-content {
    display: none;
  }
  .section-2 .content p {
    width: 100%;
  }
}

/* ==========================================================================
   TASK 12 — Carousels become stacked/grid layouts on phones (2026-09-04)
   Swiper 8.3.2 is disabled below each breakpoint via `enabled:false` +
   `breakpoints` in js/custom.min.js (and js/reviews-loader.js for the
   testimonial re-init once real review data lands). Disabling Swiper stops
   its touch/click handling, but init() still runs loopCreate() and an
   initial slideTo() regardless of `enabled`, so the wrapper still receives
   an inline transform and loop-cloned `.swiper-slide-duplicate` nodes —
   both are neutralised below so nothing repeats or gets stuck mid-slide.
   ========================================================================== */

/* .designSlid — index "Our Services" detail slider, .section-3, 9 slides.
   Un-flex the wrapper into a stacked list; each slide already stacks its own
   two-column .row internally (Bootstrap col-md-6 goes full-width below 768). */
@media (max-width: 767.98px) {
  .section-3 .designSlid .swiper-wrapper {
    display: block;
    transform: none !important;
  }
  .section-3 .designSlid .swiper-slide {
    width: 100% !important;
    margin-bottom: 2rem;
  }
  .section-3 .designSlid .swiper-slide:last-child {
    margin-bottom: 0;
  }
  .section-3 .designSlid .swiper-slide-duplicate {
    display: none !important;
  }
  .section-3 .designSlid .swiper-pagination {
    display: none !important;
  }
  /* custom.min.css hides every slide's .content/.web-post at opacity:0 and
     only reveals them via a `.swiper-slide-active .content` entrance
     animation — with Swiper disabled only one slide ever gets that class, so
     without this every other slide would stack in fully invisible. */
  .section-3 .designSlid .content,
  .section-3 .designSlid .web-post {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Stacked, these inherited their desktop geometry and read badly: .content
     carries `padding-left: 10rem` (120px at the phone root) with no matching
     right padding, and .web-post a 4rem right margin — so every block sat
     shoved right in a narrow column. Centre them and give the list real gaps. */
  .section-3 .designSlid .swiper-slide {
    margin: 0 0 3.25rem !important;
    padding: 0 1.25rem;
  }
  .section-3 .designSlid .content {
    padding: 0;
    text-align: center;
    align-items: center;
    max-width: 30rem;
    margin: 0 auto 1.5rem;
    height: auto;
  }
  .section-3 .designSlid .content p {
    margin-left: auto;
    margin-right: auto;
  }
  .section-3 .designSlid .content .themeBtn {
    margin: 0.25rem auto 0;
  }
  .section-3 .designSlid .web-post {
    margin: 0 auto !important;
    max-width: 100%;
  }
  .section-3 .designSlid .web-post img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }

  /* .section-3::before is a tinted panel sitting behind the left column on
     desktop. At 70% width it cut an arbitrary vertical seam down a centred
     mobile layout — full width turns it back into a plain section ground. */
  .section-3::before {
    width: 100%;
    right: auto;
  }
}

/* .webSlider — services.php "Website Design & Development" showcase,
   .section-12, 5 slides. css/services.css loads AFTER this file and fixes
   each slide at width:560px (the main cause of services.php's overflow)
   plus scale/opacity on inactive slides — body.page-services raises
   specificity so these rules win there regardless of load order. */
@media (max-width: 991.98px) {
  body.page-services .section-12 .webSlider .swiper-wrapper {
    display: block;
    transform: none !important;
  }
  body.page-services .section-12 .webSlider .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.75rem;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  body.page-services .section-12 .webSlider .swiper-slide:last-child {
    margin-bottom: 0;
  }
  body.page-services .section-12 .webSlider .swiper-slide-duplicate {
    display: none !important;
  }
  body.page-services .section-12 .webSlider .swiper-pagination,
  body.page-services .section-12 .ws-arrow {
    display: none !important;
  }
}

/* Between 768-991.98 the base image height (360px, services.css) is tuned for
   the desktop carousel's tall focal slide — trim it for the stacked list.
   Left untouched below 768 so services.css's own 225px rule keeps winning. */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.page-services .section-12 .webSlider .swiper-slide img {
    height: 260px;
  }
}

/* .servicesslider — index "Our Services" icon tiles. NOT Swiper: a CSS
   marquee (custom.min.css animates .swiper-wrapper with translate3d(0/-50%)).
   services-loader.js duplicates the tile set (servicesHtml + servicesHtml) so
   the marquee loops seamlessly, tagging the second copy data-marquee-dup —
   hide that copy and lay the rest out as a 2-column grid. */
@media (max-width: 767.98px) {
  /* custom.min.css gives this container 7rem (84px at the mobile root) of
     left padding so the marquee's first tile peeks in from off-screen — a
     desktop swipe hint that just crowds a static grid onto the right two
     thirds of the viewport. */
  .services-sec .container-fluid {
    padding-left: 0 !important;
  }
  .services-sec .servicesslider .swiper-wrapper {
    animation: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100% !important;
  }
  .services-sec .servicesslider .swiper-slide {
    width: 100% !important;
    /* Grid items default to min-width:auto (their max-content size). The
       tile's heading text doesn't wrap at that width, so without this the
       2nd column was overflowing its 1fr track instead of sharing it evenly. */
    min-width: 0;
    flex: none;
    margin-top: 0 !important;
    padding: 0.5rem 0 0;
  }
  .services-sec .servicesslider .swiper-slide[data-marquee-dup] {
    display: none !important;
  }

  /* The tiles rendered a 150x150 icon inside a 167px card — the artwork
     swallowed the tile, squeezed the label into two cramped lines at the
     bottom, and ran the section to 1631px of scrolling. Scaled to a compact
     card: a small icon chip over a centred label, in the same cyan-on-indigo
     language as the drawer, footer and modal chips. */
  .services-sec .servicesslider .services-wrapp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    height: 100%;
    padding: 1.1rem 0.75rem;
    border-radius: 16px;
    text-align: center;
  }

  .services-sec .servicesslider .services-img {
    width: 46px;
    height: 46px;
    min-height: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(33, 199, 247, 0.12);
    border: 1px solid rgba(33, 199, 247, 0.3);
  }

  .services-sec .servicesslider .services-img img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    object-fit: contain;
  }

  /* The desktop card reveals a 250x220 plate behind the icon on hover
     (.services-img::before, custom.min.css ~1234). The tile above is 46px on
     phones but that plate was never resized with it, so an invisible
     (opacity:0) box overhung every tile by 156px. Nothing showed — it is
     transparent — but it still counted as overflow, which is what put a
     scrollbar inside this section. There is no hover on a phone, so it goes. */
  .services-sec .servicesslider .services-img::before {
    display: none;
  }

  .services-sec .servicesslider .services-content {
    padding: 0;
    margin: 0;
  }

  .services-sec .servicesslider h3 {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .services-sec .servicesslider .swiper-slide {
    padding: 0;
  }

  /* Nine services in two columns leaves an orphan on the last row. Let the
     final visible tile span both so the grid closes square. :last-of-type
     would catch the hidden marquee duplicate, so it is keyed to the last tile
     that is not part of that duplicated set. */
  .services-sec .servicesslider .swiper-slide:not([data-marquee-dup]):nth-child(9) {
    grid-column: span 2;
  }
  .services-sec .servicesslider .swiper-slide:nth-child(9) .services-wrapp {
    flex-direction: row;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
  }
}

/* .testimonial-slide — reviews carousel, initialised in js/reviews-loader.js.
   Not wired into any page in this snapshot (no page includes reviews-loader.js
   or ships .testimonial-slide markup yet), styled here for parity so the
   carousel is already correct on phones whenever the reviews section ships. */
@media (max-width: 767.98px) {
  .testimonial-slide .swiper-wrapper {
    display: block;
    transform: none !important;
  }
  .testimonial-slide .swiper-slide {
    width: 100% !important;
    margin-bottom: 2rem;
  }
  .testimonial-slide .swiper-slide:last-child {
    margin-bottom: 0;
  }
  .testimonial-slide .swiper-slide-duplicate {
    display: none !important;
  }
  .testimonial-slide .swiper-pagination {
    display: none !important;
  }
}

/* ==========================================================================
   Found while verifying the .webSlider fix above, not one of the 4 listed
   carousels — but it turned out to be services.php's REAL dominant overflow
   source, so it's fixed here too (same technique as the section-2 GSAP
   collage above: force the resting state instead of the pre-animation one).

   .section-7's four images use AOS `zoom-out-left`/`zoom-out-right`
   (css/all.min.css: opacity:0 + translate3d(±100px,0,0) scale(1.2) until
   `.aos-animate` is added on scroll-into-view). docs/responsive-audit.html
   loads each page in a hidden, never-scrolled iframe, so these below-the-
   fold images never get `.aos-animate` and stay translated 100px off-canvas
   — which alone reproduced the exact 114/120/123/94 baseline overflow for
   services.php at 320/375/414/768, independent of .webSlider. Confirmed by
   temporarily reverting every other Task 12 change and re-running the audit:
   identical numbers. Scoped to ≤991.98 so the desktop entrance animation
   (and the unrelated 98/10 overflow at 1024/1440 from .webSlider's own
   off-canvas loop clones under services.css's `overflow:visible` — a
   pre-existing desktop-carousel choice outside this task's ≤991.98 scope)
   are both left exactly as they were. */
@media (max-width: 991.98px) {
  body.page-services .section-7 [data-aos^="zoom-out"] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   SHARED OVERFLOW CAUSES — the same numbers appeared on every page, which is
   what gives them away as shared rather than per-page bugs.
   ========================================================================== */

/* 15px at 320 on EVERY page. `.services-sec .container-fluid` sets
   `padding-left: 7rem !important` with no matching padding-right, so
   Bootstrap's `.row { margin: 0 -15px }` has nothing to sit inside on the
   right and bleeds 15px past the viewport. On mobile the 7rem indent is not
   wanted anyway — the marquee should run edge to edge. */
/* .heading-sec carries `padding-left: 11rem` for the desktop layout, where the
   marquee starts indented. On a phone that is 132px of the 390 available, and
   it left "Our Services" sitting 19px right of the grid it heads. The row is
   `justify-content: space-between` for the heading + arrow pair, and the arrow
   is display:none here, so centring is what that leaves. */
@media (max-width: 991.98px) {
  .services-sec .heading-sec {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  .services-sec .container-fluid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    /* `clip`, not `hidden` — same pairing trap as .services-sec below. As
       `hidden` this box computed overflow-y to auto and became the inner
       scrollbar in Our Services: AOS holds .row at translateY(100px) until it
       animates in, and those 100px were scrollable rather than just clipped. */
    overflow-x: hidden;
    overflow-x: clip;
  }
}

/* index.php 23-43px: a decorative pseudo-element deliberately overhanging the
   right edge. Harmless where the section clips, but .services-sec does not.

   `clip` rather than `hidden`, because of the pairing rule in the overflow
   spec: `overflow-x: hidden` with `overflow-y: visible` forces the y axis to
   compute to AUTO, and this section then became a nested vertical scroll
   container — an inner scrollbar inside Our Services, scrolling ~133px of
   invisible decoration. `clip` clips one axis without creating a scroll
   container and without touching the other axis. `hidden` stays first as the
   fallback for Safari < 16; the rule below removes the overflow at source on
   phones, so those browsers have nothing left to scroll either way. */
.services-sec {
  overflow-x: hidden;
  overflow-x: clip;
}

/* 10px at EVERY width, every page. header .navbar is a 1360px flex container
   whose children measure 1450 — the classic flexbox trap, where a flex item
   defaults to `min-width: auto` and so refuses to shrink below its content.
   min-width: 0 lets them shrink, which fixes the cause rather than clipping
   the symptom. Clipping the header would have risked the pairing rule forcing
   overflow-y to clip too, cutting off the nav dropdown. */
header .navbar {
  max-width: 100%;
}

/* min-width:0 lets the collapse shrink, which is what cleared the navbar's
   10px overflow — but at desktop it let the nav's ml-auto push the links past
   the collapse's edge and straight over the Sign In / Sign Up buttons. Scoped
   below the drawer breakpoint, where the collapse is fixed-positioned anyway. */
@media (max-width: 1199.98px) {
  header .navbar-collapse {
    min-width: 0;
  }
}

/* min-width:0 on every flex child let the nav links shrink until they wrapped
   onto two lines. Only the collapse wrapper needs to shrink; the links
   themselves should keep their intrinsic width. */
header .navbar .nav-link {
  white-space: nowrap;
}

/* The footer's own grid overflowed at every width below desktop — 15px at 320
   and a stubborn 6px at 768, which was the last failing cell in the audit.
   Clipping is applied across the whole range; the tighter padding only where
   the viewport actually needs it. */
@media (max-width: 991.98px) {
  footer,
  footer .container {
    overflow-x: hidden;
  }
}

@media (max-width: 575.98px) {
  footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 60px at 320 on the two legal pages. legal.css loads after this file, so the
   body class is needed to out-specify it (see spec §2). */
@media (max-width: 575.98px) {
  body .legal-page-sec,
  body .legal-page-sec .container {
    overflow-x: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body .legal-page-sec * {
    max-width: 100%;
    word-break: break-word;
  }
}

/* 98px at 1024 on services: an AOS zoom-out entrance transform parks the
   figure off-canvas until it animates in, and .section-7 does not clip. */
@media (max-width: 1199.98px) {
  body.page-services .section-7 {
    overflow-x: hidden;
  }
}

/* ==========================================================================
   MOBILE: CENTRED LAYOUT
   Client direction — "the whole mobile design should be centered". At phone
   widths every section collapses to a single column, and left-aligned copy in
   a narrow column with the section's desktop indents removed reads as
   accidental rather than deliberate. Scoped to content blocks: forms, the
   footer nav and tab strips keep their own alignment.
   ========================================================================== */
@media (max-width: 767.98px) {
  .section-2 .content,
  .section-3 .content,
  .section-5 .heading-sec,
  .section-7 .content,
  .section-11 .content,
  .section-13 .content,
  .services-content,
  .heading-sec,
  .about-section .content {
    text-align: center;
    align-items: center;
  }

  .section-2 .content p,
  .section-3 .content p,
  .section-7 .content p,
  .about-section .content p {
    margin-left: auto;
    margin-right: auto;
    max-width: 32rem;
  }

  /* Buttons sit under centred copy, so centre them too rather than leaving
     them hanging at the left edge. */
  .section-2 .content .themeBtn,
  .section-3 .content .themeBtn,
  .section-7 .content .themeBtn,
  .heading-sec .themeBtn {
    margin-left: auto;
    margin-right: auto;
  }

  /* Figures centred under their copy. */
  .section-2 figure,
  .section-3 figure,
  .section-7 figure {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .section-2 figure img,
  .section-3 figure img,
  .section-7 figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Section headings and their eyebrows. */
  .heading-sec h2,
  .section-4 h2,
  .section-5 h2 {
    text-align: center;
  }
}

/* Footer, phones: the contact list, "Follow us" and the social row were still
   left-aligned against otherwise centred content. */
@media (max-width: 767.98px) {
  footer .contact-details,
  footer .footer-connect,
  footer .follow-label,
  footer .social-icon,
  footer .footer-menu ul,
  footer .copy-right {
    text-align: center;
    justify-content: center;
  }
  /* .contact-list below sets its own display; this rule only needs to strip
     the UA padding. It used to also set `display: inline-block`, which is more
     specific than `footer .contact-list` and silently beat the grid. */
  footer .contact-details ul {
    padding-left: 0;
  }
  footer .social-icon {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
  }
  footer .footer-logo {
    text-align: center;
  }
  footer .footer-logo img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* index.php, 293px at 1024 and 111px at 1440. .section-2's decorative collage
   (.images-content .brillint-img) is absolutely positioned at intrinsic size —
   img-1 alone is 654px — with negative offsets that deliberately bleed past
   the column. Task 7 hid it below 992px, but at desktop it still pushed the
   document wide. The bleed is the intended look, so clip the section rather
   than reposition the artwork. Safe here: .section-2 holds no dropdown or
   popover that needs to escape. */
.section-2 {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .section-2 {
    overflow-x: hidden;
  }
}

/* ==========================================================================
   "Let's Create Something Extraordinary!" (.section-6) — phones
   .btn-style is a row with a 36px gap, so on a 375px screen the quote button
   and the live-chat block were squeezed side by side and the chat label broke
   one word per line ("Need / Help? / Live / Chat / Now"). Stack the whole
   section and centre it.
   ========================================================================== */
@media (max-width: 767.98px) {
  .section-6 .direction-banner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* One artwork on phones instead of two.

     The band's collage is two pseudo-elements, each the width of the band and
     hanging off one side (:before left:-13%, :after right:-61%). A background
     only paints inside its own box, so on a narrow band the right artwork's
     dense middle is pushed off-stage and only its sparse edge (~16% ink) lands
     inside — the right side then reads as a blank white strip. Pulling :after
     in to -13% filled that strip but made the two boxes overlap, and wherever
     one box ended the other began, which showed as a vertical seam down the
     band.

     A single background has no join. :before is stretched across the whole
     band and scaled to 200%, so what shows is the dense middle of the collage
     rather than its faded edges, and :after is dropped. Measured at 393px the
     sharpest ink step falls from 8.8 to 2.5, and the thinnest slice rises from
     7% (original) to 63%.

     It is deliberately taller than the band and nudged up, because floatY
     drifts it 20px upward mid-animation; at exactly 100% that would expose a
     bare strip along the bottom. */
  .section-6 .direction-banner:before {
    top: -30px;
    left: 0;
    width: 100%;
    height: calc(100% + 60px);
    background-size: 200% auto;
    background-position: center;
  }

  .section-6 .direction-banner:after {
    display: none;
  }

  .section-6 h2 {
    text-align: center;
    margin-bottom: 1.75rem;
  }

  .section-6 .btn-style {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  .section-6 .btn-style .themeBtn {
    margin: 0;
  }

  /* icon and label side by side, the pair centred — not one word per line */
  .section-6 .chat-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: left;
  }

  .section-6 .chat-btn figure {
    margin: 0;
    flex: 0 0 auto;
  }

  .section-6 .chat-btn p {
    white-space: nowrap;
    margin: 0;
  }
}

/* Footer, phones — three specific problems, measured at 375px:
   1. .footer-logo img rendered 350x233, so the wordmark swallowed the footer.
   2. .footer-menu ul carries `margin: 2rem -15px 0` to cancel a Bootstrap
      column's padding; with the tighter mobile container that -15px pushed the
      row to left:-3 and 381px wide — off-centre and 6px over.
   3. Everything sat at 12px, below comfortable reading size. */
@media (max-width: 767.98px) {
  footer .footer-logo img {
    max-width: 190px;
    height: auto;
  }

  footer .footer-menu ul {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    row-gap: 0.5rem;
  }

  footer .contact-details li,
  footer .footer-menu ul li a {
    font-size: 14px;
  }

  footer .copy-right p,
  footer .footer-row p {
    font-size: 13px;
  }

  /* The rules either side of the logo are ::before/::after, not borders — a
     desktop three-column device. Stacked, they read as stray vertical lines
     floating at the screen edges. */
  footer .footer-logo::before,
  footer .footer-logo::after {
    display: none;
  }
  footer .footer-logo {
    padding: 1.5rem 0;
  }
}

/* Footer background image, phones and tablets. footer-bg.webp is set to
   `cover`, so on a tall narrow viewport it crops to a busy smear behind white
   text. #1d1e1f is the image's own average colour, so the footer keeps exactly
   the tone it already reads as — white text sits at 16.7:1 against it — while
   the noise goes away. Also saves the 0.65 MB download on the devices least
   able to afford it. */
@media (max-width: 991.98px) {
  footer {
    background-image: none;
    background-color: #1d1e1f;
  }
}

/* Footer running order on phones: logo first, then the contact details, then
   the social row. In source the contact block comes first because the desktop
   layout is three columns with the logo centred — stacked, the wordmark should
   lead. The logo is the row's second child, so `order` reorders it without
   touching the markup or the desktop grid. */
@media (max-width: 767.98px) {
  footer .col-md-12 > .row {
    display: flex;
    flex-direction: column;
  }
  footer .col-md-12 > .row > div:nth-child(2) {
    order: -1;
  }
}

/* ==========================================================================
   FOOTER CONTACT LIST
   Was three mismatched glyphs — two rasters and an SVG at different weights
   and sizes — in a centre-aligned list, so the left edge came out ragged and
   the icons read as a jumble. Now one stroke set at one size, in chips, on a
   two-column grid: the BLOCK centres, but the icon and text columns align
   with each other, which is what stops a centred list looking accidental.
   ========================================================================== */
footer .contact-details .contact-list {
  display: grid;
  /* shrink to the widest row, then centre the block — so the three rows stay
     column-aligned with each other while the group sits centred under the
     logo, rather than flush left against centred neighbours */
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

footer .contact-details .contact-list li {
  margin: 0;
  padding: 0;
}

/* `auto`, not `1fr`: a fractional column expands to the footer's full width,
   which pinned the icons to the far left and left the text floating centred in
   an enormous column. Shrink-wrapping keeps the pair together so the whole
   block can be centred as a unit. */
footer .contact-details .contact-list li,
footer .contact-details .contact-list li > a {
  display: grid;
  grid-template-columns: 40px auto;
  justify-content: start;
  align-items: center;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

footer .contact-details .contact-list li > a {
  display: contents;
}

footer .contact-details .contact-list .ci {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #21c7f7;
  background: rgba(33, 199, 247, 0.1);
  border: 1px solid rgba(33, 199, 247, 0.28);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

footer .contact-details .contact-list .ci svg {
  width: 18px;
  height: 18px;
  display: block;
}

footer .contact-details .contact-list .cv {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* Only the two that are links get a hover — the address is not clickable. */
footer .contact-details .contact-list a:hover .ci {
  background: rgba(33, 199, 247, 0.2);
  border-color: rgba(33, 199, 247, 0.6);
  color: #fff;
}

footer .contact-details .contact-list a:hover .cv {
  color: #fff;
}

footer .contact-details .contact-list a:focus-visible .ci {
  outline: 2px solid #21c7f7;
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  footer .contact-details {
    text-align: center;
  }
  footer .contact-list {
    gap: 0.7rem;
  }
}

/* ==========================================================================
   MOBILE HEADER + SIDE DRAWER
   The header stood 113px tall with a 150x101 logo — a seventh of an iPhone
   viewport spent on a wordmark. The drawer was a plain white panel whose links
   were declared `color:#fff` (invisible by intent, dark by accident), stretched
   apart, right-aligned and overflowing its own 280px width, with the page's
   hamburger showing a second X through the overlay.

   Rebuilt around the chip language already used by the modal close, the footer
   contact list and the social row, so the drawer belongs to the same system.
   ========================================================================== */
@media (max-width: 1199px) {
  /* ---- header ---- */
  header .navbar-brand img {
    max-height: 52px;
    width: auto;
  }

  /* Menu left, logo centred, auth right — the standard mobile app header.
     Explicit grid columns rather than `order`, so the row holds whichever of
     .auth-buttons / .user-info the auth state happens to show (or neither,
     before auth.js runs). The drawer is position:fixed and so sits outside
     this grid entirely. */
  /* the header carries `padding: 0 80px 0 0` for the desktop layout, which
     shifted the whole mobile grid left and pushed the logo off centre */
  header {
    padding: 0;
  }

  header .navbar {
    display: grid;
    /* 1fr auto 1fr, not 44px 1fr auto: the side columns must be EQUAL for the
       logo to land on the viewport's centre line rather than the centre of a
       lopsided middle column (it sat at 133px on a 375px screen). */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.5rem;
    /* the markup carries Bootstrap's .p-0 (padding: 0 !important), so the row
       sat flush against both screen edges */
    padding: 0.35rem 0.9rem !important;
    min-height: 0;
  }
  /* grid-row: 1 on all three. Without it, sparse auto-placement puts the brand
     (first in source, column 2) in row 1, then cannot place the toggler at
     column 1 behind the cursor — so it wrapped to row 2 and the header stood
     two rows / 114px tall. */
  header .navbar-toggler { grid-column: 1; grid-row: 1; justify-self: start; }
  header .navbar-brand   { grid-column: 2; grid-row: 1; justify-self: center; }

  /* The auth blocks live inside .navbar-collapse, because taking them out
     broke the desktop row (the collapse's ml-auto nav then overlapped them).
     The collapse is position:fixed on mobile, so a fixed child of it is
     positioned against the viewport and can sit in the header while the drawer
     itself is parked off-screen — no markup move, no duplicate IDs. */
  /* auth sits in the navbar grid's third column — no fixed positioning, so it
     scrolls away with the header instead of staying pinned to the viewport */
  header .head-btn { grid-column: 3; grid-row: 1; justify-self: end; }

  /* a Font Awesome bars glyph rather than three hand-built spans — one element,
     correct optical weight, and it inherits colour and size like any icon */
  header .navbar-toggler i {
    font-size: 17px;
    line-height: 1;
    color: #1e08c4;
  }
  /* the toggler animates into an X of its own; with the drawer open that X sat
     on the overlay next to the drawer's close button — two X's, one menu */
  header .navbar-toggler.active {
    opacity: 0;
    pointer-events: none;
  }

  /* ---- drawer ---- */
  .side-menu {
    width: min(86vw, 340px);
    left: calc(-1 * min(86vw, 340px));
    padding-top: 0;
    background:
      radial-gradient(420px 300px at 80% -10%, rgba(33, 199, 247, 0.18), transparent 70%),
      linear-gradient(160deg, #12103a 0%, #0d0b2b 60%, #0b0920 100%);
    box-shadow: 24px 0 60px -30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    /* .navbar-collapse centres its flex children; stretched, the header, nav,
       buttons and foot each span the panel instead of floating mid-width */
    align-items: stretch;
    overflow-y: auto;
    transition: left 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .side-header {
    padding: 1.4rem 1.25rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .side-logo img {
    height: auto;
    max-height: 46px;
    width: auto;
  }
  .menu-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #21c7f7;
    background: rgba(33, 199, 247, 0.1);
    border: 1px solid rgba(33, 199, 247, 0.28);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .menu-close svg { width: 16px; height: 16px; }
  .menu-close:hover {
    background: rgba(33, 199, 247, 0.22);
    color: #fff;
    transform: scale(1.06);
  }

  /* ---- nav links ---- */
  .side-menu .navbar-nav {
    padding: 0.5rem 0 0;
    /* the markup carries Bootstrap's .ml-auto (margin-left:auto !important),
       which pushes the nav right in the desktop flex row but became a 77px
       indent in the drawer's column — !important, so it needs matching */
    margin: 0 !important;
    /* belt and braces: even with the margin reset and the parent stretching,
       the list still measured 322.5 - 77.4 = 245px, i.e. the ml-auto value was
       still being reserved somewhere in the cascade. An explicit width settles it. */
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    /* the list is a column flex container inheriting `align-items: center`,
       which shrank each item to its text width and centred it — the links were
       95px boxes floating mid-panel, which is why text-align could not fix it */
    align-items: stretch;
    /* and the items were growing to fill the panel's height, leaving big dead
       gaps between links; pin them to their content */
    justify-content: flex-start;
    flex: 0 0 auto;
    /* the horizontal nav carries a large `gap` for the desktop row; as a column
       it became a 72px row-gap between links, which is where the cavernous
       spacing came from. The 1px dividers do the separating here. */
    gap: 0;
  }
  .side-menu .navbar-nav .nav-item {
    width: 100%;
    flex: 0 0 auto;
  }
  .side-menu .navbar-nav .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .side-menu .navbar-nav .nav-link {
    display: block;
    position: relative;
    padding: 1.05rem 1.25rem 1.05rem 1.6rem;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
  }
  /* a gradient marker that grows in on hover, instead of a colour swap */
  .side-menu .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #1e08c4, #21c7f7);
    transition: height 0.3s ease;
  }
  .side-menu .navbar-nav .nav-link:hover,
  .side-menu .navbar-nav .nav-item.active .nav-link {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    padding-left: 1.85rem;
  }
  .side-menu .navbar-nav .nav-link:hover::before,
  .side-menu .navbar-nav .nav-item.active .nav-link::before {
    height: 58%;
  }

  /* links arrive in sequence once the panel is open — the one piece of motion */
  .side-menu.show .navbar-nav .nav-item {
    animation: sideNavIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .side-menu.show .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.10s; }
  .side-menu.show .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.16s; }
  .side-menu.show .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.22s; }
  .side-menu.show .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.28s; }
  .side-menu.show .navbar-nav .nav-item:nth-child(5) { animation-delay: 0.34s; }
  .side-menu.show .navbar-nav .nav-item:nth-child(6) { animation-delay: 0.40s; }

  @keyframes sideNavIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- foot ---- */
  .side-foot {
    margin-top: auto;
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .side-foot a {
    display: grid;
    grid-template-columns: 34px auto;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    text-decoration: none;
  }
  .side-foot .ci {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #21c7f7;
    background: rgba(33, 199, 247, 0.1);
    border: 1px solid rgba(33, 199, 247, 0.26);
  }
  .side-foot .ci svg { width: 15px; height: 15px; }
  .side-foot a:hover { color: #fff; }

  /* ---- overlay ---- */
  .menu-overlay {
    background: rgba(8, 7, 24, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-menu.show .navbar-nav .nav-item { animation: none; }
  .side-menu { transition: none; }
}

/* .side-foot is drawer furniture. custom.min.css already hides .side-header
   above the drawer breakpoint; this one is new and needed the same treatment —
   without it the contact block rendered inside the desktop navbar collapse and
   stacked the header to 417px. Written as min-width so it cannot be undone by
   rule order further up this file. */
@media (min-width: 1200px) {
  .side-foot {
    display: none;
  }
}

/* Desktop header arithmetic: brand 522 + nav 745 + auth 212 = 1479px trying to
   fit 1360 (1440 minus the header's 80px right padding). The nav's 96px gap is
   the slack — 4 gaps x 96 = 384px of the nav's 745. A fluid gap keeps the 96px
   look on wide screens and fits at 1440 (4.2vw = 60px there, leaving the links
   clear of the Sign In / Sign Up buttons). */
@media (min-width: 1200px) {
  header .navbar-nav {
    /* custom.min.css fixes the list at width:76%. With six links (Digital
       Signage joined the nav) the links overflowed that box, and ml-auto kept
       pushing the box right, so "Contact Us" ran 87px under Sign In at 1200.
       Sized to its links instead, ml-auto only takes genuinely spare room. */
    width: auto;
    /* 22px at 1200, 30px at 1440, 45px at 1920 — tighter than 2.5vw at
       laptop widths so the first link does not start on the brand's edge */
    gap: clamp(1.25rem, 3.25vw - 17px, 96px);
    /* clearance so "Contact Us" is not flush against the Sign In button */
    margin-right: 2.5rem;
  }
}

/* At 1200 the desktop header still did not fit: the brand alone measures 522px
   because .navbar-brand carries `padding: 1rem 11.2rem 0.8rem 8.4rem` — 19.6rem,
   313px at a 16px root — to build its angled clip-path. Fluid padding keeps the
   full device on wide screens and gives the nav room at 1200-1440. */
@media (min-width: 1200px) {
  header .navbar-brand {
    padding-right: clamp(2rem, 5.5vw, 11.2rem);
    padding-left: clamp(1rem, 3.5vw, 8.4rem);
  }
}

/* Between Bootstrap's 1200px desktop breakpoint and the 1366px type step the
   copy and the collage sit closest together, so the copy is lifted above the
   collage in case a floating card ever drifts under it.

   This block used to hide the first floating card (.design-1, the website
   mockup) here with display:none, on the grounds that it landed on top of
   "Rusk Creative". That no longer happens: the card is positioned against its
   collage column (.col-lg-6), not the full hero, and measured with the card
   visible at 1200, 1236, 1280 and 1366px it overlaps the headline, paragraph
   and buttons by 0px and sits 60px+ clear of the headline. The rule was only
   removing the mockup from the most common laptop widths. */
@media (min-width: 1200px) and (max-width: 1366px) {
  .main-slider .slideOne {
    position: relative;
    z-index: 1;
  }
}

/* 1200-1235 is the tightest desktop range: Bootstrap keeps the copy at a
   570px half-column, while the normal 75px headline and full-size collage
   compete for the same visual space. Scale both components as a pair so the
   headline remains complete and the portrait stays out of its way. */
@media (min-width: 1200px) and (max-width: 1235px) {
  .main-slider .slideOne {
    /* The fixed social rail occupies the first ~75px of the hero at this
       width. Reserve that gutter so its icons cannot overlap the copy. */
    padding-left: 85px;
  }

  .main-slider h1 {
    font-size: clamp(60px, 5.2vw, 64px);
    white-space: nowrap;
    z-index: 2;
    text-shadow: 0 2px 12px rgba(9, 31, 111, 0.28);
  }

  .main-slider .right-content {
    transform: scale(0.9);
    transform-origin: center center;
  }
}

/* At 1500px the custom 1600px container becomes fluid again, returning the
   copy to the left edge where it meets the fixed social rail; the padding
   reserves that gutter.

   The first floating card (.design-1) used to be hidden here too, as crossing
   the headline. Measured with it visible at 1500, 1536, 1600 and 1920px it
   clears the headline by 75px or more with 0px overlap, so it stays on — the
   same composition the 1367-1499px range has always shown. */
@media (min-width: 1500px) {
  .main-slider .slideOne {
    position: relative;
    z-index: 1;
    padding-left: 85px;
  }
}

/* ==========================================================================
   "Our Packages" heading + category tabs (.section-5) — phones
   ul.ul-pkg is a flex row with a 48px gap. Seven category names at that gap
   wrapped into 286px of ragged rows, with the last ones running off the right
   edge. A horizontally scrollable pill row is the pattern that actually suits
   a category filter on a phone: one line, all options reachable, no wrapping.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* "View more" belongs at the END of the section, after the packages — not
     tucked against the heading. .heading-sec is a separate box from the
     loader's content wrapper, so `display: contents` dissolves it and lets its
     h2 and button be ordered independently around that wrapper. */
  .section-5 .container {
    display: flex;
    flex-direction: column;
  }
  .section-5 .heading-sec {
    display: contents;
  }
  .section-5 .heading-sec h2 {
    order: 1;
    width: 100%;
    text-align: center;
  }
  /* the tabs + package cards that packages-loader.js injects */
  .section-5 .container > div:not(.heading-sec) {
    order: 2;
  }
  .section-5 .heading-sec .top-bar {
    order: 3;
    display: flex;
    justify-content: center;
    margin-top: 2.25rem;
  }
  /* px, not rem: the root is 12px on phones, so `1rem 2.4rem` of padding came
     out at 12/29px and the button stayed small */
  .section-5 .heading-sec .top-bar .themeBtn {
    padding: 15px 34px;
    font-size: 15px;
  }

  .section-5 .ul-pkg {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* bleed to the container edges so the row reads as scrollable rather than
       as a list that happens to be cut off */
    margin: 1.25rem -15px 0;
    padding: 0 15px 0.5rem;
    /* without this, snapping pulls the active pill flush to the border box and
       eats the 15px inset (the row lands at scrollLeft: 15) */
    scroll-padding-left: 15px;
    scrollbar-width: none;
  }
  .section-5 .ul-pkg::-webkit-scrollbar {
    display: none;
  }

  /* px again — 1.75rem is only 21px against the 12px phone root */
  .section-5 .ul-pkg {
    margin-bottom: 30px;
  }

  .section-5 .ul-pkg li {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
  }

  /* px, for the third time in this block: the root is 12px on phones, so the
     `0.85rem / 0.5rem 1rem` these pills used to carry rendered at 10.2px text
     in a 26px-tall pill — under the ~44px touch target and smaller than any
     other control on the page. 15px matches the "View more" button above. */
  .section-5 .ul-pkg li a {
    display: block;
    padding: 11px 18px;
    border-radius: 30px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .section-5 .ul-pkg li a.active,
  .section-5 .ul-pkg li a:hover {
    color: #0b0920;
    background: linear-gradient(90deg, #21c7f7, #4bd8ff);
    border-color: transparent;
    font-weight: 600;
  }
}

/* ==========================================================================
   CLIENT ROUND 090110 — three fixes
   1. the hero opened with ~200px of dead space above "Welcome to"
   2. Sign In / Sign Up crowded the mobile header; the logo sat on a white slab
   3. every inner-page banner cropped its photo down to a ~29% centre sliver
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — no dead space, no cropped CTA
   .main-slider is `height: 100vh !important` and below 1200 responsive.css
   already relaxes that to `min-height: 100vh` on .slide-inner. Both measure
   the FULL viewport, but the hero starts below a header that is in normal
   flow, so the box always ran one header-height past the fold. The slide
   centres its content, so that overflow was paid for twice: ~206px of empty
   background above the copy on a 390x844 phone, and the "Call Us" line pushed
   under the fold.

   Sizing the box at `100svh - header` makes the hero exactly the space that is
   actually on screen, and the centring then splits the remainder evenly.
   --rc-header-h is published by js/custom.min.js; the 64px fallback is the
   measured height of the post-fix mobile header (52px logo + 0.7rem padding),
   so the pre-script paint already lands in the right place. svh (not vh) so a
   mobile browser's collapsing toolbar doesn't reintroduce the overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .homeSlider .slide-inner {
    min-height: calc(100vh - var(--rc-header-h, 64px));
    min-height: calc(100svh - var(--rc-header-h, 64px));
  }
}

/* Sizing the box right stops the overflow but not the complaint: below 992 the
   collage is hidden and the slide holds one 425px text column, so on a 390x844
   phone there were still ~350px of leftover room to place. Two ways to get that
   wrong, and this rule threads between them:

     - centre it in a full-height box and the copy sits behind ~175px of empty
       photo at each end, and that grows with every extra pixel of screen;
     - pin it to the top and the whole 350px collects underneath instead, which
       is the same imbalance upside down.

   So: centred, so whatever is left over splits evenly — and the box is capped
   so "evenly" cannot mean 175px an end. min() takes the fold-exact height on
   short screens and 640px on tall ones, which holds both gaps near 100px
   whatever the phone. It stays a MIN-height, so copy that needs more than the
   cap (landscape, large text) still grows the box rather than spilling out. */
@media (max-width: 991.98px) {
  .homeSlider .slide-inner {
    justify-content: center;
    /* Top and bottom used to be symmetric (44px each) so centring split any
       leftover space evenly. The bottom is now larger on purpose.

       On a tall phone the min-height below governs, the box has slack, and
       this changes nothing except shifting the centred copy up by 14px. On a
       SHORT viewport the box is sized by its content instead, and then this
       padding is the only thing holding the phone number clear of the hero's
       curved bottom edge — it was reported cut off there on a phone that none
       of the emulated profiles reproduced, so the safety margin is widened
       rather than left at the exact amount that was failing.

       env() adds the home-indicator strip on notched iPhones, where the
       browser's own chrome can sit over the last line. */
    padding: 44px 0 calc(72px + env(safe-area-inset-bottom, 0px));
    min-height: min(calc(100vh - var(--rc-header-h, 64px)), 640px);
    min-height: min(calc(100svh - var(--rc-header-h, 64px)), 640px);
  }
  /* .slideOne is `height:100%`, which resolves against an auto-height column
     anyway — pinned to auto so the cap above is the only thing setting height. */
  .main-slider .slideOne {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   2a. HEADER LOGO — the wordmark, not a white tab
   .navbar-brand paints #f7f9f8 behind the logo and clips it to an angled tab
   (custom.min.css ~278). Against the header's own #eef0f3 that reads as a
   white sticker with the logo inside it rather than a logo. The mark is
   already transparent (images/logo.png), so dropping the plate lets it sit on
   the header. Desktop keeps the angled tab — it is part of that layout.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  header .navbar-brand {
    background: none;
    clip-path: none;
    padding: 0.4rem 0;
  }
}

/* --------------------------------------------------------------------------
   2b. SIGN IN / SIGN UP — out of the header row, into the drawer
   Two pills stacked in the header's third column made it 96px tall and left
   the logo squeezed between a hamburger and a button block. They move into
   the drawer (.side-auth in include/menu.php) where there is width for them.

   `!important` is deliberate: auth.js writes `style="display:flex"` on every
   .auth-buttons / .user-info block, and an author !important is the one thing
   that outranks an inline declaration.

   The signed-in profile (.user-info) goes the same way, into .side-user. In the
   header it was an avatar that opened a popover; in the drawer there is room to
   drop the popover and just list the account and its two actions.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  header > .navbar > .head-btn.auth-buttons,
  header > .navbar > .head-btn.user-info {
    display: none !important;
  }
}

/* Above the drawer breakpoint there is no drawer, so the header row is the
   only place these can live. 1199.01 rather than 1200: the mobile header grid
   switches at exactly `max-width: 1199px`, so anything wider here would leave a
   sliver of fractional widths (1199.5 on a scaled display) showing both copies
   or neither. No !important: auth.js's inline display must still be free to
   hide this block when someone is signed in. */
@media (min-width: 1199.01px) {
  .side-auth,
  .side-user {
    display: none !important;
  }
}

.side-auth {
  /* display is owned by auth.js (none -> flex); everything else is layout. */
  flex-direction: column;
  gap: 0.65rem;
  margin: 1.75rem 0 0;
  padding: 1.5rem 1.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.side-auth .themeBtn {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 30px;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* The pair reads as primary + secondary rather than two identical pills. */
.side-auth .side-auth-alt {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.side-auth .side-auth-alt:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* The drawer profile. display is owned by auth.js (none -> flex) exactly like
   .side-auth, so only layout is set here. Built from the same chip vocabulary
   as .side-foot — 34px round icon, 0.9rem label — so the account block reads as
   part of the drawer rather than as a transplanted header widget. */
.side-user {
  flex-direction: column;
  gap: 0.25rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.side-user-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.side-user-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0b0920;
  background: linear-gradient(90deg, #21c7f7, #4bd8ff);
}

/* minmax(0,1fr) above + this: an address with no spaces would otherwise widen
   the grid track and push the panel's contents past its own edge. */
.side-user-meta {
  min-width: 0;
}

.side-user-name {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-user-email {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-user-link {
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  text-decoration: none;
}

.side-user-link .ci {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #21c7f7;
  background: rgba(33, 199, 247, 0.1);
  border: 1px solid rgba(33, 199, 247, 0.26);
}

.side-user-link .ci svg {
  width: 15px;
  height: 15px;
}

.side-user-link:hover {
  color: #fff;
}

/* Sign-out is the one destructive action in the drawer, so it is the one that
   is not brand-blue. */
.side-user-logout .ci {
  color: #ff8b8b;
  background: rgba(255, 139, 139, 0.1);
  border-color: rgba(255, 139, 139, 0.28);
}

/* --------------------------------------------------------------------------
   3. INNER BANNERS — the whole photo, not a centre crop
   .inner-banner is `background-size: cover` inside a box whose height comes
   from `padding: 17rem 0`. That padding is fixed, so as the viewport narrows
   the box keeps its height while losing width and cover scales the photo to
   match the height — on a 390px phone the 1912x640 banner rendered 1338px
   wide, i.e. 71% of it was off-canvas on either side.

   Every banner in images/ is ~3:1 (1912x640, 1912x641, 1384x463), so giving
   the box that same ratio makes `cover` frame the entire photo with nothing
   left to crop, at every width. Height now scales with the viewport instead
   of being pinned to a rem value, and the heading centres in whatever height
   that produces. Applies to index.php not at all — that page uses
   .main-slider, which is untouched by this.
   -------------------------------------------------------------------------- */
.inner-banner {
  aspect-ratio: 1912 / 640;
  /* aspect-ratio sets the height; padding on top of it would only push the
     heading out of the box. */
  padding: 0;
  display: flex;
  align-items: center;
  /* .about-banner/.porfolio-banner/.contact-banner set `background:` shorthand
     AFTER .inner-banner in custom.min.css, which resets background-size back to
     auto. Re-assert it here (this file loads last). .services-banner and
     .price-banner already carry cover !important and are unaffected. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* A 3:1 box is ~130px tall on a 390px phone, so the heading has to be sized to
   that band rather than to --fs-banner's 34px floor, which would fill it. */
@media (max-width: 767.98px) {
  .inner-banner h1,
  .inner-banner .mainHead {
    font-size: clamp(20px, 6.2vw, 34px);
    letter-spacing: 2px;
    line-height: 1.1;
    margin: 0;
  }
}

/* Very wide screens: 3:1 of 2560px is an 857px banner that pushes the page
   content off the first screen. Cap it and accept a small crop there — it is
   the one place where there is width to spare. */
@media (min-width: 1600px) {
  .inner-banner {
    max-height: 70vh;
  }
}

/* 3b. CONTACT PAGE — the circles have to move with the banner
   .contact-sec-1 is pulled up 75px so the 150px phone/email circles straddle
   the banner's bottom edge. That was half a circle against a 448px banner;
   against the 3:1 banner above (130px on a 390px phone) a 150px circle pulled
   up 75px lands on top of the heading. Scale the pair to the new edge: a 88px
   circle pulled up by half of itself keeps the straddle and clears the h1.
   (Two 150px circles side by side on a 390px screen were oversized anyway.) */
@media (max-width: 767.98px) {
  .address-tab .tel-icon {
    width: 88px;
    height: 88px;
  }
  .address-tab .tel-icon i {
    font-size: 30px;
  }
  .contact-sec-1 {
    margin-top: -44px;
  }
}

/* 3c. CONTACT BANNER — the heading needs a floor under it
   .contact-banner h1 is var(--black), chosen back when cover cropped to the
   pale left third of the photo. Now that the whole frame shows, "Us" lands on
   a dark-haired figure and drops out. Same fix .price-banner already uses (a
   gradient scrim on the heading side, custom.min.css ~4660), inverted to white
   because this heading is dark. The photo is not cropped — only lightened
   where the words sit, and it fades out well before the subject. */
.contact-banner {
  position: relative;
  isolation: isolate;
}

.contact-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(247, 249, 250, 0.94) 0%,
    rgba(247, 249, 250, 0.86) 30%,
    rgba(247, 249, 250, 0.45) 55%,
    rgba(247, 249, 250, 0) 78%
  );
}

.contact-banner .container {
  position: relative;
  z-index: 1;
}

/* 3d. PRIVACY BANNER — same problem, opposite colour
   The photo carries its own #210732 panel on the left and the white heading
   was written for it, but "Privacy Policy" is wider than that panel: with the
   whole frame now in view the last two letters sit on the bright illustration
   and vanish. Extend the panel's own colour across the heading and fade it
   into the artwork — the scrim is sampled from the image, so it reads as more
   of the same panel rather than as an overlay. */
.privacy-banner {
  position: relative;
  isolation: isolate;
}

.privacy-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(33, 7, 50, 0.96) 0%,
    rgba(33, 7, 50, 0.9) 34%,
    rgba(33, 7, 50, 0.45) 58%,
    rgba(33, 7, 50, 0) 80%
  );
}

.privacy-banner .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   .section-3 slides — the CTA belongs after the picture
   Each slide is `.row > [.col-md-6 > .content(h2, p, View More)] + [.col-md-6 >
   figure]`. Stacked on a phone that reads heading, copy, button, image — the
   button interrupts the pitch and the picture becomes a trailing orphan with
   nothing to do. Wanted: heading, copy, image, button.

   The button has to leave .content to sit after a figure in the OTHER column,
   so both wrappers are dissolved with `display: contents` and their children
   ordered directly by the row. Nothing moves in the markup, and above 768 the
   two-column layout is untouched.
   ========================================================================== */
@media (max-width: 767.98px) {
  .section-3 .designSlid .swiper-slide .row {
    flex-direction: column;
    /* .col-md-6 padding goes with the boxes below, and the row's -15px
       gutters have nothing to sit inside once it does. .swiper-slide already
       carries 15px, so the section keeps the inset it had. */
    margin-left: 0;
    margin-right: 0;
  }

  .section-3 .designSlid .swiper-slide .row > .col-md-6:first-child,
  .section-3 .designSlid .swiper-slide .content {
    display: contents;
  }

  /* Second column keeps its box (it is what `order` moves), so its Bootstrap
     padding is cleared by hand to stay flush with the now-unwrapped text. */
  .section-3 .designSlid .swiper-slide .row > .col-md-6:last-child {
    order: 3;
    padding-left: 0;
    padding-right: 0;
    margin-top: 1.25rem;
  }

  .section-3 .designSlid .swiper-slide .content h2 { order: 1; }
  .section-3 .designSlid .swiper-slide .content p  { order: 2; }

  .section-3 .designSlid .swiper-slide .content .themeBtn {
    order: 4;
    /* .content's own `margin: 0 auto 18px` died with its box; the button keeps
       its auto side margins, which is what centres it in the column flex. */
    margin: 1.5rem auto 0;
  }
}

/* ==========================================================================
   Portfolio category tabs (.section-4 .ul-tab) — phones
   `.section-4 ul` (custom.min.css ~1506) is `gap: 4rem` + `flex-wrap:
   wrap-reverse`. 48px of gap between four pills has nowhere to go on a 390px
   screen, so the row broke into three ragged centred lines — and wrap-reverse
   then printed them bottom-up, so the list read Video Animations, Mobile Apps,
   Logos/Websites. 200px of stacked tabs before a single piece of work.

   Same treatment the pricing categories already get (.section-5 .ul-pkg): one
   scroll-snapped line, bleeding to the screen edges so it reads as scrollable
   rather than cut off. Geometry and behaviour are copied from that block so
   the two filters feel like one control; the colours are NOT — .ul-tab sits on
   a light section and keeps its own grey/navy pills.
   ========================================================================== */
@media (max-width: 767.98px) {
  .section-4 .ul-tab {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* out to the container's edges, same -15px the pricing row uses */
    margin: 0 -15px 30px;
    padding: 0 15px 0.5rem;
    scroll-padding-left: 15px;
    scrollbar-width: none;
  }

  .section-4 .ul-tab::-webkit-scrollbar {
    display: none;
  }

  .section-4 .ul-tab li {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
  }

  /* px, not the 1.3rem inherited from `.section-4 ul li a` — that is 15.6px
     against the 12px phone root by luck rather than intent, and the 14px/30px
     padding built a 51px pill. Matches .ul-pkg: 15px in a 42px pill. */
  .section-4 .ul-tab li a {
    display: block;
    /* 12px, where .ul-pkg uses 11px: that pill carries a 1px border top and
       bottom and this one does not, so the extra pixel a side lands both at
       exactly 42px tall. */
    padding: 12px 18px;
    border-radius: 30px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }
}