/* =====================================================
   RESTORATION PAGE
   The Savage Saints
===================================================== */

:root{
  --forest:#0f3d2a;
  --forest-dark:#082719;
  --forest-deep:#041b11;
  --forest-mid:#1f6a45;

  --cream:#fff7e8;
  --paper:#f2e3c3;
  --paper-light:#fff4dc;

  --gold:#d9b45f;
  --gold-soft:#f2d27f;
  --gold-bright:#ffe7a3;

  --ink:#12291b;
  --ink-soft:#405848;
  --muted:rgba(18,41,27,.72);

  --line:rgba(15,61,42,.16);
  --line-strong:rgba(15,61,42,.28);

  --white-soft:rgba(255,255,255,.72);
  --shadow:rgba(4,24,14,.24);
}

/* =====================================================
   BASE
===================================================== */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  min-height:100%;
  background:var(--forest-dark);
  scroll-behavior:smooth;
}

body{
  min-height:100svh;
  color:var(--ink);
  font-family:"Inter", Arial, Helvetica, sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at var(--glow-x, 72%) var(--glow-y, 18%), rgba(242,210,127,.24), transparent 22rem),
    radial-gradient(circle at 14% 8%, rgba(242,210,127,.18), transparent 30rem),
    radial-gradient(circle at 88% 18%, rgba(31,106,69,.22), transparent 34rem),
    linear-gradient(145deg, #fbf4e4 0%, #eadbb9 46%, #103820 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.13;
  background-image:
    linear-gradient(rgba(15,61,42,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,61,42,.12) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(circle at center, black 0 48%, transparent 82%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,247,232,.18), transparent 34%),
    radial-gradient(circle at center, transparent 0 58%, rgba(8,39,25,.16) 100%);
}

a{
  color:inherit;
}

.page{
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 36px));
  margin:0 auto;
  padding:clamp(20px, 4vw, 46px) 0 clamp(40px, 7vw, 84px);
}

/* =====================================================
   AMBIENT LIFE
===================================================== */

.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(18px);
  opacity:.44;
  animation:driftOrb 13s ease-in-out infinite alternate;
}

.orb.one{
  width:160px;
  height:160px;
  left:8%;
  top:18%;
  background:rgba(242,210,127,.22);
}

.orb.two{
  width:220px;
  height:220px;
  right:7%;
  top:42%;
  background:rgba(31,106,69,.18);
  animation-delay:-3s;
}

.orb.three{
  width:140px;
  height:140px;
  left:44%;
  bottom:8%;
  background:rgba(255,231,163,.16);
  animation-delay:-6s;
}

@keyframes driftOrb{
  from{
    transform:translate3d(0,0,0) scale(1);
  }

  to{
    transform:translate3d(20px,-26px,0) scale(1.08);
  }
}

/* =====================================================
   SHARED BUTTONS
===================================================== */

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;

  border:1px solid rgba(15,61,42,.24);
  color:var(--forest-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,247,232,.42));

  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:900;

  box-shadow:
    0 12px 26px rgba(4,24,14,.14),
    inset 0 1px 0 rgba(255,255,255,.75);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.btn.primary{
  color:var(--cream);
  border-color:rgba(242,210,127,.58);
  background:
    linear-gradient(180deg, rgba(31,106,69,.98), rgba(8,39,25,.98));
  box-shadow:
    0 16px 34px rgba(4,24,14,.26),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.btn::after{
  content:"";
  position:absolute;
  inset:3px 10px auto;
  height:16px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.26), transparent);
  opacity:.65;
  pointer-events:none;
}

.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(217,180,95,.72);
  box-shadow:
    0 18px 38px rgba(4,24,14,.22),
    0 0 0 4px rgba(217,180,95,.10);
  outline:none;
}

/* =====================================================
   RESTORATION MAP WRAPPER
===================================================== */

.restoration-map{
  display:grid;
  gap:clamp(34px, 5vw, 56px);
}

/* =====================================================
   SECTION 2
   PHOTO BAND
===================================================== */

.restoration-photo-band{
  position:relative;
}

.photo-frame{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(280px, .92fr);
  gap:clamp(20px, 4vw, 38px);
  align-items:stretch;

  padding:clamp(16px, 3vw, 24px);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.62);

  background:
    radial-gradient(circle at 74% 16%, rgba(242,210,127,.26), transparent 28%),
    linear-gradient(145deg, rgba(255,247,232,.88), rgba(242,227,195,.72));

  box-shadow:
    0 26px 70px rgba(4,24,14,.20),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.photo-panel{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(15,61,42,.16);
  background:var(--forest-dark);
}

