/* =========================================================
   Luma Property Cleaning — architectural editorial landing
   ========================================================= */

/* ---------------------------------------------------------
   Self-hosted variable fonts (Inter + Jost, SIL Open Font
   License 1.1 — licence text sits next to the files).
   One file per family covers every weight the site uses,
   subset to Latin + Latin Extended-A + punctuation: 57 KB
   instead of 172 KB, and two fewer origins in the render
   path. No visitor IP is handed to Google, which matters
   under GDPR for a business operating in Ireland.
   --------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('assets/fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:200 400;
  font-display:swap;
  src:url('assets/fonts/jost-var.woff2') format('woff2');
}

:root{
  /* surfaces */
  --bg:        #FBFAF8;
  --bg-warm:   #F2F0EB;
  --dark:      #222523;
  --dark-2:    #2B2E2C;

  /* ink */
  --ink:       #17191A;
  --ink-mid:   #55595A;
  --ink-soft:  #696E6F;   /* 5/255 darker than it looks like it should be, so the
                             footer text clears WCAG AA 4.5:1 on --bg-warm */
  --cream:     #F3F1EC;
  --cream-mid: rgba(243,241,236,.66);
  --cream-dim: rgba(243,241,236,.50);  /* .42 looked right but only reached 3.6:1 */

  /* accent */
  --sand:      #C9B392;
  --sand-deep: #B79E78;

  /* lines */
  --line:      rgba(23,25,26,.13);
  --line-dark: rgba(243,241,236,.17);

  /* type */
  --display: 'Jost', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  --shell: 1320px;
  --pad: 40px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
/* <picture> is only a wrapper for format/size selection — it must not affect layout,
   so every existing rule that targets `... img` keeps working unchanged */
picture{ display:contents; }
figure{ margin:0; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:300; font-family:var(--display); }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:12px 20px; font-size:13px;
}
.skip-link:focus{ left:12px; top:12px; }

/* Hidden from sight, still read by search engines and screen readers */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

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

/* ---------- shared type ---------- */
.kicker{
  display:flex; align-items:center; gap:14px;
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.kicker::before{
  content:''; width:34px; height:1px; background:currentColor; opacity:.55; flex:none;
}
.kicker-light{ color:var(--cream-mid); }

.display{
  font-size:clamp(28px, 3.5vw, 46px);
  line-height:1.16;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:200;
}
.display-light{ color:var(--cream); }

.lede{
  max-width:46ch;
  color:var(--ink-mid);
  font-size:15px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  border:1px solid transparent;
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-sand{ background:var(--sand); color:#1B1D1C; }
.btn-sand:hover{ background:var(--sand-deep); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:#33393A; transform:translateY(-2px); }
.btn-line{ border-color:rgba(23,25,26,.28); color:var(--ink); padding:12px 22px; }
.btn-line:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:26px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.header.solid{
  background:rgba(251,250,248,.94);
  backdrop-filter:blur(12px);
  padding:14px 0;
  box-shadow:0 1px 0 var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; }

/* Two nested rows on purpose. The mark has no text baseline, so if it sat in a
   baseline-aligned row it would drop below the letters; the outer row centres
   it, the inner row keeps "Luma" and "Property Cleaning" on the shared baseline
   they had before. The colour set here is what the mark's large star inherits
   through fill="currentColor" — the small star stays sand in every context. */
.wordmark{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:11px;
  line-height:1;
  color:var(--ink);
}
.wordmark-text{ display:flex; align-items:baseline; gap:9px; }
.wordmark-mark{ display:block; height:24px; width:auto; flex:none; }
.wordmark-name{
  font-family:var(--display);
  font-size:20px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}
.wordmark-sub{
  font-size:9.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft);
}

.nav{ display:flex; gap:36px; }
.nav a{
  position:relative;
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mid);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:currentColor;
  transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }

.header-side{ display:flex; align-items:center; gap:18px; }

.burger{
  display:none;
  flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px;
  background:none; border:none; cursor:pointer;
}
.burger span{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.header.open .burger span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.header.open .burger span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; }
.hero-bg{ position:absolute; inset:0; overflow:hidden; }
/* ---------------------------------------------------------------------------
   Two photo treatments run across the whole page. Both are pure CSS — they add
   no files and no bytes.

   ONE TONE. sepia() blends a fixed step toward a single warm cast. The photos
   were taken under different light, and side by side that disagreement is what
   makes a set look assembled rather than shot. It appears at the end of every
   photo filter, including the hover states — otherwise the tint would drop away
   the moment the cursor lands.

   VIGNETTE. A radial gradient darkening the edges, transparent through the
   middle so nothing important dims. Written as a pseudo-element rather than a
   box-shadow so it can never affect layout.
   --------------------------------------------------------------------------- */
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.72) contrast(1.05) saturate(.9) sepia(.17);
  transform:scale(1.03);
}
/* z-index 1: above the photo and both scrims, below .hero-grid at z-index 2, so
   the headline stays clean */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 118% 88% at 50% 44%,
    rgba(10,12,11,0) 42%, rgba(10,12,11,.44) 100%);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(85deg, rgba(18,20,19,.70) 4%, rgba(18,20,19,.32) 48%, rgba(18,20,19,.12) 78%),
    linear-gradient(0deg, rgba(18,20,19,.74) 0%, rgba(18,20,19,.34) 32%, rgba(18,20,19,0) 60%);
}

