:root{
  --green:#63c34b;
  --green2:#4fb83e;
  --yellow:#f7cc47;
  --dark:#1f2a2d;
  --blue:#2c7cc7;
  --red:#d6212d;
  --orange:#ff6a1a;
  --ink:#1b1b1b;
  --muted:#6b6b6b;
  --bg:#ffffff;
}

*{ box-sizing:border-box; }
body{
  margin:0 auto;
  font-family: "Roboto", sans-serif;
  color:var(--ink);
  background:var(--bg);
  background-color:rgba(229, 214, 186, 0.75);
  max-width: 1365px;
}

.hero2-title h2{font-family: "Roboto", sans-serif;font-size:2em;font-weight:100;}

.right{text-align:right;align-items: flex-end;}

.tile--green{background-color:#56c83c;text-align:center}

.section-inner {
	position: relative;
	margin: 65px auto 0 auto;
	box-sizing: border-box;
	max-width: 1366px;
}

.banner {padding-top:62.5%; }
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 450px;
	background: url(images/01-hero-sprite.jpg) no-repeat 0 0;
	background-size:289.722222%;}

.banner2 {padding-top:109.3333%; }
.banner2-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 820px;
	background: url(images/02-hero-sprite.jpg) no-repeat 0 0;
	background-size:289.722222%;}

.moto5gplus-logo{
    background:url(images/motog5plus-logo.jpg) no-repeat 0 0;position:absolute;
    top:22.22%;left:10.25%;min-height:17%;width:26%;background-size:100%;padding-top:4em}

.hero2-title{display:block;clear:both;overflow:hidden;width:100%;text-align:center;background-color:rgba(0, 0, 0, 0.25)}

.hero2-thumb{
    background:url(images/02-thumb-01.jpg) no-repeat 0 0;width:150%;min-height:100%;}

