/* =========================================================
   H&H Craft
   Design sources:
   - Platinum Electricians  -> hero (fullscreen video, transparent
     header, left-set title + 3px rule), accent #ED1B2E, off-white #F4F6FA
   - Gibbs Electric Company -> palette (hsl 190.8 91% 13.1% / accent),
     jagged section dividers, marquee, parallax images, alternating rows
   ========================================================= */

:root{
  /* Gibbs site palette, converted from HSL */
  --ink:        #033540;   /* hsl(190.8, 91%, 13.1%)  */
  --ink-deep:   #02242c;
  --teal:       #0b5e75;   /* hsl(193, 82.8%, 25.1%)  */
  --slate:      #44575e;   /* hsl(196, 16%, 31.8%)    */
  --line:       #e0e1e3;   /* hsl(210, 3.3%, 88.2%)   */

  /* Platinum */
  --red:        #ed1b2e;
  --paper:      #f4f6fa;
  --grey:       #5b5c5e;

  --white:      #ffffff;

  --gutter:     clamp(20px, 5.2vw, 90px);
  --maxw:       1440px;

  --ease:       cubic-bezier(.22,.61,.36,1);

  /* signature edge: drops steeply, then climbs back (Gibbs "jagged") */
  --notch:      polygon(0 0, 100% 0, 100% 93.5%, 41% 100%, 0 96.5%);
  --notch-flip: polygon(0 0, 100% 0, 100% 96.5%, 59% 100%, 0 93.5%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

::selection{ background:var(--red); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:880px; }

/* ---------- type ---------- */
.h2,.h3,.hero__title,.stat__n,.mq__i,.logo__mark,blockquote{
  font-family:'Archivo',Impact,sans-serif;
  font-variation-settings:'wdth' 108, 'wght' 800;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.02;
  margin:0;
}
.h2{ font-size:clamp(30px,4.6vw,58px); }
.h3{ font-size:clamp(21px,2.1vw,27px); font-variation-settings:'wdth' 105,'wght' 750; }
.h2--light{ color:var(--white); }

.lede{ font-size:clamp(17px,1.35vw,19px); font-weight:300; color:var(--slate); margin:26px 0 0; }
.body{ color:var(--slate); margin:20px 0 0; max-width:60ch; }
.body--light{ color:rgba(255,255,255,.74); }

.eyebrow{
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px;
  font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey);
}
.eyebrow i{ display:block; width:34px; height:2px; background:var(--red); flex:none; }
.eyebrow--light{ color:rgba(255,255,255,.66); }

/* the Platinum rule under the hero title */
.rule{
  border:0;
  border-bottom:3px solid var(--paper);
  width:min(340px,52vw);
  margin:24px 0 0;
  transform-origin:left;
}
.rule--sm{ width:120px; margin-top:22px; }

/* ---------- buttons (Platinum CTA / Gibbs ghost) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border:2px solid transparent;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--solid{ background:var(--red); color:#fff; }
.btn--solid:hover{ background:var(--ink); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); margin-top:38px; }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--line{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn--line:hover{ border-color:#fff; background:#fff; color:var(--ink); }

.link{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:28px;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.link span{ display:block; width:38px; height:2px; background:var(--red); transition:width .4s var(--ease); }
.link:hover span{ width:64px; }

/* =========================================================
   HEADER  (Platinum: transparent over hero, solid on scroll)
   ========================================================= */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.hdr__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:26px var(--gutter);
  display:flex; align-items:center; gap:30px;
  transition:padding .45s var(--ease);
}
.hdr.is-stuck,
.hdr.is-open{ background:var(--ink); }
.hdr.is-stuck .hdr__in{ padding-block:16px; }

