responsive.css

/* ============================================================
   RECORD MEDIA — RESPONSIVE STYLESHEET
   ============================================================ */

/* ── OFF-CANVAS NAV DRAWER: mobile + tablet (max 1024px) ─────
   Below the desktop breakpoint the inline nav becomes a left
   slide-in drawer. The backdrop element (.nav-backdrop) and the
   ARIA wiring are added by js/script.js — no per-page HTML needed.
   Desktop (>=1025px) keeps the original inline nav untouched. */
@media (max-width: 1024px) {
  /* Lift the whole bar above the backdrop so the hamburger stays
     tappable (to close) while the drawer + backdrop are open. */
  .navbar {
    z-index: 350;
  }

  /* Show the hamburger; hide the inline desktop CTA */
  .menu-toggle {
    position: relative;
    z-index: 360; /* above the drawer panel within the bar */
    display: flex;
  }

  .navbar__cta {
    display: none;
  }

  /* The links list becomes the off-canvas drawer panel */
  .navbar__links {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    width: 300px;
    max-width: 82vw;
    background: rgba(13, 13, 13, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid #222;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--nav-h) + 10px) 0 30px;
    z-index: 300;
    overflow-y: auto;
    /* Hidden off-screen to the left, slides in when .open is set */
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }

  .navbar__links.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }

  /* Touch-friendly stacked links */
  .navbar__links li {
    width: 100%;
  }

  .navbar__links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 14px 28px;
    border-bottom: 1px solid #1e1e1e;
    font-size: 15px;
    letter-spacing: 1px;
  }

  /* Disable the desktop bracket-frame hover animation inside the drawer */
  .navbar__links a::before,
  .navbar__links a::after {
    display: none;
  }

  .navbar__links a.active {
    border: none;
    border-bottom: 1px solid #1e1e1e;
    background: rgba(255, 0, 0, 0.08);
    color: var(--red);
  }

  .navbar__links a:hover,
  .navbar__links a:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: var(--red);
  }

  /* CTA surfaced inside the drawer (injected by JS as a list item) */
  .navbar__links .navbar__drawer-cta {
    display: block;
    padding: 24px 28px 0;
    border-bottom: none;
  }

  .navbar__links .navbar__drawer-cta .btn-contact {
    width: 100%;
    padding: 14px 26px;
    font-size: 15px;
  }

  /* Semi-transparent backdrop behind the drawer (injected by JS) */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 250;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease;
  }

  .nav-backdrop.open {
    opacity: 1;
    visibility: visible;
  }
}

