/*
Theme Name: P Brookes Renovations
Theme URI: https://pbrookesrenovations.com/
Author: Premium Web Agency
Author URI: https://promowebdesigns.com/
Description: Renovation and home-improvement theme for P Brookes Renovations LLC. Pixel-accurate build of the approved design, with custom post types for services, projects, testimonials, team and FAQs, a GSAP scroll-animation layer, and full Customizer control over contact details, hero, stats, process and CTA content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pbrookes
Tags: business, portfolio, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks

This file is the theme's primary stylesheet. The design system below was built 1:1 from
P_Brookes_Renovations_LLC-H1.pdf. Inner-page components live in assets/css/pages.css and
the motion layer in assets/css/animations.css, both enqueued after this file.
*/

/* ==========================================================================
   P Brookes Renovations LLC — Home 01
   Built 1:1 from the supplied design (1920px artboard / 1280px container)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  /* Colour */
  --c-bg:            #FFFDFB;
  --c-navy:          #1F3A5F;
  --c-charcoal:      #3A3F46;
  --c-ink:           #191717;
  --c-accent:        #FF9A0D;
  --c-muted:         #64676B;
  --c-light:         #D3D3D3;
  --c-border:        #EEEEEE;
  --c-field:         #EEEEEE;
  --c-placeholder:   #AAAAAA;
  --c-white:         #FFFFFF;

  /* Layout */
  --container:       1280px;
  --gutter:          40px;
  --hero-inset:      24px;

  /* Type */
  --font:            'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-h1:           64px;
  --lh-h1:           74px;
  --fs-h2:           48px;
  --lh-h2:           58px;
  --fs-h3:           26px;
  --fs-h4:           22px;
  --fs-body:         16px;
  --lh-body:         26px;
  --fs-sm:           14px;
  --fs-xs:           13px;
  --fs-btn:          15px;

  /* Section rhythm */
  --space-section:   127px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6,p,figure{margin:0;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}

:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
@media (min-width:1360px){ .container{padding:0;} }

.section{padding-top:var(--space-section);}
.about{padding-top:125px;}
.services{padding-top:125px;}
.process{padding-top:120px;}
.testimonials{padding-top:124px;}
.blog{padding-top:124px;}
.contact{padding-top:126px;}

.u-accent{color:var(--c-accent);}

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */
.eyebrow{
  font-size:var(--fs-xs);
  line-height:1;
  font-weight:500;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--c-accent);
  margin-bottom:27.7px;
}
.eyebrow--light{color:var(--c-accent);}
.eyebrow--muted{color:var(--c-light);}
.eyebrow--center{text-align:center;}

.section__title{
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  font-weight:500;
  letter-spacing:-.005em;
}
.section__title--center{text-align:center;}

.section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}
.section__head .btn{margin-top:10.3px;}

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:0 24px;
  font-size:var(--fs-btn);
  line-height:1;
  font-weight:500;
  letter-spacing:0;
  white-space:nowrap;
  border:0;
  border-radius:0;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn--accent{background:var(--c-accent);color:var(--c-ink);}
.btn--accent:hover{background:#E88A05;}
.btn--dark{background:var(--c-charcoal);color:var(--c-white);}
.btn--dark:hover{background:var(--c-ink);}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:var(--fs-btn);
  line-height:1;
  font-weight:500;
  color:var(--c-accent);
}
.link-more svg{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease;
}
.link-more:hover svg{transform:translateX(4px);}

/* Bulleted list with square accent markers */
.tick-list li{
  position:relative;
  padding-left:14px;
  font-size:var(--fs-sm);
  line-height:1;
  color:var(--c-white);
}
.tick-list li + li{margin-top:22px;}
.tick-list li::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:6px;height:6px;
  margin-top:-3px;
  background:var(--c-accent);
}
.tick-list--dark li{
  color:var(--c-muted);
  font-size:var(--fs-body);
  line-height:16px;
  padding-left:15px;
}
.tick-list--dark li + li{margin-top:18px;}
.tick-list--dark li::before{width:7px;height:7px;margin-top:-3.5px;}

/* Heading with the accent bar on the left */
.bar-title{
  position:relative;
  padding-left:19px;
  font-size:var(--fs-h3);
  line-height:1.2;
  font-weight:500;
}
.bar-title::before{
  content:"";
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:3px;height:32px;
  background:var(--c-accent);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:relative;
  z-index:30;
  background:var(--c-bg);
}
.site-header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:97px;
}
.site-header__inner > .site-logo{justify-self:start;}
.site-header__inner > .site-header__cta{justify-self:end;}
.site-logo img{height:48px;width:auto;}

