/* ========================================================================
   GILL GREWAL CONSTRUCTION INC. — responsive.css
   Every media query on the site, and nothing else.

   RULES
     1. Each breakpoint appears exactly ONCE.
     2. All pages share that one block.
     3. Page + section comments sit INSIDE the block,
        immediately before their own rules.
     4. Rules carry the same page-class prefix style.css uses for
        them. Without it the rule loses on specificity and silently
        does nothing.

   LADDER — two breakpoints, nothing else
     1200px  tablet : the nav becomes a drawer, wide grids halve
      768px  phone  : everything is a single column

   Anything that used to need its own step — the gutter, the body
   copy size, the h2 size — is a clamp() in style.css now, so it
   scales with the viewport instead of jumping at a width.
   ======================================================================== */


/* ======================================================================
   1201-1399PX — NARROW DESKTOP
   The horizontal nav is still on here, and the logo now carries the
   letterhead's six lines. The trades strip is the widest of them (254px
   against 202px for the next), so dropping just that one line frees the
   ~30px the navbar was short of. Everything else stays, and the footer
   lockup is untouched.
   ====================================================================== */
@media (min-width:1201px) and (max-width:1399px){
  .site-header .logo__trades{ display:none; }

  /* The footer keeps all six lines, and nowrap text sets a grid track's
     minimum — five columns cannot give the brand track the ~370px the
     lockup needs at this width, so it overflows. The three-column footer
     (the same one used below 1200px) gives it room. */
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer__col--wide{ grid-column:span 2; max-width:420px; }
}


/* ======================================================================
   MAX WIDTH 1200PX — TABLET
   ====================================================================== */