/* ── MOBILE: max 767px ───────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --nav-h: 65px;
  }

  /* HERO */
  .hero__content {
    padding: 0 20px 60px 20px;
    max-width: 100%;
  }

  .hero__title-big {
    font-size: 36px;
    letter-spacing: 0;
  }

  .hero__title {
    font-size: 14px;
  }

  .hero__pre {
    font-size: 13px;
  }

  .scroll-indicator {
    left: 20px;
    bottom: 50px;
  }

  /* SECTIONS */
  .section-pad {
    padding: 60px 0;
  }

  /* WHO WE ARE */
  .who-section {
    padding: 60px 0;
  }

  .who-section__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  /* Image mosaic is a flex row of 3 columns — shrink its height on mobile */
  .who-section__images {
    height: 360px;
    gap: 10px;
  }

  .who-section__img--red {
    flex: 0 0 70px;
  }

  .section-title {
    font-size: 32px;
  }

  /* QUOTE */
  .quote-section {
    padding: 60px 20px;
    overflow: hidden;
  }

  .quote-section__text {
    font-size: 22px;
  }

  /* Shrink the decorative circles so they don't cause horizontal scroll */
  .quote-section__deco {
    width: 200px;
    height: 200px;
  }

  .quote-section__deco--tr {
    top: 0px;
    right: -80px;
  }

  .quote-section__deco--bl {
    bottom: 0px;
    left: -80px;
  }

  /* HOME SERVICES */
  .home-services__header {
    padding: 0 20px;
    flex-direction: column;
  }

  .service-row {
    min-height: 200px;
  }

  .service-row__content {
    padding: 0 20px;
  }

  .service-row__title {
    font-size: 26px;
  }

  /* WORKS */
  .works-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  .works-tabs {
    gap: 14px 20px;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .works-tab {
    font-size: 12px;
    padding-bottom: 8px;
  }

  /* PARTNERS — auto-scrolling logo strip (carousel) on mobile.
     JS adds .partners-grid--carousel and clones the cells. */
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    margin: 0 20px;
  }

  .partners-grid--carousel {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .partners-grid--carousel::-webkit-scrollbar {
    display: none;
  }

  /* Each logo becomes a fixed-width slide; strip the grid borders/tints */
  .partners-grid--carousel .partner-cell {
    flex: 0 0 50%;
    border: none;
    background: transparent;
    padding: 30px 20px;
  }

  .partners-grid--carousel .partner-cell img {
    width: 130px;
  }

  /* TICKER */
  .ticker-item {
    font-size: 30px;
  }

  /* CTA */
  .cta-section__content {
    padding: 40px 20px;
  }

  .cta-section__title {
    font-size: 32px;
  }

  .cta-section__sub {
    font-size: 18px;
  }

  /* SOCIAL BAR */
  .social-bar {
    gap: 22px;
    padding: 20px;
    flex-wrap: wrap;
  }

  /* FOOTER */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  .footer {
    padding: 50px 0 30px;
  }

  /* SERVICE PAGE */
  .service-section__content {
    padding: 80px 20px 80px 20px;
    max-width: 100%;
  }

  .service-section__num {
    font-size: 36px;
  }

  .service-section__title {
    font-size: 38px;
  }

  .service-nav-pill {
    left: 20px;
  }

  /* SHOWROOM — masonry collapses to a simple 2-column mosaic */
  .showroom-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 110px;
    padding: 0 10px;
  }

  /* Cap every tile to at most 2 columns (full width) on mobile */
  .showroom-item,
  .showroom-item--wide,
  .showroom-item--big,
  .showroom-item--tall,
  .showroom-item--sq {
    grid-column: span 1;
    grid-row: span 2;
  }

  .showroom-item--wide,
  .showroom-item--big {
    grid-column: span 2;
  }

  .showroom-item--big,
  .showroom-item--tall {
    grid-row: span 3;
  }

  /* TEAM */
  .team-section__header {
    padding: 36px 20px;
  }

  .team-section__heading {
    font-size: 42px;
  }

  /* Reduce side gutters so cards use more of the screen */
  .team-carousel {
    padding: 0 20px;
  }

  .team-card {
    width: 240px;
  }

  .team-card__photo {
    height: 320px;
  }

  .team-card__role {
    font-size: 16px;
  }

  .team-card__name {
    font-size: 22px;
  }

  .team-cards {
    gap: 15px;
  }

  /* CONTACT */
  .contact-section__inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
  }

  /* Home layout has 4 grid children: intro, heading, card, form.
     On mobile show the heading FIRST, then the intro paragraph
     beneath it (swap children 1 and 2; card + form follow). */
  .contact-section--home .contact-section__inner > div:nth-child(1) {
    order: 2; /* intro */
  }

  .contact-section--home .contact-section__inner > div:nth-child(2) {
    order: 1; /* heading */
  }

  .contact-section--home .contact-section__inner > div:nth-child(3) {
    order: 3; /* contact card */
  }

  .contact-section--home .contact-section__inner > div:nth-child(4) {
    order: 4; /* form */
  }

  .contact-section__right-label {
    font-size: 15px;
    text-align: left;
  }

  .contact-section__right-heading {
    font-size: 38px;
    text-align: left;
    margin-bottom: 24px;
  }

  .contact-info-card {
    padding: 36px 26px;
  }

  .contact-info-card h3 {
    font-size: 24px;
  }

  .contact-info-card > p {
    margin-bottom: 40px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-radios {
    gap: 14px 18px;
  }

  /* Touch-friendly inputs + full-width submit */
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
    padding: 12px 0;
  }

  .form-submit {
    text-align: center;
  }

  .form-submit button {
    width: 100%;
    padding: 16px 24px;
  }

  /* STATS */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }

  /* BLOGS */
  .blogs-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  /* SINGLE BLOG POST */
  .post__container,
  .comments__container {
    padding: 0 20px;
  }

  .post__title {
    font-size: 28px;
  }

  .post__lead {
    font-size: 17px;
  }

  .post__body {
    font-size: 15px;
  }

  .post__h2 {
    font-size: 23px;
  }

  .post__quote {
    font-size: 18px;
  }

  .comment--reply {
    margin-left: 24px;
  }

  .comment__avatar {
    width: 40px;
    height: 40px;
  }

  /* CAREERS */
  .careers-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  .careers-section__title h2 {
    font-size: 32px;
  }

  /* KNOWLEDGE */
  .knowledge-section__title {
    font-size: 36px;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-grid__right {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px;
  }

  .knowledge-grid__left-content {
    padding: 30px 20px;
  }

  /* KNOWLEDGE IS POWER (home) */
  .cta-section {
    min-height: 350px;
  }

  d .knowledge__banner {
    height: 160px;
  }

  .knowledge__banner-content {
    padding: 0 0 20px 20px;
  }

  .knowledge__banner-title {
    font-size: 30px;
  }

  /* Stack the two column-grids into one column on mobile */
  .knowledge__grids {
    flex-direction: column;
  }

  .knowledge__cell {
    min-height: 220px;
  }

  .knowledge__cell--tall,
  .knowledge__cell--text .knowledge__img {
    flex: none;
    height: 360px;
  }

  .knowledge__panel-content {
    padding: 28px 24px;
  }

  .knowledge__label {
    font-size: 18px;
  }

  /* SERVICES OVERVIEW */
  .services-overview__inner {
    padding: 0 20px;
  }

  /* Collapse the 1fr/2fr row into a stacked single column */
  .services-overview__row {
    grid-template-columns: 1fr;
  }

  .services-overview__row-image {
    min-height: 200px;
    order: -1; /* show the image above the text */
  }

  .services-overview__row-text {
    padding: 30px 20px;
  }

  .services-overview__row-title {
    font-size: 26px;
  }

  /* ABOUT */
  .about-who {
    padding: 60px 0;
  }

  /* HERO content */
  .page-hero__content {
    padding-left: 20px;
    padding-bottom: 80px;
  }
}