.site-nav__list{display:flex;align-items:center;gap:26px;}
.site-nav__list a{
  display:block;
  font-size:var(--fs-sm);
  line-height:1;
  font-weight:400;
  color:var(--c-ink);
  transition:color .2s ease;
}
.site-nav__list a:hover,
.site-nav__list a.is-active{color:var(--c-accent);}

.site-header__cta{min-height:49px;padding:0 24px;}

.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:0 10px;}
.nav-toggle span{display:block;height:2px;background:var(--c-ink);transition:transform .25s ease,opacity .25s ease;}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{padding:0 var(--hero-inset);}

.hero__box{
  position:relative;
  display:grid;
  grid-template-columns:41.03% 1fr;
  min-height:789px;
  background:var(--c-navy);
  overflow:hidden;
}

.hero__media{position:relative;}
.hero__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

.hero__content{
  display:flex;
  flex-direction:column;
  padding:69px 99px 70px;
  color:var(--c-white);
}

.hero__content .eyebrow{margin-bottom:26px;}

.hero__title{
  max-width:800px;
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--c-white);
}

.hero__text{
  max-width:570px;
  margin-top:27px;
  color:var(--c-light);
}

.hero__actions{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:46px;
}

.rating{display:flex;align-items:center;gap:14px;}
.rating__avatars{display:flex;}
.rating__avatars img{
  width:52px;height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--c-white);
  background:var(--c-white);
}
.rating__avatars img + img{margin-left:-16px;}
.rating__text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-sm);
  line-height:1;
  color:var(--c-white);
}
.icon-star{width:15px;height:15px;fill:var(--c-accent);flex:none;}

.hero__bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-top:auto;
  padding-top:60px;
  padding-right:187px;
}
.hero__highlight .eyebrow{margin-bottom:0;}
.hero__highlight .tick-list{margin-top:33px;}

.hero__video{
  position:relative;
  flex:none;
  width:267px;
  height:187px;
  margin-bottom:-6px;
  overflow:hidden;
}
.hero__video img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.hero__video:hover img{transform:scale(1.05);}
.play-btn{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:52px;height:52px;
  border-radius:50%;
  background:var(--c-white);
  display:flex;align-items:center;justify-content:center;
}
.play-btn svg{width:22px;height:22px;fill:var(--c-accent);margin-left:3px;}

/* --------------------------------------------------------------------------
   8. About
   -------------------------------------------------------------------------- */
.about .eyebrow{margin-bottom:37.7px;}
.about__title{
  max-width:100%;
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  font-weight:500;
  letter-spacing:-.005em;
}

@media (min-width:1360px){ .about__title{width:1290px;max-width:none;} }

.about__grid{
  display:grid;
  grid-template-columns:531fr 327fr 327fr;
  gap:47px;
  margin-top:47px;
}

.about__figure{position:relative;height:400px;}
.about__figure img{width:100%;height:100%;object-fit:cover;}

.about__col{display:flex;flex-direction:column;}
.about__text{margin-top:27px;color:var(--c-muted);}
.about__btn{align-self:flex-start;margin-top:auto;}
.about__col .tick-list--dark{margin-top:33px;}

/* Stat strip */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:80px;
  border-left:1px solid var(--c-border);
}
.stats__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:19.6px;
  padding:5px 10px 5.4px;
  border-right:1px solid var(--c-border);
}
.stats__num{
  font-size:58px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.01em;
}
.stats__label{font-size:var(--fs-body);line-height:1;color:var(--c-ink);}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */
.services{padding-bottom:119px;}

.services__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  margin-top:47px;
}

.service-card{
  display:flex;
  flex-direction:column;
  min-height:341px;
  padding:40px 34px 38px;
  border:1px solid var(--c-border);
  background:var(--c-bg);
  transition:box-shadow .3s ease, transform .3s ease;
}
.service-card:hover{
  box-shadow:0 18px 40px rgba(25,23,23,.08);
  transform:translateY(-4px);
}
.service-card__head{display:flex;align-items:flex-start;gap:24px;}
.service-card__icon{flex:none;width:60px;height:60px;}
.service-card__icon img{width:100%;height:100%;}
.service-card__title{
  font-size:var(--fs-h3);
  line-height:39px;
  font-weight:500;
  margin-top:-7px;
}
.service-card__text{
  margin-top:18px;
  color:var(--c-muted);
}
.service-card .link-more{
  display:flex;
  justify-content:flex-end;
  width:100%;
  margin-top:auto;
  padding-top:73px;
  border-top:1px solid var(--c-border);
}

/* --------------------------------------------------------------------------
   10. Gallery
   -------------------------------------------------------------------------- */