.moto5gplus-copy{position:absolute;top:42%;left:10.25%;width:45%;display:flex;}
.moto5gplus-copy h1{font-size: clamp(12px, 6vw, 80px);line-height:1em;padding:0;margin:0;color:#FFF;font-family: "Roboto Condensed", sans-serif;}

.hero2-copy{position:absolute;top:2.5%;left:1.5%;width:54.125%;color:#FFF;background-color:rgba(0, 0, 0, .85)}
/* HERO */
.hero{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  padding:28px 28px;
  background:linear-gradient(180deg, var(--green), var(--green2));
  overflow:hidden;
}
.hero__content{ z-index:2; }
.hero__content2{ z-index:5; }
.hero__logo{
  font-weight:700;
  color:#ffe;
  letter-spacing:.02em;
  margin-bottom:6px;
  font-size:30px;
}
.hero__logo span{ font-size:42px; line-height:0; }
.hero__logo small{ font-size:16px; font-weight:600; text-transform:uppercase; opacity:.9; margin-left:6px; }
.hero h1{
  margin:0;
  color:#fff;
  font-size:48px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
}
.hero__phone{
  z-index:2;
  justify-self:end;
}
.hero__phone img{
  width:min(320px, 100%);
  height:auto;
  display:block;
}
.hero__pattern{
  position:absolute;
  right:-120px;
  top:-40px;
  width:520px;
  height:520px;
  background:
    repeating-linear-gradient(135deg, rgba(255,210,70,.65) 0 8px, rgba(255,210,70,0) 8px 18px);
  opacity:.8;
  border-radius:26px;
  transform: rotate(6deg);
}

/* PRODUCTS */
.products{ background:#fff; padding:2em 4em;}
.products__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  margin:0 auto;
}
.product{
  text-align:center;
  padding:8px 8px 10px;
}
.product img{
  width:auto;
  height:163px;
  display:block;
  margin:0 auto 8px;
}
.product__name{
  margin:0 0 10px;
  font-size:11px;
  line-height:1.25;
  color:#202020;
  font-size:1em;
}
.btn{
  appearance:none;
  border:0;
  background:var(--yellow);
  color:#1a1a1a;
  font-weight:700;
  font-size:10px;
  padding:7px 10px;
  border-radius:2px;
  cursor:default;
  margin-top:1em;
}

/* SPLIT SECTIONS */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
}
.split-small{
  display:grid;
  grid-template-columns: 1fr 2fr;
  max-height: 150px;
  width:95%;
  margin:0 auto 3% auto;
}
.panel{
  padding:22px 10%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.panel2{
  padding:0 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.panel h2{
  margin:0 0 6px;
  font-size:2.5em;
  font-weight:100;
  line-height:1.15;
}
.panel .subhead{
  margin:0 0 16px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.9;
}
.panel p{ margin:6px 0;font-size:1.75em;font-weight:100 }
.panel .muted{font-size:18px;line-height:1.5; max-width:520px; }
.panel--dark{
  background:#243236;
  color:#fff;
}
.panel--dark .muted{ color:rgba(255,255,255,.78); }
.panel--light{
  background:#fff;
  color:#000;
}

.panel.center{ text-align:center; align-items:center; }
.panel.center .muted{ max-width:520px; }

.photo{
  position:relative;
  overflow:hidden;
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-contain img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* CAMERA section specifics */
.bullets{ display:grid; gap:10px; margin-top:6px; }
.bullet h3{ margin:0 0 4px; font-size:1em; text-transform:uppercase; letter-spacing:.06em; }
.bullet p{ margin:0; font-size:1em; line-height:1.45; color:rgba(255,255,255,.82); }
.camera__mini img{
  width:220px;
  max-width:100%;
  margin-top:14px;
  display:block;
}
.photo--dots::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20px 20px, rgba(255,210,70,.75) 0 3px, rgba(0,0,0,0) 4px) 0 0/28px 28px;
  opacity:.45;
  pointer-events:none;
}

/* DESIGN */
.photo--green{ background:linear-gradient(180deg, #44d64d, #2bb03e); }

/* BATTERY */
.photo--blue{order: 1; background:linear-gradient(180deg, #2f97e8, #1c6cc2); }

/* TILES */
.tiles{
  padding:20px 20px 24px;
  background:#f72413;
}
.tiles__title{
  text-align:center;
  font-size:1.5em;
  margin-bottom:14px;
  color:white
}
.tiles__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0 5%;
  max-width:1100px;
  margin:0 auto;
}
.tile{
  padding:0;
  color:#fff;
  min-height:206px;
}
.tile img{
  width:368px;
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:10px;
}
.tile h3{
  margin:0 0 6px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.tile p{
  margin:0;
  font-size:12px;
  line-height:1.4;
  opacity:.92;
}

/* SHORTCUTS */
.photo--waves{
  background:linear-gradient(180deg, var(--green), #2da83a);
}

/* APP STRIP */
.appstrip{
  background:#2a2a2a;
  padding:16px 14px;
}
.appstrip__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  max-width:1100px;
  margin:0 auto;
}
.appstrip__grid img{
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
}

/* CARRIERS */
.photo--colorblocks{
  background:#f5f5f5;
}

/* SPECS */
.specs{
  background:#f5f5f5;
  padding:26px 18px 40px;
}
.specs__wrap{
  max-width:1100px;
  margin:0 auto;
}

.specs__title{
  text-align:left;
  font-weight: 100;
  font-size: 2.5em;
  margin:0 0 18px;
}
.specs__grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:2em;
  align-items:center;
}
.specs__left img{
  width:100%;
  height:auto;
  display:block;
}
.specCols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4em;
}
.specCol h3{
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}
.specCol p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

/* Section wrapper */
.moto-features{
  background:#444C59;
  padding: 28px 18px;
  color:#fff;
}

.moto-features__wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.advanced-camera{
  background:#171717;
  padding: 28px 18px;
  color:#fff;
}

.advanced-camera__wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.moto-card{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
}

.advcam-card{
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 18px;
  align-items: center;
}
.advcam-card__phone{
  width: 268px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Phone image */
.moto-card__phone{
  width: 150px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Right content */
.moto-card__content{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.advcam-card__content{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

/* Icon badge */
.moto-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 220, 70, .95); /* warm yellow highlight */
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}

.moto-card__icon img{
  width: 24px;
  height: 24px;
  display: block;
}

/* Copy */
.moto-card__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .1px;
  color: rgba(255,255,255,.92);
}
.advcam-card__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .1px;
  color: rgba(255,255,255,.92);
}
.desktop-hide{display:none;}
/* -------------------------
   Responsive behavior
   ------------------------- */

/* Tablet: 2 columns */
@media (max-width: 980px){
  .moto-features__wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .advanced-camera__wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: stack each card (phone above copy) */
@media (max-width: 640px){
  .moto-features__wrap{
    grid-template-columns: 1fr;
  }
  .advanced-camera__wrap{
    grid-template-columns: 1fr;
  }
.split__left_{order:2}
.split__right_{order:1}

  .moto-card{
    grid-template-columns: 30% 2fr;
    justify-items: center;
    text-align: left;
  }

  .moto-card__phone{
    width: 170px;
  }

  .moto-card__content{
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 520px;
  }

  .advcam-card{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .advcam-card__phone{
    width: 100%;
  }

  .advcam-card__content{
    grid-template-columns: 100% 1fr;
    width: 100%;
    max-width: 520px;
  }


}

@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner { padding-top: 32.94%; }
	.banner-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}	
	.banner2 { padding-top: 60.03%; }
	.banner2-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}	
}

/* RESPONSIVE */
@media (max-width: 980px){
  .section-inner{margin-top:0}
  .hero{ grid-template-columns: 1fr; gap:14px; text-align:center; }
  .hero__phone{ justify-self:center; }
.moto5gplus-logo{
    top:15%;left:5%;width:36%;background-size:100%;padding-top:4em}
    .moto5gplus-copy{top:32%;left:5%;width:80%;}
.moto5gplus-copy h1{font-size: clamp(16px, 20vw, 48px);}
  .hero h1{ font-size:40px; }
  .products{padding:0}
  .products__grid{ grid-template-columns: repeat(2, 1fr);}
  .product img{height:50%;}

  .split{ grid-template-columns: 1fr; }
  .tiles__grid{ grid-template-columns: 1fr; }
  .appstrip__grid{ grid-template-columns: repeat(2, 1fr); }
  .specs__grid{ grid-template-columns: 1fr; }
  .specCols{ grid-template-columns: 1fr; gap: 0;}
  .mobile-hide{display: none;}
  .desktop-hide{display:block;}
}