:root{
  --orange:#f47b20;
  --black:#050505;
  --gray:#9f9f9f;
  --light:#f3f3f3;
  --line:#777;
  --left:46px;
  --header-height:98px;
}

*{box-sizing:border-box}
html{
  min-height:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--black);
  background:#fff;
}
main{
  flex:1;
}
a{color:inherit}
.orange{color:var(--orange)}

.site-header{
  height:var(--header-height);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:32px 36px 0;
  position:relative;
  z-index:5;
  background:
    linear-gradient(90deg,#fff 0%,#fff 42%,rgba(255,255,255,.72) 70%,rgba(255,255,255,.38)),
    url('../img/logo.png') top right/auto 120px no-repeat;
}

.nav{display:flex;gap:40px;flex-wrap:wrap}
.nav a{
  text-decoration:none;
  font-weight:900;
  font-size:clamp(20px,2vw,28px);
  letter-spacing:.01em;
  padding-bottom:10px;
  border-bottom:4px solid transparent;
}
.nav a.active,.nav a:hover{border-color:#d98612}
.group-logo{display:block;width:190px;height:70px}

.page-hero{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:420px;
}

.page-left{
  padding:22px 0 0 var(--left);
  position:relative;
  z-index:2;
}

.page-right{
	padding-top: 20px
	
}

.amg-logo{
  display:block;
  width:clamp(260px,25vw,430px);
  height:auto;
}

.mini-line{
  width:42px;
  height:2px;
  background:var(--line);
  margin:22px 0 30px;
}

.title{
  font-size:clamp(36px,3.4vw,48px);
  line-height:1;
  margin:0 0 8px;
  font-weight:900;
}

.lead{
  max-width:620px;
  margin:0;
  color:#aaa;
  font-size:clamp(21px,2vw,25px);
  font-weight:800;
  line-height:1.22;
}

.copy{
  max-width:690px;
  margin:0 0 12px;
  font-size:18px;
  line-height:1.35;
  text-align:justify;
}

.hero-art{
  min-height:420px;
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 18%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 68%),
    url('../img/workerB.png') center right/cover no-repeat;
}



.about-hero{
  grid-template-columns: minmax(540px, 0.99fr) minmax(480px, 1.00fr);
  column-gap: 40px;
}

.about-hero .title{
  white-space: nowrap;
  font-size: clamp(28px, 2.8vw, 54px);
}

.about-right,
.services-panel{
  min-width: 0;
}

.services-grid{
  grid-template-columns: repeat(4, minmax(46px, 1fr));
  gap: 12px;
}

.service h3{
  font-size: clamp(15px, 1.2vw, 22px);
}



.video-cta{
  margin-top:24px;
  width:min(485px,95%);
  border:2px solid #ff8b45;
  box-shadow:0 0 17px rgba(242,107,33,.65);
  border-radius:18px;
  background:#fff;
  display:flex;
  gap:22px;
  align-items:center;
  padding:18px 22px;
  cursor:pointer;
  text-align:left;
}
.video-cta b{display:block;font-size:20px;line-height:1.15}
.video-cta span{font-size:17px}
.play{
  width:62px;
  height:62px;
  border:3px solid var(--orange);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.play:before{
  content:"";
  border-left:22px solid var(--orange);
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  margin-left:6px;
}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:14px 32px 26px;
  text-align:center;
}
.feature h3{font-size:22px;margin:7px 0 12px;font-weight:900}
.feature p{
  max-width:220px;
  margin:0 auto;
  font-size:15px;
  line-height:1.22;
  text-wrap:balance;
}
.feature p.sustain-text{
  max-width:260px;
}
.feature-icon,.service-icon{
  width:62px;
  height:62px;
  margin:0 auto 15px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.icon-certified{background-image:url('../img/Certified.png')}
.icon-trust{background-image:url('../img/trust.png')}
.icon-sustain{background-image:url('../img/sustain.png')}
.icon-service{background-image:url('../img/servicehello.png')}

.about-img-wrap{
  position: relative;
  width: 100%;
  height: 280px;
  background: #fff;
  overflow: hidden;
}

.about-img-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, #fff 0%, #fff 18%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 88%, #fff 100%),
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, #fff 100%);
}
.about-img{
  display: block;
  width: 112%;
  height: 330px;
  object-fit: contain;
  object-position: right top;
  transform: translate(-12%, -16px);
  filter: grayscale(1);
  opacity: .75;
}

.services-panel{
  border:1px solid #aaa;
  border-radius:28px;
  padding:28px 20px 18px;
  position:relative;
  margin:0 20px 10px 0;
}
.services-panel h2{
  position:absolute;
  left:28px;
  top:-23px;
  margin:0;
  padding:0 13px;
  background:#fff;
  color:#aaa;
  font-size:26px;
  font-weight:900;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  text-align:center;
}
.about-hero .services-panel{
  transform: translateY(18px);
}
.service-icon{width:70px;height:70px;margin-bottom:8px}
.service h3{font-size:22px;font-weight:500;margin:0;line-height:1.13}
.icon-buyback{background-image:url('../img/box.png')}
.icon-erasure{background-image:url('../img/keylock.png')}
.icon-refurb{background-image:url('../img/arrows.png')}
.icon-trading{background-image:url('../img/notebook.png')}

.certifications{
  background:var(--light);
  padding:22px 5.3vw 38px;
}

.cert-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:35px;
  margin-bottom:14px;
}