.logo{ display:flex; align-items:baseline; gap:9px; color:#fff; }
.logo__mark{
  font-size:23px; letter-spacing:.01em;
  font-variation-settings:'wdth' 112,'wght' 900;
}
.logo__amp{ color:var(--red); }
.logo__word{
  font-size:11.5px; font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.nav{ margin-left:auto; display:flex; gap:34px; }
.nav a{
  position:relative;
  font-size:12.5px; font-weight:400; letter-spacing:.17em; text-transform:uppercase;
  color:#fff; padding-block:6px;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red);
  transition:width .38s var(--ease);
}
.nav a:hover::after{ width:100%; }

.hdr__right{ display:flex; align-items:center; gap:22px; }
.hdr__tel{ font-size:13px; letter-spacing:.06em; color:#fff; opacity:.85; }
.hdr__tel:hover{ opacity:1; }
.hdr__cta{ padding:13px 24px; }

.burger{ display:none; width:34px; height:24px; background:none; border:0; padding:0; cursor:pointer; }
.burger span{ display:block; height:2px; background:#fff; margin:6px 0; transition:transform .35s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* =========================================================
   HERO  (Platinum)
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--ink-deep);
}
.hero__media{ position:absolute; inset:-2% 0 0; will-change:transform; }
.hero__video,.hero__media img{ width:100%; height:104%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(2,36,44,.88) 0%, rgba(2,36,44,.55) 44%, rgba(2,36,44,.18) 100%),
    linear-gradient(180deg, rgba(2,36,44,.55) 0%, rgba(2,36,44,0) 32%, rgba(2,36,44,.45) 100%);
}
.hero__box{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  padding-top:60px;
}
.hero__title{
  color:#fff;
  font-size:clamp(35px,6.1vw,78px);
  font-variation-settings:'wdth' 106,'wght' 800;
  line-height:1.03;
}
.hero__sub{
  margin:26px 0 0; max-width:44ch;
  font-weight:300; font-size:clamp(15px,1.2vw,18px);
  color:rgba(255,255,255,.78);
}
.hero__cue{
  position:absolute; z-index:2; left:var(--gutter); bottom:38px;
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.hero__cue-line{ display:block; width:56px; height:1px; background:rgba(255,255,255,.45); position:relative; overflow:hidden; }
.hero__cue-line::after{
  content:''; position:absolute; inset:0; background:var(--red);
  transform:translateX(-100%); animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* hero intro reveal */
.hero__title,.hero .rule,.hero__sub{ opacity:0; transform:translateY(26px); }
.hero.is-in .hero__title{ animation:up .95s var(--ease) .15s forwards; }
.hero.is-in .rule{ animation:up .95s var(--ease) .38s forwards, grow 1.1s var(--ease) .38s forwards; }
.hero.is-in .hero__sub{ animation:up .95s var(--ease) .5s forwards; }
@keyframes up{ to{ opacity:1; transform:none; } }
@keyframes grow{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

/* =========================================================
   MARQUEE  (Gibbs)
   ========================================================= */
.mq{
  background:var(--ink);
  overflow:hidden;
  padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mq__track{ display:flex; width:max-content; will-change:transform; }
.mq__set{ display:flex; align-items:center; gap:38px; padding-right:38px; }
.mq__i{
  font-size:clamp(30px,4.4vw,62px);
  color:#fff;
  font-variation-settings:'wdth' 104,'wght' 800;
  white-space:nowrap;
}
.mq__i--out{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.55);
}
.mq__dot{ width:11px; height:11px; background:var(--red); flex:none; border-radius:50%; }

/* =========================================================
   INTRO
   ========================================================= */
.intro{ padding:clamp(80px,11vw,160px) 0; text-align:center; }
.intro .eyebrow{ justify-content:center; }
.intro .lede,.intro .body{ margin-inline:auto; }

/* =========================================================
   JAGGED DIVIDERS (Gibbs: type "jagged", 3px accent stroke)
   ========================================================= */
.jag{
  position:absolute; left:0; right:0; z-index:3;
  height:clamp(34px,5vw,80px);
  pointer-events:none;
}
.jag--top{ top:-1px; }
.jag--bottom{ bottom:-1px; }
.jag svg{ display:block; width:100%; height:100%; }

/* výplň = barva sekce, ze které se zařezáváme */
.showcase .jag--top{ color:var(--paper); }
.showcase .jag--bottom{ color:var(--paper); }
.sum .jag--top{ color:var(--white); }
.cta .jag--top{ color:var(--paper); }

/* =========================================================
   SHOWCASE
   ========================================================= */
.showcase{
  position:relative;
  min-height:min(86vh,760px);
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--ink-deep);
  padding:clamp(110px,14vw,190px) 0;
}
.showcase__media{ position:absolute; inset:-20% 0; will-change:transform; }
.showcase__media img{ width:100%; height:100%; object-fit:cover; }
.showcase__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(3,53,64,.93) 0%, rgba(3,53,64,.72) 50%, rgba(3,53,64,.5) 100%);
}
.showcase__in{ position:relative; z-index:4; }
.showcase .body{ margin-top:26px; }

/* =========================================================
   SLUŽBY — alternating rows (Gibbs)
   ========================================================= */
.svc{ padding:clamp(84px,11vw,150px) 0; }
.svc__head{ margin-bottom:clamp(48px,6vw,88px); }
.svc__lead{ max-width:62ch; }

/* výčet u „úpravy a údržba nemovitostí" */
.svc-list{ list-style:none; margin:22px 0 0; padding:0; }
.svc-list li{
  position:relative;
  padding:9px 0 9px 26px;
  color:var(--ink);
  font-size:15.5px;
  border-bottom:1px solid var(--line);
}
.svc-list li::before{
  content:''; position:absolute; left:0; top:19px;
  width:12px; height:2px; background:var(--red);
}
.note{
  margin:22px 0 0; max-width:56ch;
  font-size:14px; font-weight:300; line-height:1.65;
  color:var(--grey);
}
.note--light{ color:rgba(255,255,255,.72); }

.row{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(34px,5vw,84px);
  align-items:center;
  padding:clamp(42px,5vw,78px) 0;
  border-top:1px solid var(--line);
}
.row--flip .row__media{ order:2; }
.row__n{
  display:block; margin-bottom:20px;
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 104,'wght' 800;
  font-size:14px; letter-spacing:.2em; color:var(--red);
}

/* photo holder — signature notch + parallax inner image */
.ph{
  position:relative; overflow:hidden;
  aspect-ratio:16/10;
  clip-path:var(--notch);
  background:var(--line);
}
.ph--tall{ aspect-ratio:4/5; clip-path:var(--notch-flip); }
.row--flip .ph{ clip-path:var(--notch-flip); }
/* obrázek je vyšší než rám -> má kam ujíždět při parallaxu
   (procentní top/height se u absolutního prvku počítá z výšky rámu) */
.ph img{
  position:absolute; left:0; top:-16%;
  width:100%; height:132%;
  object-fit:cover;
  will-change:transform;
  /* Parallax nastavuje JS přímo do style.transform. Bez přechodu obrázek
     skáče přesně se scrollem a působí trhaně — přechod ho nechá doklouzat.
     Dřív to měly jen dlaždice zakázek, proto klouzaly a řádky služeb ne. */
  transition:transform 1.1s var(--ease);
}

/* =========================================================
   O NÁS
   ========================================================= */
.duo{ background:var(--white); padding:clamp(84px,11vw,150px) 0; }
.duo__head{ max-width:760px; margin-bottom:clamp(46px,6vw,80px); }
.duo__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.prs__meta{ padding-top:30px; }

/* kontakt bez fotky — dokud nedodají portréty.
   Stejný jazyk jako .rule pod nadpisem v hero, ne "karta s pruhem". */
.prs--card{ border-top:3px solid var(--red); padding-top:26px; }
.prs--card .prs__meta{ padding-top:0; }
.prs--card .note{ margin-top:14px; }
.prs--card .prs__contact{ margin-top:26px; }
.prs__yrs{
  display:block; margin-bottom:14px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.prs__contact{ list-style:none; margin:22px 0 0; padding:0; }
.prs__contact li{ border-top:1px solid var(--line); }
.prs__contact a{
  display:block; padding:13px 0;
  font-size:16px; letter-spacing:.02em; color:var(--ink);
  transition:color .3s var(--ease);
}
.prs__contact a:hover{ color:var(--red); }

/* =========================================================
   SHRNUTÍ
   ========================================================= */
.sum{ position:relative; background:var(--ink); padding:clamp(110px,14vw,180px) 0; text-align:center; }
.sum .eyebrow{ justify-content:center; }
.sum__lead{
  margin:0;
  color:#fff;
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 104,'wght' 700;
  font-size:clamp(21px,2.7vw,36px);
  line-height:1.2;
  letter-spacing:-.01em;
}
.sum__p{
  margin:32px auto 0; max-width:62ch;
  font-weight:300;
  font-size:clamp(15px,1.25vw,17.5px);
  color:rgba(255,255,255,.7);
}

/* =========================================================
   REALIZACE
   ========================================================= */
.gal{ padding:clamp(84px,11vw,150px) 0 clamp(60px,8vw,110px); }
.gal__head{ margin-bottom:clamp(42px,5vw,74px); }
.gal__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,30px);
  align-items:start;
}
/* dokud jsou reálné zakázky jen dvě — dvousloupec, ať mřížka nezeje */