.gallery{
  background:var(--c-navy);
  padding:125px 0 120px;
}
.gallery__eyebrow{text-align:center;}
.gallery__title{
  text-align:center;
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  font-weight:500;
  color:var(--c-white);
  letter-spacing:-.005em;
}

.gallery__grid{
  display:grid;
  grid-template-columns:64.84% 1fr;
  gap:24px;
  margin-top:81px;
  width:100%;
}
.gallery__left,
.gallery__right{display:flex;flex-direction:column;gap:24px;}
.gallery__pair{display:grid;grid-template-columns:1fr 1fr;gap:23px;}

.gallery__cell{position:relative;overflow:hidden;background:#15294a;}
.gallery__cell img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.gallery__cell:hover img{transform:scale(1.04);}

.gallery__cell--wide{height:734px;}
.gallery__cell--bath{height:454px;}
/* this shot is cropped low in the source design, not centred */
.gallery__cell--bath img{object-position:50% 76%;}
.gallery__pair .gallery__cell{height:454px;}
.gallery__cell--tall{height:1040px;}
.gallery__right .gallery__cell:last-child{height:626px;}

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */
.process__top{
  display:grid;
  grid-template-columns:608fr 608fr;
  gap:64px;
  align-items:stretch;
}
.process__figure{height:450px;}
.process__figure img{width:100%;height:100%;object-fit:cover;}

.process__content{display:flex;flex-direction:column;}
.process__content .eyebrow{margin-bottom:0;margin-top:5px;}
.process__body{margin-top:auto;}
.process__text{
  max-width:600px;
  margin-top:24px;
  color:var(--c-ink);
}
.process__body .btn{margin-top:33px;}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:63px;
}
.step{
  position:relative;
  min-height:275px;
  padding:31px 26px 27px;
  background:var(--c-charcoal);
  color:var(--c-white);
  display:flex;
  flex-direction:column;
}
.step__label{
  position:relative;
  align-self:flex-start;
  font-size:var(--fs-xs);
  line-height:1;
  font-weight:500;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--c-accent);
}
.step:not(:last-child) .step__label::after{
  content:"";
  position:absolute;
  top:50%;
  left:calc(100% + 19px);
  width:200px;
  height:1px;
  background:var(--c-accent);
}
.step__title{
  margin-top:auto;
  font-size:var(--fs-h4);
  line-height:1.2;
  font-weight:500;
}
.step__text{
  margin-top:12px;
  color:var(--c-light);
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.testimonials__grid{
  display:grid;
  grid-template-columns:756fr 503fr;
  gap:22px;
  margin-top:47px;
}
.testimonials__cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.testimonials__figure{position:relative;min-height:606px;}
.testimonials__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.t-card{
  display:flex;
  flex-direction:column;
  min-height:292px;
  padding:28px 26px 28px;
  border:1px solid var(--c-border);
  background:var(--c-bg);
  transition:box-shadow .3s ease;
}
.t-card:hover{box-shadow:0 18px 40px rgba(25,23,23,.08);}

.stars{display:flex;gap:3px;}
.stars svg{width:15px;height:15px;}
.stars svg.is-on{fill:var(--c-accent);stroke:none;}
.stars svg.is-off{fill:none;stroke:var(--c-accent);stroke-width:1.6;}

.t-card__quote{
  margin-top:19px;
  color:var(--c-muted);
}
.t-card__author{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:auto;
}
.t-card__author img{
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.t-card__name{
  display:block;
  font-size:var(--fs-h4);
  line-height:1.1;
  font-weight:500;
}
.t-card__role{
  display:block;
  margin-top:8px;
  font-size:var(--fs-xs);
  line-height:1;
  color:var(--c-muted);
}

/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */
.blog__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:49px;
}
.post__media{display:block;height:325px;overflow:hidden;}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.post__media:hover img{transform:scale(1.05);}
.post__date{
  display:block;
  margin-top:29px;
  font-size:var(--fs-body);
  line-height:1;
  color:var(--c-muted);
}
.post__title{
  margin-top:12px;
  font-size:var(--fs-h3);
  line-height:36px;
  font-weight:500;
}
.post__title a{transition:color .2s ease;}
.post__title a:hover{color:var(--c-accent);}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band{margin-top:121px;}
.cta{
  display:grid;
  grid-template-columns:45% 1fr;
  min-height:500px;
  background:var(--c-charcoal);
}
.cta__figure{position:relative;}
.cta__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cta__content{
  display:flex;
  flex-direction:column;
  padding:53px 48px 48px;
  color:var(--c-white);
}
.cta__content .eyebrow{margin-bottom:0;}
.cta__body{margin-top:auto;}
.cta__title{
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  font-weight:500;
  color:var(--c-white);
  letter-spacing:-.005em;
}
.cta__text{
  max-width:600px;
  margin-top:24px;
  color:var(--c-light);
}
.cta__body .btn{margin-top:33px;}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact__grid{
  display:grid;
  grid-template-columns:554fr 680fr;
  gap:47px;
  margin-top:65px;
}

.info-panel{
  background:var(--c-navy);
  color:var(--c-white);
  padding:27.5px 23px 26px 24px;
}
.info-panel__title{
  font-size:var(--fs-h4);
  line-height:1.1;
  font-weight:500;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.info-panel__grid{
  display:grid;
  grid-template-columns:244px 1fr;
  gap:43px 0;
  margin-top:37px;
}
.info-item{display:flex;align-items:flex-start;gap:15px;}
.info-item__icon{width:40px;height:40px;flex:none;}
.info-item__label{
  display:block;
  font-size:var(--fs-xs);
  line-height:1;
  font-weight:400;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--c-light);
}
.info-item__value{
  display:block;
  margin-top:11.5px;
  font-size:var(--fs-body);
  line-height:1.1;
  color:var(--c-white);
  word-break:break-word;
}

.contact__thumbs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:93px;
}
.contact__thumbs figure{height:186px;overflow:hidden;}
.contact__thumbs img{width:100%;height:100%;object-fit:cover;}

