/* =========================
   AMERICAN HERO
========================= */

.american-hero{
  position:relative;
  min-height:100vh;

  display:flex;
  align-items:center;

  padding:0 7%;

  background:url("../images/america/1.webp")
  center center / cover no-repeat;

  overflow:hidden;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.08) 100%
  );
}

.hero-content{
  position:relative;
  z-index:2;

  max-width:560px;
}

.hero-tag{
  display:block;

  margin-bottom:28px;

  color:#c9a46b;

  font-size:14px;
  letter-spacing:5px;
  text-transform:uppercase;
}

.hero-content h1{
  font-family:"Cormorant Garamond", serif;

  font-size:92px;
  line-height:.95;

  font-weight:500;

  color:#fff;

  margin:0 0 30px;
}

.hero-content h1 span{
  color:#c9a46b;
}

.hero-line{
  width:90px;
  height:2px;

  background:#c9a46b;

  margin-bottom:35px;
}

.hero-content p{
  max-width:340px;

  color:rgba(255,255,255,.85);

  font-size:22px;
  line-height:1.8;

  margin-bottom:40px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:240px;
  height:60px;

  border:1px solid #c9a46b;

  color:#c9a46b;

  text-decoration:none;

  font-size:13px;
  font-weight:600;

  letter-spacing:2px;

  transition:.35s;
}

.hero-btn:hover{
  background:#c9a46b;
  color:#111;
}
/* ===================================
   OVERVIEW
=================================== */

.af-overview{
  padding:120px 0 80px;
}

.af-grid{
  max-width:1400px;
  margin:auto;

  display:grid;
  grid-template-columns:420px 1fr;

  gap:80px;

  align-items:center;
}

.af-tag{
  display:block;

  color:#c9a46b;

  font-size:13px;

  letter-spacing:3px;

  margin-bottom:20px;
}

.af-content h2{
  font-family:"Cormorant Garamond", serif;

  font-size:68px;

  line-height:0.95;

  font-weight:500;

  color:#111;

  margin-bottom:25px;
}

.af-line{
  width:55px;
  height:2px;

  background:#c9a46b;

  margin-bottom:30px;
}

.af-content p{
  max-width:320px;

  color:#555;

  font-size:17px;

  line-height:1.9;

  margin-bottom:35px;
}

.af-btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:150px;
  height:52px;

  border:1px solid var(--aid-ink);
  background:var(--aid-ink);
  color:var(--aid-ivory);

  text-decoration:none;

  font-size:12px;
  font-weight:600;

  letter-spacing:1.5px;

  transition:.3s;
}

.af-btn:is(:hover, :focus-visible){
  border-color:var(--aid-bronze);
  background:var(--aid-bronze);
  color:var(--aid-paper);
}

.af-image img{
  width:100%;

  border-radius:18px;

  display:block;
}


/* ===================================
   DOOR STYLE
=================================== */

.door-style-section{
  padding:40px 0 120px;

  text-align:center;
}

.door-tag{
  display:block;

  color:#c9a46b;

  letter-spacing:3px;

  font-size:13px;

  margin-bottom:10px;
}

.door-style-section h2{
  font-family:"Cormorant Garamond", serif;

  font-size:54px;

  font-weight:500;

  color:#111;

  margin-bottom:15px;
}

.door-line{
  width:55px;
  height:2px;

  background:#c9a46b;

  margin:0 auto 60px;
}

.door-grid{
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:50px;
}

.door-card{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.door-card img{
    width:260px;
    height:420px;

    object-fit:contain;
    object-position:center;

    display:block;
    margin:auto;
}

.door-card h3{
    margin-top:20px;
}

.door-style-section .door-card img {
    transition: transform .32s ease, filter .32s ease;
}

.door-style-section .door-card h3 {
    transition: color .24s ease;
}

.door-style-section .door-card h3::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin: 8px auto 0;
    background: #c9a46b;
    transform: scaleX(0);
    transition: transform .24s ease;
}

.door-style-section .door-card:focus-visible {
    outline: 2px solid #8b602e;
    outline-offset: 7px;
}

.door-style-section .door-card:focus-visible img {
    transform: translateY(-6px);
    filter: drop-shadow(0 12px 12px rgba(64, 46, 28, .18));
}

.door-style-section .door-card:focus-visible h3 {
    color: #79562e;
}

.door-style-section .door-card:focus-visible h3::after {
    transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
    .door-style-section .door-card:hover img {
        transform: translateY(-6px);
        filter: drop-shadow(0 12px 12px rgba(64, 46, 28, .18));
    }

    .door-style-section .door-card:hover h3 {
        color: #79562e;
    }

    .door-style-section .door-card:hover h3::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .door-style-section .door-card img,
    .door-style-section .door-card h3,
    .door-style-section .door-card h3::after {
        transition: none;
    }

    .door-style-section .door-card:is(:hover, :focus-visible) img {
        transform: none;
    }
}