.photo-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.04) contrast(1.03) brightness(1.04);
  transition:transform 800ms ease, filter 800ms ease;
}

.photo-frame:hover .photo-panel img{
  transform:scale(1.025);
  filter:saturate(1.12) contrast(1.04) brightness(1.08);
}

.photo-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 68% 34%, rgba(255,247,232,.22), transparent 24%),
    linear-gradient(180deg, transparent, rgba(4,24,14,.16));
  pointer-events:none;
}

.photo-copy{
  display:grid;
  align-content:center;
  padding:clamp(8px, 1vw, 16px) clamp(4px, 1vw, 10px);
}

.photo-kicker,
.manifesto-kicker,
.road-card span,
.final-call span,
.hero-kicker{
  display:block;
  color:var(--forest-mid);
  font-family:"Cinzel", Georgia, serif;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.photo-copy h2{
  color:var(--forest-dark);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.2rem, 4vw, 3.8rem);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:16px;
}

.photo-copy p{
  color:var(--muted);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.12rem, 1.65vw, 1.3rem);
  line-height:1.55;
  font-weight:600;
}

.photo-copy p + p{
  margin-top:14px;
}

.photo-line{
  margin-top:20px;
  padding:18px 20px;
  border-left:3px solid var(--gold);
  border-radius:0 18px 18px 0;
  background:rgba(255,255,255,.48);
  color:var(--forest-dark) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

/* =====================================================
   SECTION 3
   MANIFESTO
===================================================== */

.manifesto{
  position:relative;
  padding:clamp(16px, 3vw, 24px);
  color:var(--ink);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.58);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.48), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(242,210,127,.28), transparent 26rem),
    linear-gradient(180deg, #fff4dc, #eadbb9);
  box-shadow:0 26px 72px rgba(4,24,14,.20);
  overflow:hidden;
}

.manifesto::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:24px;
  border:1px solid rgba(15,61,42,.14);
  pointer-events:none;
  z-index:3;
}

.manifesto-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(280px, .9fr) minmax(0, 1.1fr);
  gap:clamp(22px, 4vw, 42px);
  align-items:stretch;
}

.manifesto-art{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(15,61,42,.16);
  background:var(--forest-dark);
  box-shadow:inset 0 0 34px rgba(0,0,0,.18);
}

.manifesto-art img{
  width:100%;
  height:100%;
  min-height:420px;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.04) saturate(1.06) brightness(1.04);
  transition:transform 800ms ease, filter 800ms ease;
}

.manifesto:hover .manifesto-art img{
  transform:scale(1.025);
  filter:contrast(1.05) saturate(1.12) brightness(1.08);
}

.manifesto-content{
  position:relative;
  z-index:2;
  align-self:center;
  padding:clamp(12px, 2vw, 24px) clamp(8px, 2vw, 18px);
}

.manifesto h2{
  color:var(--forest-dark);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.2rem, 4.8vw, 4.3rem);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:18px;
}

.manifesto p{
  color:var(--muted);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.16rem, 1.75vw, 1.36rem);
  font-weight:600;
  line-height:1.55;
}

.manifesto p + p{
  margin-top:14px;
}

.manifesto-punch{
  margin-top:22px;
  padding:18px 20px;
  border-left:3px solid var(--gold);
  border-radius:0 18px 18px 0;
  background:rgba(255,255,255,.50);
  color:var(--forest-dark);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.22rem, 2vw, 1.55rem);
  font-weight:800;
  line-height:1.32;
}

/* =====================================================
   SECTION 4
   WALKING TOGETHER IN FAITH
===================================================== */

.faith-walk{
  position:relative;
  padding:clamp(28px, 5vw, 54px);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.58);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.52), transparent 26rem),
    radial-gradient(circle at 92% 10%, rgba(217,180,95,.24), transparent 24rem),
    linear-gradient(180deg, rgba(255,247,232,.92), rgba(242,227,195,.78));
  box-shadow:
    0 26px 72px rgba(4,24,14,.18),
    inset 0 1px 0 rgba(255,255,255,.72);
  overflow:hidden;
}

.faith-walk::before{
  content:"";
  position:absolute;
  top:28px;
  right:32px;
  width:88px;
  height:88px;
  opacity:.08;
  background:
    linear-gradient(var(--forest), var(--forest)) center/18px 100% no-repeat,
    linear-gradient(var(--forest), var(--forest)) center/100% 18px no-repeat;
  pointer-events:none;
}

.faith-walk-header{
  max-width:820px;
  margin-bottom:clamp(24px, 4vw, 36px);
}