/* Form */
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px 30px;
  align-content:start;
  padding-top:5px;
}
.field{display:flex;flex-direction:column;}
.field--full{grid-column:1 / -1;}
.field label{
  font-size:var(--fs-xs);
  line-height:1;
  font-weight:400;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--c-ink);
  margin-bottom:16px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%;
  height:52px;
  padding:0 13px;
  background:var(--c-field);
  border:1px solid var(--c-field);
  font-size:var(--fs-sm);
  color:var(--c-ink);
  transition:border-color .2s ease,background-color .2s ease;
}
.field textarea{height:152px;padding:17px 13px;resize:vertical;line-height:1.6;}
.field ::placeholder{color:var(--c-placeholder);opacity:1;}
.field input:focus,
.field textarea:focus{outline:none;border-color:var(--c-accent);background:#F6F6F6;}

.form-consent{
  flex-direction:row;
  align-items:center;
  gap:18px;
  margin-top:-2px;
}
.form-consent input{width:13px;height:13px;flex:none;accent-color:var(--c-accent);}
.form-consent label{
  margin:0;
  font-size:var(--fs-sm);
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
  color:var(--c-muted);
}
.contact-form .field--full .btn{align-self:flex-start;margin-top:-2px;}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer{
  margin-top:129px;
  background:var(--c-navy);
  color:var(--c-white);
  padding:98px 0 0;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:566fr 295fr 419fr;
  gap:0;
}
.site-footer .site-logo img{height:48px;}
.site-footer__tagline{
  max-width:390px;
  margin-top:15px;
  font-size:18px;
  line-height:28px;
  color:var(--c-light);
}

.subscribe{display:flex;margin-top:32px;}
.subscribe input{
  width:283px;
  max-width:100%;
  height:52px;
  padding:0 13px;
  background:var(--c-white);
  border:1px solid var(--c-white);
  font-size:var(--fs-sm);
  color:var(--c-ink);
}
.subscribe input::placeholder{color:#C9C1C1;opacity:1;}
.subscribe input:focus{outline:none;}
.subscribe .btn{height:52px;min-height:52px;margin-left:15px;padding:0 24px;}

.site-footer__note{
  margin-top:19px;
  font-size:var(--fs-sm);
  line-height:1;
  color:var(--c-light);
}

.site-footer__col{padding-top:27px;}
.site-footer__heading{
  font-size:var(--fs-xs);
  line-height:1;
  font-weight:500;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--c-white);
  margin-bottom:29.5px;
}
.site-footer__list li{line-height:16px;}
.site-footer__list li + li{margin-top:22px;}
.site-footer__list a,
.site-footer__list span{
  font-size:var(--fs-body);
  line-height:1;
  color:var(--c-white);
  transition:color .2s ease;
}
.site-footer__list a:hover{color:var(--c-accent);}

.site-footer__bottom{
  margin-top:125px;
  padding-top:38px;
  border-top:1px solid rgba(255,255,255,.22);
}
.site-footer__bottom p{
  font-size:var(--fs-sm);
  line-height:1;
  color:var(--c-white);
  padding-left:4px;
  padding-bottom:40px;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
/* The hero is full-bleed, so it needs to adapt before the 1280px container does. */
@media (max-width:1699px){
  .hero__content{padding:60px 56px;}
  .hero__title{font-size:54px;line-height:64px;}
  .hero__bottom{padding-right:0;}
  .hero__video{margin-bottom:0;}
}
@media (max-width:1399px){
  .hero__title{font-size:46px;line-height:56px;}
  .hero__content{padding:52px 44px;}
}

@media (max-width:1359px){
  .gallery__cell--wide{height:40vw;}
  .gallery__cell--bath,
  .gallery__pair .gallery__cell{height:25vw;}
  .gallery__cell--tall{height:57vw;}
  .gallery__right .gallery__cell:last-child{height:34.3vw;}
}

@media (max-width:1199px){
  :root{--space-section:88px;--fs-h1:48px;--lh-h1:58px;--fs-h2:38px;--lh-h2:48px;}
  .site-nav__list{gap:18px;}
  .hero__box{grid-template-columns:1fr;min-height:0;}
  .hero__media{height:360px;}
  .hero__media img{position:static;height:100%;}
  .hero__content{padding:48px 40px;}
  .hero__bottom{padding-top:48px;}
  .about__grid{grid-template-columns:1fr 1fr;gap:40px;}
  .about__figure{grid-column:1 / -1;height:420px;}
  .stats{margin-top:56px;}
  .stats__num{font-size:44px;}
  .process__top{grid-template-columns:1fr;gap:40px;}
  .process__figure{height:420px;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:not(:last-child) .step__label::after{display:none;}
  .testimonials__grid{grid-template-columns:1fr;}
  .testimonials__figure{min-height:420px;}
  .contact__grid{grid-template-columns:1fr;gap:48px;}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:56px 32px;}
  .site-footer__brand{grid-column:1 / -1;}
  .site-footer__bottom{margin-top:64px;}
}

@media (max-width:899px){
  :root{--gutter:24px;}
  .site-header__cta{display:none;}
  .nav-toggle{display:flex;}
  .site-nav{
    position:absolute;
    top:97px;left:0;right:0;
    background:var(--c-bg);
    border-top:1px solid var(--c-border);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    display:none;
  }
  .site-nav.is-open{display:block;}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;}
  .site-nav__list a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--c-border);}

  .services__grid{grid-template-columns:1fr;}
  .blog__grid{grid-template-columns:1fr;gap:40px;}
  .testimonials__cards{grid-template-columns:1fr;}
  .cta{grid-template-columns:1fr;}
  .cta__figure{height:280px;}
  .cta__figure img{position:static;}
  .cta__content{padding:40px 28px;}
  .cta__body{margin-top:40px;}
  .gallery__grid{grid-template-columns:1fr;}
  .gallery__cell--wide{height:56vw;}
  .gallery__cell--bath,
  .gallery__pair .gallery__cell{height:44vw;}
  .gallery__cell--tall{height:70vw;}
  .gallery__right .gallery__cell:last-child{height:56vw;}
  .contact-form{grid-template-columns:1fr;gap:28px;}
  .info-panel__grid{grid-template-columns:1fr;gap:28px;}
}

