@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&display=swap');

@font-face{
  font-family:"Badger";
  src:url("/fonts/badger.woff2") format("woff2"),
      url("/fonts/badger.woff") format("woff");
  font-display:swap;
}

:root{
  --feedback-bg:#d5dcf1;
  --feedback-heading:#463451;
  --feedback-subheading:#6977c8;
  --feedback-gold:#b8a16c;
}

*{box-sizing:border-box}

html{
  background:var(--feedback-bg);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
}

.feedback-body{
  background:var(--feedback-bg);
  color:#111;
  font-family:"Alegreya",Georgia,"Times New Roman",serif;
}

.feedback-hero{
  min-height:440px;
  padding:52px 20px 40px;
  background:url("assets/feedback-header-clean.jpg") center center/cover no-repeat;
  text-align:center;
}

.feedback-logo{
  display:block;
  width:min(460px,62vw);
  height:auto;
  margin:0 auto 42px;
}

.feedback-top-back{
  color:#fff;
  font-family:"Badger","Alegreya",serif;
  font-size:clamp(1.25rem,2vw,1.8rem);
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:0 2px 4px #000;
}

.feedback-main{
  width:min(1460px,86vw);
  margin:0 auto;
  padding:72px 0 150px;
}

.feedback-main h1{
  margin:0 0 76px;
  color:var(--feedback-heading);
  font-family:"Badger","Alegreya",serif;
  font-size:clamp(3rem,5vw,4.2rem);
  font-weight:400;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
}

.feedback-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(56px,7vw,120px);
  align-items:start;
}

.feedback-column h2{
  margin:0 0 34px;
  color:var(--feedback-subheading);
  font-family:"Alegreya",Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,2.7vw,3rem);
  font-weight:400;
  line-height:1.1;
}

.feedback-column h2:not(:first-child){
  margin-top:62px;
}

.feedback-column p,
.feedback-column blockquote{
  font-size:clamp(1.05rem,1.35vw,1.5rem);
  line-height:1.45;
}

.feedback-column blockquote{
  margin:0 0 36px;
  padding:0;
  border:0;
  font-style:italic;
}

.feedback-name{
  display:block;
  margin-top:2px;
  font-style:normal;
  font-weight:bold;
}

.feedback-credit{
  margin:0 0 18px;
}

.feedback-portrait{
  display:block;
  width:clamp(210px,20vw,310px);
  aspect-ratio:1;
  margin:18px 0 56px;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(100%);
}

.feedback-column a{
  color:#2432d8;
}

.feedback-bottom-back-wrap{
  margin:86px 0 0;
  text-align:center;
}

.feedback-bottom-back{
  display:inline-block;
  padding:.85rem 1.35rem;
  border-radius:10px;
  background:var(--feedback-gold);
  color:#fff;
  font-size:1.3rem;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* Clean image with copyright added in HTML only.
   The tall overlay softens the top edge so there is no visible join line. */
.feedback-footer{
  position:relative;
  min-height:650px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 20px 42px;
  background:
    linear-gradient(
      to bottom,
      var(--feedback-bg) 0%,
      rgba(213,220,241,.96) 8%,
      rgba(213,220,241,.72) 22%,
      rgba(213,220,241,.30) 42%,
      rgba(213,220,241,0) 66%
    ),
    url("assets/feedback-footer-no-text.jpg") center bottom/cover no-repeat;
  color:#fff;
  text-align:center;
}

.feedback-footer::before{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  top:-2%;
  height:30%;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    var(--feedback-bg) 0%,
    rgba(213,220,241,.92) 24%,
    rgba(213,220,241,.48) 60%,
    rgba(213,220,241,0) 100%
  );
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.feedback-footer p{
  position:relative;
  z-index:1;
  margin:0;
  font-size:1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}

@media(max-width:900px){
  .feedback-hero{
    min-height:320px;
    padding-top:34px;
  }

  .feedback-logo{
    width:min(360px,70vw);
    margin-bottom:26px;
  }

  .feedback-main{
    width:min(680px,88vw);
    padding-top:52px;
  }

  .feedback-main h1{
    margin-bottom:48px;
  }

  .feedback-columns{
    grid-template-columns:1fr;
    gap:24px;
  }

  .feedback-column h2:not(:first-child){
    margin-top:48px;
  }

  .feedback-portrait{
    margin-left:auto;
    margin-right:auto;
  }

  .feedback-footer{
    min-height:420px;
  }
}

.feedback-footer a{
  color:inherit;
  text-decoration:none;
}

.feedback-footer a:hover,
.feedback-footer a:focus-visible{
  text-decoration:underline;
}