.cert-verify{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 26px;
  font-size:16px;
  line-height:1.2;
  color:#111;
}
.cert-verify-icon{
  width:52px;
  height:52px;
  object-fit:contain;
  flex:0 0 auto;
}

.cert-verify a{
  color:#4f9d3a;
  text-decoration:none;
  font-weight:500;
}

.cert-verify a:hover{
  text-decoration:underline;
}

.cert-dot{
  color:#777;
}

.cert-head span{height:1px;background:#555}
.cert-head h2{font-size:23px;margin:0;white-space:nowrap;font-weight:900}

.cert-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.cert{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:18px;
  align-items:start;
  text-align:left;
  background:#fff;
  border:1px solid #ddd;
  border-radius:14px;
  padding:26px 28px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  min-height:132px;
}

.cert-icon{
  width:102px;
  height:102px;
  object-fit:contain;
  flex:0 0 auto;
  justify-self:center;
  align-self:start;
  margin-top:4px;
}

.cert h3{
  font-size:22px;
  margin:0 0 2px;
  font-weight:900;
}

.cert strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  padding-bottom:10px;
  margin-bottom:8px;
  border-bottom:1px solid #ddd;
}

.cert p{
  font-size:14px;
  line-height:1.25;
  margin:0;
}

.map-wrap{padding-right:24px}
.map-img{display:block;width:100%;height:448px;object-fit:cover;object-position:center}
.map-frame{display:block;width:100%;height:448px;border:0;filter:saturate(.72) contrast(.96);}
.small-lead{font-size:21px}
.contact-card{
  display:grid;
  grid-template-columns:76px 1fr;
  column-gap:28px;
  align-items:center;
  margin-top:24px;
}

.contact-card h3{
  font-size:20px;
  margin:0 0 12px;
  font-weight:900;
}

.contact-card p{
  font-size:20px;
  line-height:1.35;
  margin:0;
}

.address-icon{
  width:76px;
  height:76px;
  object-fit:contain;
  justify-self:center;
  align-self:center;
}
.mail-band{
  margin: 20px 24px 18px;
  padding: 20px 28px 20px 22px;
  min-height: 118px;
  display: grid;
  grid-template-columns:76px 1fr;
  column-gap:28px;
  align-items: center;
  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(7,7,7,0.96) 0%,
      rgba(7,7,7,0.90) 34%,
      rgba(7,7,7,0.58) 58%,
      rgba(7,7,7,0.18) 78%,
      rgba(7,7,7,0.04) 100%
    ),
    url('../img/notebooktyping.png') right center / auto 95% no-repeat;

  background-color: #070707;
}

.mail-icon{
  width:76px;
  height:76px;
  object-fit:contain;
  border:0;
  justify-self:center;
  align-self:center;
}