@media (max-width:639px){
  :root{--fs-h1:36px;--lh-h1:46px;--fs-h2:30px;--lh-h2:40px;--fs-h3:22px;--space-section:64px;}
  .hero{padding:0 12px;}
  .hero__content{padding:36px 22px;}
  .hero__actions{flex-direction:column;align-items:flex-start;gap:24px;}
  .hero__bottom{flex-direction:column;align-items:flex-start;gap:36px;}
  .hero__video{width:100%;height:200px;}
  .about__grid{grid-template-columns:1fr;}
  .about__figure{height:280px;}
  .about__btn{margin-top:28px;}
  .stats{grid-template-columns:1fr 1fr;border-left:0;}
  .stats__item{border:1px solid var(--c-border);margin:-0.5px;padding:24px 10px;gap:14px;}
  .section__head{flex-direction:column;gap:24px;}
  .service-card{padding:28px 24px;}
  .service-card__head{gap:16px;}
  .service-card__title{line-height:1.25;}
  .steps{grid-template-columns:1fr;}
  .post__media{height:220px;}
  .post__title{line-height:1.3;}
  .contact__thumbs{margin-top:40px;}
  .contact__thumbs figure{height:140px;}
  .subscribe{flex-direction:column;gap:12px;}
  .subscribe input{width:100%;}
  .subscribe .btn{margin-left:0;}
  .site-footer__grid{grid-template-columns:1fr;gap:44px;}
  .site-footer{padding-top:64px;}
}