.section-kicker{
  display:block;
  color:var(--forest-mid);
  font-family:"Cinzel", Georgia, serif;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.faith-walk h2{
  color:var(--forest-dark);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.2rem, 5vw, 4.45rem);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:16px;
}

.faith-walk-header p{
  color:var(--muted);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.16rem, 1.75vw, 1.36rem);
  font-weight:600;
  line-height:1.58;
}

.faith-card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2.4vw, 24px);
}

.faith-card{
  position:relative;
  padding:clamp(22px, 3vw, 30px);
  min-height:245px;
  border-radius:26px;
  border:1px solid rgba(15,61,42,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,247,232,.46));
  box-shadow:
    0 16px 38px rgba(4,24,14,.12),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.faith-card::before{
  content:"";
  display:block;
  width:46px;
  height:3px;
  margin-bottom:18px;
  border-radius:999px;
  background:var(--gold);
}

.faith-card span{
  display:block;
  color:var(--forest-mid);
  font-family:"Cinzel", Georgia, serif;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.faith-card h3{
  color:var(--forest-dark);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.55rem, 2.5vw, 2.15rem);
  line-height:1.05;
  font-weight:700;
  margin-bottom:12px;
}

.faith-card p{
  color:var(--muted);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.08rem, 1.45vw, 1.22rem);
  font-weight:600;
  line-height:1.52;
}

/* =====================================================
   SECTION 4B
   RESTORATION MINISTRY
===================================================== */

.restoration-offers{
  position:relative;
  padding:clamp(38px, 6vw, 76px);
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(217,180,95,.18), transparent 28rem),
    linear-gradient(180deg, rgba(15,61,42,.98), rgba(4,27,17,.98));
  box-shadow:0 28px 76px rgba(4,24,14,.32);
  overflow:hidden;
}

.restoration-offers::before{
  content:"";
  position:absolute;
  top:34px;
  left:50%;
  width:86px;
  height:86px;
  transform:translateX(-50%);
  opacity:.10;
  background:
    linear-gradient(var(--gold), var(--gold)) center/16px 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/100% 16px no-repeat;
  pointer-events:none;
}

.restoration-offers-header{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto clamp(30px, 5vw, 48px);
  text-align:center;
}

.restoration-offers-header .section-kicker{
  color:var(--gold-soft);
}

.restoration-offers-header h2{
  color:var(--cream);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.5rem, 5.5vw, 4.8rem);
  line-height:.96;
  font-weight:700;
  letter-spacing:-.03em;
  margin-bottom:18px;
}

.restoration-offers-header p{
  color:rgba(255,247,232,.78);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.16rem, 1.75vw, 1.36rem);
  font-weight:500;
  line-height:1.62;
}

.restoration-offer-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(18px, 3vw, 28px);
}

.restoration-offer-card{
  position:relative;
  display:block;
  min-height:360px;
  padding:clamp(28px, 4vw, 44px);
  text-align:left;
  cursor:pointer;

  border-radius:28px;
  border:1px solid rgba(217,180,95,.28);
  background:
    radial-gradient(circle at 72% 18%, rgba(255,231,163,.16), transparent 16rem),
    linear-gradient(180deg, rgba(255,247,232,.08), rgba(255,247,232,.035));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 44px rgba(0,0,0,.18);

  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease;
}

.restoration-offer-card::before{
  content:"";
  display:block;
  width:58px;
  height:4px;
  margin-bottom:26px;
  border-radius:999px;
  background:var(--gold);
}

.restoration-offer-card::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:28px;
  width:72px;
  height:72px;
  opacity:.11;
  background:
    linear-gradient(var(--gold), var(--gold)) center/14px 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/100% 14px no-repeat;
  pointer-events:none;
}

.restoration-offer-card span{
  display:block;
  color:var(--gold-soft);
  font-family:"Cinzel", Georgia, serif;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.restoration-offer-card h3{
  max-width:520px;
  color:var(--cream);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2rem, 4vw, 3.45rem);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.03em;
  margin-bottom:18px;
}

.restoration-offer-card p{
  max-width:520px;
  color:rgba(255,247,232,.76);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.12rem, 1.6vw, 1.3rem);
  font-weight:500;
  line-height:1.58;
}

.restoration-offer-card:hover,
.restoration-offer-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(217,180,95,.58);
  background:
    radial-gradient(circle at 72% 18%, rgba(255,231,163,.22), transparent 16rem),
    linear-gradient(180deg, rgba(255,247,232,.12), rgba(255,247,232,.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 58px rgba(0,0,0,.24);
  outline:none;
}

/* MODALS */

.offer-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  padding:22px;
}

.offer-modal.is-open{
  display:grid;
}