.mail-band h2{font-size:20px;margin:0 0 14px}
.mail-band a{color:#d85f2e;font-size:24px;text-decoration:none}
.mail-band p{font-size:17px;font-weight:800;margin:18px 0 0}

.footer{padding:24px;text-align:center;background:#111;color:#ddd;font-size:12px}

.cookie{
  position:fixed;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  border-radius:14px;
  background:#111;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.cookie button{background:var(--orange);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:800}

.video-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:20px;z-index:30}
.video-modal.open{display:flex}
.video-box{position:relative;width:min(980px,96vw);aspect-ratio:16/9;background:#000}
.video-box iframe{width:100%;height:100%;border:0}
.close-video{position:absolute;right:-12px;top:-42px;font-size:34px;background:#fff;border:0;border-radius:50%;width:40px;height:40px;line-height:36px;cursor:pointer}
.skip{position:absolute;left:-999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:100}

@media(max-width:1000px){
  :root{--left:26px}
  .site-header{height:auto;min-height:86px;padding:24px}
  .group-logo{width:150px}
  .page-hero{grid-template-columns:1fr}
  .hero-art{min-height:310px}
  .features,.services-grid{grid-template-columns:1fr 1fr}
  .about-img{height:220px}
  .map-wrap{padding:0 20px}.map-img,.map-frame{height:330px}
  .cert-row{grid-template-columns:1fr}
  .mail-band{margin:0 20px 24px}
}

@media(max-width:620px){
  .site-header{align-items:center}.nav{gap:17px}.nav a{font-size:18px}.group-logo{width:120px}
  .features,.services-grid{grid-template-columns:1fr}
  .cert-head{grid-template-columns:1fr}.cert-head span{display:none}
  .amg-logo{width:260px}.lead{font-size:21px}
  .video-cta{padding:15px;gap:13px}.play{width:56px;height:56px}.video-cta b{font-size:17px}
  .mail-band{display:grid;padding:18px 20px 18px 6px;grid-template-columns:76px 1fr;column-gap:20px}.mail-band a{font-size:22px}.cert{align-items:flex-start}
}

/* Responsive polish for About page - keeps large desktop unchanged */

/* Laptop / smaller desktop: keep 2 columns, but make them more compact */
@media (min-width:1001px) and (max-width:1400px){

  .about-hero{
    grid-template-columns:minmax(440px, .95fr) minmax(420px, 1.05fr);
    column-gap:24px;
  }

  .about-hero .title{
    font-size:clamp(28px, 2.45vw, 42px);
  }

  .about-hero .copy{
    font-size:16px;
    line-height:1.32;
  }

  .about-img-wrap{
    height:240px;
  }

  .about-img{
    height:250px;
    object-position:calc(100% - 14px) top;
  }

  .services-panel{
    padding:22px 14px 14px;
    margin:0 14px 10px 0;
  }

  .about-hero .services-panel{
    transform:translateY(8px);
  }

  .services-panel h2{
    font-size:22px;
    top:-20px;
  }

  .service-icon{
    width:56px;
    height:56px;
  }

  .service h3{
    font-size:clamp(14px, 1.25vw, 18px);
    line-height:1.12;
  }
}


/* Tablet / mobile: stack About cleanly and stop text from being cut */
@media (max-width:1000px){

  .about-hero{
    grid-template-columns:1fr;
    column-gap:0;
  }

  .about-right{
    padding-top:20px;
  }

  .about-hero .services-panel{
    transform:none;
    margin:26px 20px 20px;
  }
}


/* Phone: prevent clipping and make the About layout look intentional */
@media (max-width:620px){

  .site-header{
    padding:16px 18px 0;
    background:
      linear-gradient(90deg,#fff 0%,#fff 55%,rgba(255,255,255,.75)),
      url('../img/logo.png') top right / auto 68px no-repeat;
  }

  .nav{
    gap:12px;
  }

  .nav a{
    font-size:16px;
    padding-bottom:7px;
  }

  .page-left{
    padding-top:16px;
  }

  .about-hero .title{
    white-space:nowrap;
    font-size:clamp(20px, 5.2vw, 24px);
    line-height:1.05;
    letter-spacing:-0.02em;
  }

  .about-hero .copy{
    max-width:none;
    padding-right:18px;
    font-size:16px;
    line-height:1.32;
    text-align:left;
  }

  .about-img-wrap{
    height:180px;
    margin-top:16px;
  }

  .about-img{
    height:185px;
    object-position:center top;
  }

  .about-hero .services-panel{
    margin:22px 18px 20px;
    padding:24px 14px 16px;
  }

  .about-hero .services-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px 10px;
  }

  .about-hero .service-icon{
    width:48px;
    height:48px;
    margin-bottom:6px;
  }

  .about-hero .service h3{
    font-size:15px;
    line-height:1.15;
  }

  .cookie{
    left:10px;
    right:10px;
    bottom:10px;
    padding:10px 12px;
    gap:10px;
    border-radius:10px;
    font-size:12px;
  }

  .cookie button{
    padding:8px 12px;
    border-radius:8px;
  }
}

/* Very small phones: keep header navigation on one row */
@media (max-width:430px){

  .site-header{
    justify-content:flex-start;
    align-items:flex-start;
    padding:14px 10px 0;
  }

  .nav{
    flex-wrap:nowrap;
    gap:9px;
    width:100%;
    position:relative;
    z-index:4;
  }

  .nav a{
    white-space:nowrap;
    font-size:clamp(13px, 3.5vw, 15px);
    padding-bottom:6px;
  }

  .group-logo{
    position:absolute;
    top:8px;
    right:8px;
    width:105px;
    opacity:.45;
    z-index:1;
    pointer-events:none;
  }
}
/* Contacts page - tablet/mobile alignment polish */
@media (max-width:1000px){

  .contacts-hero{
    row-gap:18px;
  }

  .contacts-hero .contact-left{
    padding-bottom:8px;
  }

  .contacts-hero .map-wrap{
    padding:0 20px;
  }

  .contacts-hero .map-frame{
    height:300px;
  }

  .mail-band{
    margin:18px 20px 24px;
    display:grid;
    grid-template-columns:76px 1fr;
    column-gap:28px;
    align-items:center;
  }
}
/* FIX 01 - fully visible Art Media Group logo on tablet/mobile */
@media (max-width:1000px){
  .site-header{
    background:#fff;
    gap:18px;
  }

  .group-logo{
    width:170px;
    height:55px;
    flex:0 0 170px;
    background:url('../img/logo.png') center / contain no-repeat;
    opacity:.65;
  }
}

@media (max-width:620px){
  .site-header{
    align-items:flex-start;
    padding:16px 18px 8px;
    gap:10px;
    background:#fff;
  }

  .nav{
    flex-wrap:nowrap;
    gap:12px;
  }

  .nav a{
    white-space:nowrap;
    font-size:16px;
  }

  .group-logo{
    width:120px;
    height:39px;
    flex:0 0 120px;
  }
}

@media (max-width:430px){
  .site-header{
    justify-content:space-between;
    align-items:flex-start;
    padding:14px 10px 8px;
    gap:8px;
  }

  .nav{
    width:auto;
    flex:1 1 auto;
    flex-wrap:nowrap;
    gap:9px;
    position:relative;
    z-index:4;
  }

  .nav a{
    white-space:nowrap;
    font-size:clamp(13px, 3.5vw, 15px);
    padding-bottom:6px;
  }

  .group-logo{
    position:static;
    top:auto;
    right:auto;
    width:108px;
    height:35px;
    flex:0 0 108px;
    opacity:.65;
    z-index:1;
    pointer-events:auto;
  }
}
/* FIX 02 - certification verification spacing on phones */
@media (max-width:620px){
  .cert-verify{
    display:grid;
    grid-template-columns:52px minmax(0, 1fr) 6px max-content;
    align-items:center;
    justify-content:normal;
    gap:0 9px;
    margin-bottom:10px;
  }

  .cert-verify-icon{
    width:52px;
    height:52px;
  }

  .cert-verify > span:first-of-type{
    min-width:0;
  }

.cert-dot{
  align-self:center;
  justify-self:center;
  margin:0;
  line-height:1;
  transform:translate(-20px, -1px);
}

.cert-verify > span:last-child{
  align-self:center;
  justify-self:start;
  white-space:nowrap;
  line-height:1.2;
  transform:translate(-12px, 1px);
}

  .cert-verify > span:last-child a{
    display:block;
    margin-top:3px;
  }
}