/* ── VERY SMALL MOBILE: max 480px ────────────────────────── */
@media (max-width: 480px) {
  .hero__title-big {
    font-size: 60px;
  }

  .section-title {
    font-size: 26px;
  }

  .quote-section__text {
    font-size: 18px;
  }

  .cta-section__title {
    font-size: 26px;
  }

  .service-section__title {
    font-size: 32px;
  }

  .team-section__heading {
    font-size: 34px;
  }

  .stat-item__num {
    font-size: 40px;
  }

  .showroom-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    margin: 0 auto;
  }

  .partners-grid {
    grid-template-columns: 1fr 1fr;
    margin: 0 20px;
  }

  .partner-cell {
    border-right: none !important;
  }

  .partner-cell:last-child {
    border-bottom: none;
  }

  .works-tabs {
    justify-content: center;
  }

  .footer__newsletter-form {
    flex-direction: column;
  }

  .footer__newsletter-form input {
    border-right: 1px solid #333;
    border-radius: 4px;
  }

  .footer__newsletter-form button {
    border-radius: 4px;
    padding: 10px;
  }
  .navbar__logo img {
    height: 45px;
  }
}

/* ── TABLET: 768px–1024px ────────────────────────────────────
   Desktop layout (>=1025px) is untouched. These rules only
   apply in the tablet range to relieve the fixed desktop sizes
   (1500px container / 60px gutters / 700px image cells / large
   headings) that would otherwise cramp or overflow on iPads. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tighter page gutters across all container-based sections */
  .container,
  .hero__content,
  .who-section__inner,
  .home-services__header,
  .service-row__content,
  .works-grid,
  .contact-section__inner,
  .footer__inner,
  .stats-grid,
  .blogs-grid,
  .services-overview__inner,
  .service-section__content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* HERO */
  .hero__title-big {
    font-size: 54px;
  }

  /* WHO WE ARE — keep two columns, shrink the mosaic height + gap */
  .who-section {
    padding: 80px 0;
  }

  .who-section__inner {
    gap: 40px;
  }

  .who-section__images {
    height: 460px;
    gap: 12px;
  }

  .who-section__img--red {
    flex: 0 0 90px;
  }

  /* QUOTE */
  .quote-section__text {
    font-size: 30px;
    max-width: 90%;
  }

  .quote-section__deco {
    width: 320px;
    height: 320px;
  }

  /* HOME SERVICES */
  .home-services__header {
    gap: 40px;
  }

  .home-services__header-left .section-title {
    font-size: 36px;
  }

  .service-row {
    min-height: 280px;
  }

  .service-row__title {
    font-size: 32px;
  }

  /* LATEST WORKS — 3-up is cramped at this width; go 2-up */
  .latest-works__header .section-title {
    font-size: 44px;
  }

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .works-tabs {
    gap: 30px;
    flex-wrap: wrap;
  }

  /* CTA */
  .cta-section__title {
    font-size: 44px;
  }

  /* KNOWLEDGE IS POWER (home) — banner + tall cells far shorter */
  .knowledge__banner {
    height: 280px;
  }

  .knowledge__banner-title {
    font-size: 46px;
  }

  .knowledge__cell {
    min-height: 240px;
  }

  .knowledge__cell--tall,
  .knowledge__cell--text .knowledge__img {
    flex: 0 0 460px;
    height: 460px;
  }

  .knowledge__panel-content {
    padding: 32px 36px;
  }

  /* TEAM */
  .team-section__heading {
    font-size: 60px;
  }

  .team-carousel {
    padding: 0 20px;
  }

  /* CONTACT — keep 2-col but reduce the oversized heading */
  .contact-section__right-heading {
    font-size: 56px;
  }

  .contact-info-card {
    padding: 40px 32px;
  }

  /* STATS — 4 across is tight; go 2×2 on tablet */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2n) {
    border-right: none;
  }

  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid #222;
  }

  /* SERVICES PAGE */
  .service-section__title {
    font-size: 56px;
  }

  .service-section__content {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .services-overview__row-title {
    font-size: 28px;
  }

  /* PORTFOLIO showroom — 3 columns holds up fine at this width */

  /* BLOGS — 3 columns is too tight; go 2-up on tablet */
  .blogs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CAREERS — single wide column is too sparse; 2-up */
  .careers-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 40px;
  }

  /* BLOGS featured (knowledge-grid on blogs page) */
  .knowledge-section__title {
    font-size: 46px;
  }
}