@media (max-width:1200px){


  /* ========================================
     GLOBAL - HEADER
     The horizontal nav will not fit beside the
     logo and the CTA, so it becomes a drawer.
  ======================================== */
  .burger{ display:flex; }
  .navbar__actions .btn{ display:none; }

  .nav{
    position:absolute; top:100%; left:0; right:0; z-index:190;
    background:#0d0f13; padding:10px 0 26px;
    max-height:76svh; overflow-y:auto;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .5s var(--ease);
  }
  .nav-open .nav{ clip-path:inset(0 0 0 0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__item > a{
    display:flex; width:100%;
    color:#f2ede2; padding:15px var(--gutter);
    border-bottom:1px solid rgba(255,255,255,.07);
    justify-content:space-between;
  }
  .nav__item > a::after{ display:none; }
  .nav__item.is-active > a{ color:var(--gold); }
  /* the scroll cue is centred at the same height, so the rail gets smaller
     to keep clear of it on a phone */
  .hero-dots{ bottom:30px; right:20px; gap:8px; }
  .hero-dot{ width:26px; }

  /* ========================================
     GLOBAL - FOOTER
  ======================================== */
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer__col--wide{ grid-column:span 2; max-width:420px; }

  /* ========================================
     HOME PAGE - ABOUT SECTION
  ======================================== */
  .home-page .about-grid{ grid-template-columns:1fr; }
  .home-page .about-gallery{ order:1; }

  /* ========================================
     HOME PAGE - SERVICES SECTION
  ======================================== */
  .home-page .services-grid{ grid-template-columns:repeat(2,1fr); }

  /* ========================================
     HOME PAGE - PROJECTS SECTION
  ======================================== */
  .home-page .project-grid{ grid-template-columns:1fr; grid-template-rows:none; }
  .home-page .project-card{ min-height:230px; }
  .home-page .project-card:first-child{ grid-row:auto; min-height:300px; }

  /* ========================================
     HOME PAGE - TRUST SECTION
  ======================================== */
  .home-page .trust-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .home-page .trust-item:nth-child(2n){ border-right:0; }

  /* ========================================
     HOME PAGE - PROCESS SECTION
  ======================================== */
  .home-page .step-list{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .home-page .step:nth-child(2)::after{ display:none; }

  /* ========================================
     HOME PAGE - SPECIALISTS SECTION
  ======================================== */
  .home-page .specialist-row{
    grid-template-columns:repeat(3,1fr);
    border-bottom:1px solid rgba(12,13,16,.1);
  }
  .home-page .specialist{ border-top:1px solid rgba(12,13,16,.1); }

  /* ========================================
     HOME PAGE - PARTNER SECTION
  ======================================== */
  .home-page .partner-grid{ grid-template-columns:1fr; }
  .home-page .partner-list{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .home-page .partner-item:nth-child(odd){ border-left:0; }

  /* ======================================
     COMPANY PAGE
     The split hero stacks: photo on top, dark
     copy panel beneath it.
  ====================================== */
  .phero{ grid-template-columns:1fr; min-height:0; }
  .company-page .phero__panel{ padding-block:clamp(36px,7vw,56px); }
  .company-page .phero__panel::before{ display:none; }
  .company-page .phero__copy{ max-width:none; }
  .company-page .phero__media{ order:1; aspect-ratio:16/9; }
  /* the copy panel now sits above the photo, so the wash blends
     upward into it instead of down */
  .company-page .phero__wash{
    background:linear-gradient(to top, rgba(12,13,16,.35) 0%, rgba(12,13,16,0) 40%, var(--ink) 99%);
  }
  .company-page .expertise__grid{ grid-template-columns:1fr; }
  .company-page .expertise__media{ order:1; }
  .company-page .values__grid{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .company-page .value:nth-child(3){ border-left:0; padding-left:0; }
  .company-page .capability,
  .company-page .team{ grid-template-columns:1fr; }
  .company-page .capability__media,
  .company-page .team__media{ aspect-ratio:16/9; min-height:0; order:1; }
  .company-page .team__traits{ grid-template-columns:1fr; gap:20px; }
  /* the how-we-work steps: the chevron only bridges pairs now */
  .company-page .steps{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .company-page .step:nth-child(2)::after{ display:none; }

  /* ======================================
     PROJECTS PAGE
  ====================================== */
  .projects-page .pgrid{ grid-template-columns:repeat(6,1fr); }
  .projects-page .pcard--w3,
  .projects-page .pcard--w4,
  .projects-page .pcard--w5,
  .projects-page .pcard--w7{ grid-column:span 3; }
  .projects-page .pgrid.is-filtered .pcard{ grid-column:span 3; }
  .projects-page .feat__grid{ grid-template-columns:1fr 1fr; }
  .projects-page .fslides{ grid-column:1 / -1; }
  .projects-page .dsteps{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .projects-page .dstep:nth-child(odd){ border-left:0; padding-left:0; }
  .projects-page .details{ grid-template-columns:1fr; }
  .projects-page .details__media{ aspect-ratio:16/9; min-height:0; order:1; }

  /* ======================================
     SERVICES PAGE
  ====================================== */
  .services-page .allsvc__grid{ grid-template-columns:repeat(2,1fr); }
  .services-page .onec__values{ grid-template-columns:1fr; row-gap:26px; }
  .services-page .onec__values li{
    border-left:0; padding-left:0;
    padding-top:22px; border-top:1px solid rgba(255,255,255,.11);
  }
  .services-page .onec__values li:first-child{ padding-top:0; border-top:0; }
  .services-page .pline{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .services-page .pline::before{ display:none; }
  .services-page .pstep__dot{ transform:scale(1); }
  .services-page .pstep:nth-child(odd){ border-left:0; }

  /* ======================================
     CONTACT & LEGAL PAGES
  ====================================== */
  /* minmax(0,1fr), not 1fr: a plain 1fr track still takes its minimum
     from the item's min-content, which a long legal heading blows past */
  .legal-page .legal__grid{ grid-template-columns:minmax(0,1fr); }
  .legal-page .legal__toc{
    position:static; padding-bottom:26px;
    border-bottom:1px solid rgba(12,13,16,.1);
  }
  .legal-page .legal__toc ol{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 22px; }
  .contact-page .cmain__grid{ grid-template-columns:1fr; }
  .contact-page .cstrip__grid{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .contact-page .cstrip__item:nth-child(odd){ border-left:0; }
}


/* ======================================================================
   MAX WIDTH 768PX — PHONE
   ====================================================================== */
@media (max-width:768px){


  /* ========================================
     GLOBAL - HEADER
  ======================================== */
  /* the utility bar runs two rows here, so it needs the extra height */
  :root{ --nav-h:90px; --topbar-h:62px; }
  .hide-sm{ display:none !important; }
  .topbar__social{ display:none; }
  /* The number and the email will not share one line at this width, and
     .topbar clips rather than wraps — so stack them into two centred
     rows. Both are primary contact routes, neither gets dropped. The
     address still goes (.hide-sm); the footer carries it. */
  .topbar__inner{ flex-direction:column; justify-content:center; gap:3px; }
  .topbar__info{ flex-direction:column; align-items:center; gap:3px; }
  .topbar__info li,
  .topbar__info a{ font-size:13px; white-space:nowrap; }
  .topbar svg{ width:15px; height:15px; }
  .logo{ gap:10px; }
  .logo__mark{ height:70px; }
  .logo--light .logo__mark{ height:72px; }
  .logo__rule{ margin:4px 0; }
  .logo__name{ font-size:16px; }
  .logo__sub{ font-size:8.5px; letter-spacing:.18em; margin-top:4px; }
  /* A phone header cannot carry the letterhead's detail lines legibly, so
     the header keeps the wordmark and the footer carries the full set. */
  .logo__license,
  .logo__trades{ display:none; }
  .logo--light .logo__license{ display:block; font-size:9px; }
  .logo--light .logo__trades{ display:block; font-size:8.5px; white-space:normal; }

  /* ========================================
     GLOBAL - FOOTER
  ======================================== */
  .footer__grid{ grid-template-columns:1fr; }
  .footer__brand,
  .footer__col--wide{ grid-column:auto; max-width:none; }
  .footer__bar-inner{ justify-content:center; text-align:center; }

  /* ========================================
     GLOBAL - BUTTONS
     The labels are uppercase and widely tracked,
     so "Request A Consultation" cannot hold one
     line on a phone. Let it wrap instead of
     pushing the layout sideways.
  ======================================== */
  .btn{
    white-space:normal; text-align:center;
    padding:15px 22px; letter-spacing:.14em;
  }

  /* ========================================
     GLOBAL - SECTION HEAD
  ======================================== */
  .section-head{ flex-direction:column; gap:14px; }
  /* the base rule is flex:0 0 38px — in a column that basis becomes the
     HEIGHT, turning the hairline into a 38px gold block */
  .section-head .rule{ flex:none; width:100%; height:1px; transform-origin:center; }
  .kicker{ white-space:normal; text-align:center; }

  /* ========================================
     HOME PAGE - HERO SECTION
     Portrait crops the wide photo hard, so the
     scrim leans vertical to keep the canopy readable.
  ======================================== */
  .home-page .hero{ min-height:88svh; }
  .home-page .hero::before{ background-position:57% 42%; }
  .home-page .hero::after{
    background:
      radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 3px 3px,
      linear-gradient(to top,
        rgba(6,7,10,.94) 10%, rgba(6,7,10,.72) 42%,
        rgba(6,7,10,.42) 75%, rgba(6,7,10,.55) 100%);
  }
  .home-page .hero-scroll{ display:none; }   /* would collide with the stacked buttons */
  .home-page .hero-actions{ flex-direction:column; }
  .home-page .hero-actions .btn{ width:100%; justify-content:center; }

  /* ========================================
     HOME PAGE - ABOUT SECTION
  ======================================== */
  .home-page .about-stats,
  .company-page .about-stats{ flex-wrap:wrap; row-gap:22px; }
  /* the wide counter band drops to one column on a phone */
  .home-page .about-stats--wide{ grid-template-columns:1fr; row-gap:26px; }

  /* ========================================
     HOME PAGE - SERVICES SECTION
  ======================================== */
  .home-page .services-grid{ grid-template-columns:1fr; }
  .home-page .services-action .btn{ width:100%; justify-content:center; }

  /* ========================================
     HOME PAGE - PROJECTS SECTION
  ======================================== */
  .home-page .projects-action .btn{ width:100%; justify-content:center; }

  /* ========================================
     HOME PAGE - TRUST SECTION
  ======================================== */
  .home-page .trust-grid{ grid-template-columns:1fr; }
  .home-page .trust-item{ border-right:0; }

  /* ========================================
     HOME PAGE - PROCESS SECTION
  ======================================== */
  .home-page .step-list{ grid-template-columns:1fr; row-gap:38px; }
  .home-page .step::after{ display:none; }

  /* ========================================
     HOME PAGE - SPECIALISTS SECTION
  ======================================== */
  /* auto-fit rather than a fixed 2: drops to one column on a 360px
     phone by itself, so it needs no breakpoint of its own */
  .home-page .specialist-row{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

  /* ========================================
     HOME PAGE - PARTNER SECTION
  ======================================== */
  .home-page .partner-list{ grid-template-columns:1fr; row-gap:30px; }
  .home-page .partner-item{ border-left:0; padding-inline:0; }
  /* the items below are centred, so the heading follows them */
  .home-page .partner-head{ text-align:center; }
  .home-page .partner-head .rule-gold{ margin-inline:auto; transform-origin:center; }

  /* ======================================
     SHARED - FILTER TABS
     Tabs scroll sideways instead of stacking
     into rows.
  ====================================== */
  .filters{
    justify-content:flex-start; flex-wrap:nowrap;
    overflow-x:auto; gap:22px; scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{ display:none; }

  /* ======================================
     SHARED - FULL-WIDTH CTA BANDS
  ====================================== */
  .ctaband__inner{ flex-direction:column; text-align:center; }
  .services-page .sband__inner,
  .contact-page .areaband__inner,
  .company-page .serving__inner{ flex-direction:column; align-items:flex-start; }
  .ctaband .btn,
  .services-page .sband .btn,
  .contact-page .areaband .btn,
  .company-page .serving .btn{ width:100%; justify-content:center; }

  /* ======================================
     COMPANY PAGE
  ====================================== */
  .company-page .mv__grid{ grid-template-columns:1fr; }
  .company-page .values__grid{ grid-template-columns:1fr; }
  .company-page .value + .value{
    border-left:0; padding-left:0;
    border-top:1px solid rgba(12,13,16,.12); padding-top:26px;
  }
  /* the section kicker centres on a phone, so the cards follow it */
  .company-page .value{ text-align:center; padding-right:0; }
  .company-page .value h4,
  .company-page .value p{ margin-inline:auto; }
  .company-page .stack--front{
    position:static; width:100%; border:0; margin-top:14px; box-shadow:none;
  }
  .company-page .expertise__media{ padding-bottom:0; }
  .company-page .steps{ grid-template-columns:1fr; row-gap:32px; }
  .company-page .step::after{ display:none; }

  /* ======================================
     PROJECTS PAGE
  ====================================== */
  .projects-page .pgrid{ grid-template-columns:1fr; }
  .projects-page .pcard--w3,
  .projects-page .pcard--w4,
  .projects-page .pcard--w5,
  .projects-page .pcard--w7,
  .projects-page .pgrid.is-filtered .pcard{ grid-column:auto; }
  .projects-page .feat__grid{ grid-template-columns:1fr; }
  .projects-page .details__inner{ grid-template-columns:1fr; gap:24px; }
  .projects-page .details__rule{ display:none; }
  .projects-page .details__head h2{ margin-bottom:18px; }
  .projects-page .dsteps{ grid-template-columns:1fr; }
  .projects-page .dstep + .dstep{ border-left:0; padding-left:0; }

  /* ======================================
     SERVICES PAGE
  ====================================== */
  .services-page .allsvc__grid{ grid-template-columns:1fr; }
  .services-page .onec__shots{ grid-template-columns:1fr; }
  .services-page .pline{ grid-template-columns:1fr; }
  .services-page .pstep + .pstep{ border-left:0; }

  /* ======================================
     CONTACT & LEGAL PAGES
     The enquiry modal shares the form chrome, so
     these cover the popup as well.
  ====================================== */
  :is(.contact-page,.enq) .form-grid{ grid-template-columns:1fr; }
  :is(.contact-page,.enq) .cform__foot .btn{ width:100%; justify-content:center; }
  /* a grid item keeps min-width:auto once the columns collapse, so a
     long tracked-out contents entry would widen the whole page */
  .legal-page .legal__toc{ min-width:0; }
  .legal-page .legal__toc ol{ grid-template-columns:1fr; }
  .legal-page .legal__toc a{ overflow-wrap:anywhere; }
  .contact-page .cstrip__grid{ grid-template-columns:1fr; }
  .contact-page .cstrip__item{ border-left:0; }
}


/* ======================================================================
   PREFERS-REDUCED-MOTION:REDUCE
   ====================================================================== */
@media (prefers-reduced-motion:reduce){


  /* ========================================
     GLOBAL - MOTION SAFETY
  ======================================== */
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-card,.reveal-img{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .hero-title .line span{ transform:none !important; }
  .hero-rule{ transform:scaleX(1) !important; }
  .rule-gold{ transform:scaleX(1) !important; }

  /* ======================================
     COMPANY PAGE
  ====================================== */
  .company-page .phero__media img{ animation:none !important; transform:none !important; }
  .company-page .ticks li::before{ transform:rotate(-45deg) scale(1) !important; }
  .company-page .trait::before{ transform:scaleX(1) !important; }

  /* ======================================
     PROJECTS PAGE
  ====================================== */
  .projects-page .prhero__media img{
    animation:none !important; transform:none !important; opacity:1 !important;
  }
  .projects-page .prhero__title .line span{ transform:none !important; animation:none !important; }
  .projects-page .prhero__rule{ transform:scaleX(1) !important; animation:none !important; }
  .projects-page .details__rule{ transform:scaleY(1) scaleX(1) !important; }
  .projects-page .fslide{ transition:none !important; }

  /* ======================================
     SERVICES PAGE
  ====================================== */
  .services-page .sband::before{ animation:none !important; display:none !important; }
  .services-page .dash,
  .services-page .pline::before{ transform:scaleX(1) !important; }
  .services-page .pstep__dot{ transform:scale(1) !important; }

  /* ======================================
     CONTACT & LEGAL PAGES
  ====================================== */
  .legal-page .legal__toc a,
  .contact-page .cstrip__item svg{ transition:none !important; }
}

/* =========================================================
   JUSTIFICATION CUT-OFF
   Its own breakpoint, at the end of the file: 640px is where
   the justified columns drop under roughly 45 characters a
   line, and below that the word gaps read as holes. Last in
   source order so it beats the justify rules in style.css
   without needing a specificity fight.
   ========================================================= */
@media (max-width:640px){
  .home-page .about-content > p,
  .company-page .expertise__copy p:not(.stat):not(.eyebrow):not(.signoff),
  .company-page .mv__col p:not(.eyebrow),
  .company-page .team__inner > p:not(.eyebrow),
  .services-page .prhero__lead,
  .projects-page .prhero__lead,
  .projects-page .feat__copy p:not(.eyebrow),
  .contact-page .cnext li p,
  .legal__body p,
  .legal__body li{ text-align:left; hyphens:none; }
}