/* Soft white mist that spreads down from the top of the hero */
.hero-haze{
  position:absolute; inset:0 0 auto 0;
  height:36%;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(252,251,248,.84) 0%,
    rgba(252,251,248,.76) 16%,
    rgba(252,251,248,.58) 34%,
    rgba(252,251,248,.36) 54%,
    rgba(252,251,248,.16) 74%,
    rgba(252,251,248,.04) 90%,
    rgba(252,251,248,0) 100%);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 28%, rgba(0,0,0,.4) 62%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 28%, rgba(0,0,0,.4) 62%, transparent 100%);
}

.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-rows:1fr auto auto;
  align-content:end;
  gap:0;
  min-height:100svh;
  padding-block:118px 44px;
}
.hero-aside{
  grid-row:1;
  align-self:center;
  justify-self:end;
  max-width:16ch;
  text-align:right;
  font-family:var(--display);
  font-size:clamp(17px, 1.9vw, 25px);
  font-weight:200;
  line-height:1.3;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
}
.hero-lead{ grid-row:2; padding-block:26px 26px; }
.hero-lead .kicker{ color:rgba(255,255,255,.68); margin-bottom:20px; }
.hero-title{
  font-size:clamp(34px, 5.4vw, 76px);
  font-weight:200;
  line-height:1.06;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
}
.hero-foot{
  grid-row:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:44px; flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-foot p{
  max-width:56ch;
  color:rgba(255,255,255,.76);
  font-size:14px;
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.strip{ background:var(--bg-warm); border-bottom:1px solid var(--line); }
.strip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:56px;
}
.strip-item{ padding-inline:34px; border-left:1px solid var(--line); }
.strip-item:first-child{ padding-left:0; border-left:none; }
.strip-item:last-child{ padding-right:0; }
.strip-item h3{
  font-size:12px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  font-family:var(--body);
  margin-bottom:11px;
}
.strip-item p{ font-size:13.5px; color:var(--ink-mid); line-height:1.6; }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ padding-top:clamp(84px, 10vw, 132px); }
.services-head{ margin-bottom:clamp(48px, 6vw, 74px); }
.services-head .kicker{ margin-bottom:26px; }
.services-head .display{ margin-bottom:26px; }