.tile{ display:block; margin:0; }
.tile--wide{ grid-column:span 2; }
.tile .ph{ aspect-ratio:4/3; }
.tile--wide .ph{ aspect-ratio:8/3; }   /* stejná výška jako 1sl. dlaždice */
.tile--tall .ph{ aspect-ratio:4/5; }   /* na výšku — fotky z telefonu */
.tile:nth-child(even) .ph{ clip-path:var(--notch-flip); }
.tile:hover .ph img{ transform:scale(1.05); }
.tile__cap{
  display:flex; align-items:baseline; gap:14px;
  margin-top:18px;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
}
.tile__cap em{ font-style:normal; color:var(--red); font-size:11px; letter-spacing:.2em; }

/* ---- dlaždice jako tlačítko (otevře překryv se zakázkou) ---- */
.gal__grid--prj{ grid-template-columns:repeat(4,1fr); }

.tile__btn{
  display:block; width:100%; padding:0; margin:0;
  border:0; background:none; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
}
.tile__btn .ph{ display:block; }
/* název na prvním řádku vedle čísla, počet fotek pod ním —
   flex s margin-left:auto se u delších názvů tísnil */
.tile__btn .tile__cap{
  display:grid; grid-template-columns:auto 1fr; gap:5px 14px; align-items:baseline;
}
.tile__btn .tile__cap em{ grid-row:1; }
.tile__n{ grid-column:2; color:var(--red); font-size:11px; letter-spacing:.16em; }
.tile__btn:focus-visible{ outline:3px solid var(--red); outline-offset:6px; }
.tile__btn:hover .tile__cap{ color:var(--ink); }