.offer-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,27,17,.78);
  backdrop-filter:blur(8px);
}

.offer-modal-card{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  padding:clamp(30px, 5vw, 54px);
  border-radius:8px;
  border:1px solid rgba(217,180,95,.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(217,180,95,.20), transparent 18rem),
    linear-gradient(180deg, #fffaf0, #f2e3c3);
  box-shadow:0 34px 100px rgba(4,24,14,.48);
}

.offer-modal-card::before{
  content:"";
  display:block;
  width:74px;
  height:3px;
  margin:0 0 22px;
  background:var(--gold);
}

.offer-modal-card h2{
  color:var(--forest-dark);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:.98;
  margin-bottom:18px;
}

.offer-modal-card p{
  color:var(--muted);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.14rem, 1.7vw, 1.32rem);
  font-weight:600;
  line-height:1.6;
}

.offer-modal-card p + p{
  margin-top:14px;
}

.offer-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border:1px solid rgba(15,61,42,.18);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:var(--forest-dark);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}

@media (max-width:860px){
  .restoration-offers{
    padding:28px 18px;
    border-radius:26px;
  }

  .restoration-offer-grid{
    grid-template-columns:1fr;
  }

  .restoration-offer-card{
    min-height:auto;
  }
}



/* =====================================================
   SECTION 5
   FINAL CALL
===================================================== */

.final-call{
  position:relative;
  padding:clamp(30px, 6vw, 62px);
  min-height:380px;
  display:grid;
  align-content:center;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 50% 16%, rgba(255,231,163,.25), transparent 34%),
    radial-gradient(circle at 86% 68%, rgba(31,106,69,.22), transparent 30%),
    linear-gradient(180deg, rgba(15,61,42,.96), rgba(4,27,17,.96));
  box-shadow:0 28px 76px rgba(4,24,14,.34);
  overflow:hidden;
}

.final-call::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(242,210,127,.16) 50%, transparent 52% 100%),
    radial-gradient(circle at 50% 0%, rgba(255,247,232,.08), transparent 42%);
  opacity:.48;
  pointer-events:none;
}

.final-call > *{
  position:relative;
  z-index:1;
  max-width:860px;
}

.final-call span{
  color:var(--gold-soft);
}

.final-call h2{
  color:var(--gold-bright);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.6rem, 7vw, 6.2rem);
  line-height:.92;
  letter-spacing:-.02em;
  font-weight:700;
  margin-bottom:18px;
}

.final-call p{
  color:rgba(255,247,232,.84);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight:500;
  line-height:1.52;
}

.final-call p + p{
  margin-top:14px;
}

.final-scripture{
  margin-top:22px;
  padding:18px 20px;
  max-width:720px;
  border-left:3px solid var(--gold);
  border-radius:0 18px 18px 0;
  background:rgba(255,247,232,.10);
  color:var(--cream);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.24rem, 2vw, 1.6rem);
  font-weight:800;
  line-height:1.25;
}

.footer-note{
  margin-top:34px;
  color:rgba(255,247,232,.78);
  text-align:center;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* =====================================================
   JS REVEAL STATES
===================================================== */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.photo-frame.reveal,
.manifesto.reveal,
.final-call.reveal{
  transform:translateY(26px) scale(.985);
}

.photo-frame.reveal.is-visible,
.manifesto.reveal.is-visible,
.final-call.reveal.is-visible{
  transform:translateY(0) scale(1);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:980px){
  .photo-frame,
  .manifesto-grid{
    grid-template-columns:1fr;
  }

  .photo-panel{
    min-height:340px;
  }

  .manifesto-art,
  .manifesto-art img{
    min-height:320px;
  }
}

@media (max-width:640px){
  .page{
    width:100%;
    padding:18px 16px 38px;
  }

  .photo-frame{
    padding:14px;
    border-radius:26px;
  }

  .photo-panel{
    min-height:280px;
    border-radius:20px;
  }

  .photo-copy{
    padding:2px;
  }

  .manifesto{
    padding:14px;
    border-radius:26px;
  }

  .manifesto::before{
    inset:8px;
    border-radius:20px;
  }

  .manifesto-content{
    padding:10px 4px 4px;
  }

  .manifesto-art,
  .manifesto-art img{
    min-height:260px;
    border-radius:20px;
  }

  .road::before{
    left:22px;
  }

  .road-step{
    grid-template-columns:52px minmax(0, 1fr);
  }

  .road-card,
  .final-call{
    padding:22px 18px;
    border-radius:24px;
  }

  .hero-actions{
    display:grid;
  }

  .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:1ms !important;
  }
}