.panels{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--dark);
}
.panel{
  position:relative;
  min-height:clamp(440px, 58vw, 620px);
  overflow:hidden;
  border-left:1px solid rgba(255,255,255,.16);
}
.panel:first-child{ border-left:none; }
.panel img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.5) contrast(1.1) saturate(.72) sepia(.17);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.panel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,15,14,.9) 0%, rgba(13,15,14,.34) 55%, rgba(13,15,14,.06) 100%);
}
.panel::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 115% 82% at 50% 40%,
    rgba(10,12,11,0) 44%, rgba(10,12,11,.46) 100%);
}
.panel:hover img{ transform:scale(1.06); filter:brightness(.66) contrast(1.08) saturate(.9) sepia(.17); }
.panel-text{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:0 26px 30px;
}
.panel-text h3{
  font-family:var(--body);
  font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.panel-text p{
  font-size:13px; line-height:1.64;
  color:rgba(255,255,255,.76);
  min-height:calc(1.64em * 3); /* keeps the four panel titles on one line */
}

/* =========================================================
   WHAT'S INCLUDED
   ========================================================= */
.included{ background:var(--dark); padding-block:clamp(84px, 10vw, 128px); }
.included-head{ margin-bottom:clamp(48px, 6vw, 76px); }
.included-head .kicker{ margin-bottom:26px; }

.included-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-dark);
}
.inc{
  padding:38px 36px 42px;
  border-left:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.inc:nth-child(3n+1){ border-left:none; padding-left:0; }
.inc:nth-child(3n){ padding-right:0; }
.inc-no{
  display:block;
  font-family:var(--display);
  font-size:12px; letter-spacing:.2em;
  color:var(--sand);
  margin-bottom:20px;
}
.inc h3{
  font-family:var(--body);
  font-size:12.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--cream);
  margin-bottom:13px;
}
.inc p{ font-size:13.5px; color:var(--cream-mid); line-height:1.66; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ padding-block:clamp(84px, 10vw, 128px); }
.gallery .kicker{ margin-bottom:32px; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}
.shot{ position:relative; overflow:hidden; background:var(--bg-warm); }
.shot img{
  width:100%; height:clamp(280px, 30vw, 420px); object-fit:cover;
  filter:saturate(.8) contrast(1.05) brightness(.93) sepia(.17);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 118% 88% at 50% 48%,
    rgba(10,12,11,0) 46%, rgba(10,12,11,.34) 100%);
}
.shot:hover img{ transform:scale(1.05); filter:saturate(.95) contrast(1.05) brightness(1.02) sepia(.17); }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ padding-bottom:clamp(84px, 10vw, 128px); }
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 88px);
  align-items:center;
}
.about-text .kicker{ margin-bottom:26px; }
.about-text .display{ margin-bottom:28px; }
.about-text p{ color:var(--ink-mid); margin-bottom:20px; max-width:52ch; }
.about-text .btn{ margin-top:12px; }
.about-shot{ position:relative; overflow:hidden; }
.about-shot img{
  width:100%; height:clamp(320px, 42vw, 560px); object-fit:cover;
  filter:saturate(.9) contrast(1.04) sepia(.17);
}
/* Lighter than the gallery: this photo sits next to body text on a pale
   background, and a heavy edge would read as a shadow rather than as depth. */
.about-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 118% 88% at 50% 48%,
    rgba(10,12,11,0) 46%, rgba(10,12,11,.30) 100%);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--dark); padding-block:clamp(88px, 11vw, 140px); }
.contact-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.contact .kicker{ margin-bottom:26px; }
.contact .kicker::before{ display:none; }
.contact .display{ margin-bottom:24px; }
.contact-lede{ max-width:52ch; color:var(--cream-mid); margin-bottom:48px; }

.contact-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  width:100%;
  max-width:900px;
  border:1px solid var(--line-dark);
}
.card-link{
  display:flex; flex-direction:column; gap:9px;
  padding:30px 24px;
  border-left:1px solid var(--line-dark);
  transition:background .3s var(--ease);
}
.card-link:first-child{ border-left:none; }
.card-link:hover{ background:rgba(243,241,236,.05); }
.card-label{
  font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sand);
}
.card-value{
  font-family:var(--display);
  font-size:15px; font-weight:300;
  letter-spacing:.04em;
  color:var(--cream);
  overflow-wrap:break-word;
}
/* The email address is long enough to wrap at 15px. Sized to sit on one line
   on a full-width desktop; on narrower screens the <wbr> in the markup makes
   it break before the @ instead of in the middle of the domain. */
.card-value-long{ font-size:13px; letter-spacing:.02em; }
.contact-note{
  margin-top:40px;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--bg-warm); }