.gal__more{ margin:clamp(56px,7vw,96px) 0 clamp(26px,3vw,40px); }
.gal__sub{
  margin:0; font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 104,'wght' 780;
  font-size:clamp(20px,2.4vw,30px); letter-spacing:-.01em; text-transform:uppercase;
}

/* =========================================================
   PŘEKRYV ZAKÁZKY
   ========================================================= */
.lb{ position:fixed; inset:0; z-index:90; }
.lb[hidden]{ display:none; }
/* panel je zároveň ztmavené pozadí i scrollovací plocha —
   samostatný scrim by pod ním jen sbíral kliky, které by se k němu nedostaly */
.lb__panel{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(2,36,44,.86);
  padding:clamp(56px,8vw,96px) var(--gutter) clamp(60px,8vw,110px);
}
.lb__body{
  max-width:940px; margin-inline:auto;
  background:var(--paper);
  padding:clamp(28px,4vw,64px);
  clip-path:var(--notch);
}
.lb__eyebrow{
  margin:0 0 14px; color:var(--red);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
}
.lb__title{
  margin:0; font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 106,'wght' 850;
  font-size:clamp(26px,4vw,46px); line-height:1.05;
  letter-spacing:-.02em; text-transform:uppercase;
}
.lb__lede{
  margin:22px 0 0; max-width:62ch;
  font-size:clamp(15.5px,1.5vw,18px); font-weight:300; line-height:1.72; color:var(--slate);
}
.lb__gal{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(30px,4vw,50px);
}
.lb__gal img{
  width:100%; height:auto; display:block;
  background:var(--line);
}
.lb__gal img:only-child{ grid-column:span 2; }