.footer .wordmark-name{ color:var(--ink); }
.footer .wordmark-sub{ color:var(--ink-soft); }
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
  padding-block:44px;
}
.footer-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-nav a{
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mid);
  transition:color .25s var(--ease);
}
.footer-nav a:hover{ color:var(--ink); }
.footer-contact{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-contact a{ font-size:13.5px; color:var(--ink-mid); transition:color .25s var(--ease); }
.footer-contact a:hover{ color:var(--ink); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:20px;
  border-top:1px solid var(--line);
}
.footer-bottom p{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }

/* Legally required business details. Kept quiet by size and by staying in
   sentence case while the line above is uppercase — NOT by going paler:
   --ink-soft on --bg-warm is exactly 4.5:1, the accessibility minimum. */
.footer-legal{ padding-bottom:18px; }
.footer-legal p{ font-size:10px; letter-spacing:.06em; color:var(--ink-soft); }

/* =========================================================
   404 PAGE
   ========================================================= */
.page-notfound{ background:var(--dark); }
.notfound{ min-height:100svh; display:flex; align-items:center; background:var(--dark); }
.notfound-inner{ padding-block:80px; }
/* On the dark 404 page the mark's large star follows this colour automatically */
.notfound .wordmark{ margin-bottom:clamp(48px, 9vw, 96px); color:var(--cream); }
.notfound .wordmark-name{ color:var(--cream); }
.notfound .wordmark-sub{ color:var(--cream-dim); }
.notfound .kicker{ margin-bottom:22px; }
.notfound-lede{
  max-width:44ch;
  margin-top:26px;
  color:var(--cream-mid);
  font-size:15px;
}
.notfound-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }
.btn-ghost{ border-color:var(--line-dark); color:var(--cream); }
.btn-ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* =========================================================
   REVEAL (progressive enhancement — visible without JS)
   ========================================================= */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js [data-reveal].seen{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  :root{ --pad:32px; }
  .nav{ gap:26px; }
  .panels{ grid-template-columns:repeat(2,1fr); }
  .panel:nth-child(3){ border-left:none; }
  .panel:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.16); }
  .included-grid{ grid-template-columns:repeat(2,1fr); }
  .inc:nth-child(3n+1){ border-left:1px solid var(--line-dark); padding-left:36px; }
  .inc:nth-child(3n){ padding-right:36px; }
  .inc:nth-child(2n+1){ border-left:none; padding-left:0; }
  .inc:nth-child(2n){ padding-right:0; }
  .strip-grid{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .strip-item:nth-child(3){ border-left:none; padding-left:0; }
  .strip-item:nth-child(2n){ padding-right:0; }
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:0 0 auto 0;
    display:flex; flex-direction:column; gap:0;
    background:var(--bg);
    padding:96px 32px 36px;
    transform:translateY(-102%);
    transition:transform .45s var(--ease);
    box-shadow:0 16px 40px rgba(0,0,0,.12);
  }
  .header.open .nav{ transform:translateY(0); }
  .nav a{
    color:var(--ink);
    font-size:12px;
    padding:17px 0;
    border-bottom:1px solid var(--line);
  }
  .burger{ display:flex; position:relative; z-index:2; }
  .header-side .btn-line{ display:none; }
  .header.open{ background:var(--bg); }

  .hero-aside{ display:none; }
  .hero-haze{ height:30%; }
  .hero-grid{ padding-block:132px 40px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:26px; }
  .gallery-grid{ grid-template-columns:1fr; gap:4px; }
  .about-grid{ grid-template-columns:1fr; }
  .about-shot{ order:-1; }
  .contact-actions{ grid-template-columns:1fr; }
  .card-link{ border-left:none; border-top:1px solid var(--line-dark); }
  .card-link:first-child{ border-top:none; }
}

@media (max-width:620px){
  :root{ --pad:22px; }
  body{ font-size:14.5px; }
  .strip-grid{ grid-template-columns:1fr; row-gap:32px; padding-block:44px; }
  .strip-item{ padding-inline:0; border-left:none; }
  .panels{ grid-template-columns:1fr; }
  .panel{ min-height:400px; border-left:none; border-top:1px solid rgba(255,255,255,.16); }
  .panel:first-child{ border-top:none; }
  .included-grid{ grid-template-columns:1fr; }
  .inc, .inc:nth-child(3n+1), .inc:nth-child(3n), .inc:nth-child(2n+1), .inc:nth-child(2n){
    border-left:none; padding-inline:0;
  }
  .footer-top{ flex-direction:column; align-items:flex-start; gap:26px; }
  .footer-contact{ flex-direction:column; gap:8px; }
  .btn{ width:100%; }
  .hero-foot .btn{ width:auto; }
}