.lb__close{
  position:fixed; top:22px; right:22px; z-index:2;
  width:52px; height:52px; padding:0;
  border:0; border-radius:50%; background:var(--red);
  cursor:pointer;
}
.lb__close span{
  position:absolute; left:50%; top:50%; width:20px; height:2px;
  background:#fff; transform-origin:center;
}
.lb__close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.lb__close span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }
.lb__close:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

body.is-locked{ overflow:hidden; }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position:relative; overflow:hidden;
  padding:clamp(110px,14vw,190px) 0;
  background:var(--ink-deep);
}
.cta__media{ position:absolute; inset:-20% 0; will-change:transform; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,36,44,.92), rgba(2,36,44,.66)); }
.cta__in{ position:relative; z-index:4; }
.cta .rule{ border-bottom-color:var(--red); width:120px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{ background:var(--ink); color:#fff; padding:clamp(64px,8vw,110px) 0 34px; }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; }
.ftr__note{ margin:22px 0 0; max-width:34ch; color:rgba(255,255,255,.5); font-weight:300; font-size:14.5px; }
.logo--ftr .logo__mark{ font-size:30px; }
.ftr__col h4{
  margin:0 0 20px;
  font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.ftr__col a,.ftr__col span{ display:block; padding:5px 0; font-size:14.5px; color:rgba(255,255,255,.68); }
.ftr__col a:hover{ color:#fff; }
.ftr__check{
  margin-top:14px; padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.12);
  max-width:24ch; line-height:1.5;
  color:rgba(255,255,255,.5) !important;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.25);
}
.ftr__check:hover{ color:#fff !important; text-decoration-color:var(--red); }
.ftr__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(46px,6vw,80px); padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.4);
}

/* =========================================================
   SCROLL REVEAL (Gibbs)
   ========================================================= */
.reveal{ opacity:0; transform:translateY(38px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d, 0) * .11s);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav{ gap:26px; }
  .hdr__tel{ display:none; }
}

@media (max-width:900px){
  .burger{ display:block; }
  .hdr__cta{ display:none; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw);
    background:var(--ink);
    flex-direction:column; justify-content:center; gap:6px;
    padding:0 40px;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
    margin-left:0;
  }
  .nav.is-open{ transform:none; }
  .nav a{ font-size:19px; padding-block:16px; letter-spacing:.1em; border-bottom:1px solid rgba(255,255,255,.09); }
  .hdr__right{ margin-left:auto; }

  .row,.duo__grid{ grid-template-columns:1fr; }
  .row--flip .row__media{ order:0; }
  .gal__grid{ grid-template-columns:1fr 1fr; }
  .tile--wide{ grid-column:span 2; }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  .gal__grid{ grid-template-columns:1fr; }
  .tile--wide{ grid-column:span 1; }
  .ftr__grid{ grid-template-columns:1fr; }
  .hero__box{ padding-top:40px; }
  .ph{ aspect-ratio:4/3; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.hero__title,.hero .rule,.hero__sub{ opacity:1 !important; transform:none !important; }
}