:root {
  --green: #073f34;
  --green-dark: #032f28;
  --green-soft: #315e52;
  --gold: #b98534;
  --gold-light: #d4ad68;
  --cream: #f7efe2;
  --cream-deep: #efe0c9;
  --ink: #123f36;
  --muted: #6f756e;
  --line: rgba(185,133,52,.42);
  --shadow: 0 24px 70px rgba(48,38,21,.11);
}
* { box-sizing: border-box; }
html { scroll-behaviour: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #e9dcc9;
  font-family: Manrope, system-ui, sans-serif;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(rgba(112,83,41,.18) .55px, transparent .55px);
  background-size: 5px 5px;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--green); color: #fff; padding: .7rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-shell {
  width: min(1680px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(185,133,52,.08) 1px, transparent 1px) 0 0/72px 72px,
    var(--cream);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
}
.corner { position: absolute; top: 0; width: 170px; height: 170px; opacity: .32; pointer-events: none; }
.corner::before, .corner::after { content: ""; position: absolute; border: 1px solid var(--gold); border-radius: 50%; }
.corner::before { width: 230px; height: 230px; top: -100px; }
.corner::after { width: 185px; height: 185px; top: -80px; }
.corner--left { left: 0; }
.corner--left::before, .corner--left::after { left: -105px; }
.corner--right { right: 0; transform: scaleX(-1); }
.corner--right::before, .corner--right::after { left: -105px; }
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.2rem 4vw .15rem;
}
.brand { width: min(530px, 46vw); overflow: hidden; }
.brand img { width: 100%; transform: scale(1.03); mix-blend-mode: multiply; }
.domain {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding-left: 2.3rem;
  border-left: 1px solid var(--gold-light);
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: .02em;
}
.globe { color: var(--gold); font-family: serif; font-size: 1.55em; }
.hero {
  min-height: 590px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(560px,760px) minmax(160px,.35fr);
  align-items: center;
  padding: .3rem 4vw 1.8rem;
}
.scenic { position: absolute; pointer-events: none; mix-blend-mode: multiply; }
.scenic--left { left: 0; bottom: 0; width: min(620px, 42vw); z-index: 0; }
.scenic--right { right: 0; bottom: 0; width: min(390px, 25vw); opacity: .33; z-index: 0; }
.hero-content { grid-column: 2; position: relative; z-index: 3; text-align: center; max-width: 760px; width: 100%; justify-self: center; }
.sprout { display: inline-block; color: var(--gold); font-size: 2rem; transform: rotate(-10deg); margin-bottom: -.7rem; }
h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 6vw, 6.7rem);
  line-height: .82;
  font-weight: 600;
  letter-spacing: -.035em;
}
h1 em { color: var(--gold); font-style: normal; font-weight: 600; }
.intro { max-width: 720px; margin: 1.35rem auto 1rem; font-size: clamp(1rem, 1.25vw, 1.22rem); line-height: 1.7; }
.intro strong { color: var(--gold); font-weight: 700; }
.topics { display: flex; justify-content: center; align-items: center; gap: .9rem; text-transform: uppercase; font-size: .78rem; letter-spacing: .26em; font-weight: 700; margin: 1rem 0 1.35rem; }
.topics i { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.tagline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 570px; margin: 0 auto 1rem; }
.tagline .line { height: 1px; background: var(--line); }
.world { margin: 0 1rem; color: var(--gold); font-size: 1.65rem; }
.tagline p { grid-column: 1/-1; margin: .35rem 0 0; text-transform: uppercase; letter-spacing: .14em; font-family: "Cormorant Garamond", serif; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 600; }
.tagline .urdu { font-family: "Noto Nastaliq Urdu", serif; text-transform: none; letter-spacing: 0; font-size: clamp(1.35rem, 2vw, 2rem); margin-top: -.1rem; }
.signup { max-width: 590px; margin: .65rem auto 0; }
.signup-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; min-height: 58px; border: 1.4px solid var(--gold); background: rgba(255,250,242,.84); border-radius: 12px; overflow: hidden; box-shadow: 0 9px 28px rgba(62,45,20,.08); }
.mail { color: var(--gold); font-size: 1.3rem; }
.signup input[type="email"] { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 .4rem; color: var(--ink); }
.signup input[type="email"]::placeholder { color: #8b8b82; }
.signup button { align-self: stretch; min-width: 180px; border: 0; cursor: pointer; background: var(--green); color: #fff9ed; padding: 0 1.45rem; display: flex; align-items: center; justify-content: center; gap: .7rem; font-family: "Cormorant Garamond", serif; font-size: 1.3rem; transition: transform .2s ease, background .2s ease; }
.signup button:hover { background: var(--green-dark); }
.signup button:active { transform: translateY(1px); }
.signup button[disabled] { opacity: .65; cursor: wait; }
.consent { display: flex; justify-content: center; align-items: flex-start; gap: .5rem; margin: .8rem auto 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.consent input { accent-color: var(--green); margin-top: .18rem; }
.form-status { min-height: 1.4em; margin: .45rem 0 0; font-size: .82rem; font-weight: 700; }
.form-status.success { color: var(--green); }
.form-status.error { color: #a13d2c; }
.promise { grid-column: 3; position: relative; z-index: 2; width: min(210px, 100%); justify-self: end; text-align: center; padding: 2rem 1.4rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-family: "Cormorant Garamond", serif; font-size: 1.15rem; line-height: 1.42; }
.promise::before { content:""; position:absolute; inset:-30px -22px; border: 1px solid rgba(185,133,52,.23); border-radius: 48% 48% 10% 10%; pointer-events:none; }
.promise-icon { color: var(--green); font-size: 2rem; }
.ornament { color: var(--gold); }
.pillars {
  position: relative;
  z-index: 4;
  width: min(1000px, 62vw);
  margin: -1.2rem 6vw 2.2rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(249,241,229,.94);
  border: 1px solid rgba(185,133,52,.5);
  border-radius: 15px;
  box-shadow: 0 14px 40px rgba(68,49,23,.08);
  overflow: hidden;
}
.pillar { min-height: 120px; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: .65rem; padding: 1.25rem 1rem; position: relative; }
.pillar + .pillar { border-left: 1px solid rgba(185,133,52,.32); }
.pillar h2 { margin: 0 0 .35rem; font-family: "Cormorant Garamond", serif; font-size: 1.55rem; font-weight: 600; }
.pillar p { margin: 0; font-family: "Cormorant Garamond", serif; font-size: .95rem; line-height: 1.35; }
.pillar-icon svg { width: 45px; height: 45px; fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon--gold svg { stroke: var(--gold); }
.site-footer { min-height: 94px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1rem 8vw; color: #e6bd72; background: var(--green); border-top: 3px solid var(--gold); position: relative; z-index: 5; }
.site-footer::before { content:""; position:absolute; inset:0; opacity:.08; background-image: repeating-linear-gradient(45deg, transparent 0 12px, #fff 12px 13px), repeating-linear-gradient(-45deg, transparent 0 12px, #fff 12px 13px); }
.site-footer > * { position: relative; z-index: 1; }
.site-footer > a { justify-self: start; text-decoration: none; font-family: "Cormorant Garamond", serif; font-size: 1.6rem; }
.site-footer nav { display: flex; gap: 1.25rem; }
.site-footer nav a { width: 44px; height: 44px; border: 1px solid var(--gold-light); border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-weight: 700; }
.site-footer nav a:hover { background: rgba(255,255,255,.08); }
.site-footer p { justify-self: end; margin: 0; text-transform: uppercase; letter-spacing: .16em; font-family: "Cormorant Garamond", serif; font-size: 1.3rem; }
@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, .45fr) minmax(520px, 1fr); padding-right: 5vw; }
  .hero-content { grid-column: 2; }
  .promise { display: none; }
  .scenic--left { width: 48vw; left: -6vw; }
  .scenic--right { display: none; }
  .pillars { width: min(930px, 86vw); margin-right: 5vw; }
}
@media (max-width: 820px) {
  .page-shell { border-top-width: 2px; }
  .site-header { flex-direction: column; gap: .2rem; padding-top: 1rem; }
  .brand { width: min(600px, 90vw); }
  .domain { border-left: 0; border-top: 1px solid var(--line); padding: .45rem 1.4rem 0; font-size: 1.35rem; }
  .hero { display: block; min-height: auto; padding: 1.5rem 1.2rem 0; }
  .hero-content { max-width: 700px; margin: 0 auto; }
  h1 { font-size: clamp(3.45rem, 13vw, 5.8rem); }
  .intro { font-size: .98rem; }
  .scenic--left { position: relative; width: 108%; max-width: none; left: -17%; bottom: auto; margin: -1.2rem 0 -4.4rem; opacity: .82; }
  .pillars { width: calc(100% - 2rem); margin: 0 1rem 1.3rem; grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(3) { border-left: 0; border-top: 1px solid rgba(185,133,52,.32); }
  .pillar:nth-child(4) { border-top: 1px solid rgba(185,133,52,.32); }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; padding: 1.5rem; }
  .site-footer > a, .site-footer p { justify-self: center; }
}
@media (max-width: 560px) {
  .corner { display: none; }
  .brand { width: 102vw; margin-left: -1vw; }
  .site-header { padding-inline: .2rem; }
  .domain { font-size: 1.1rem; }
  .hero { padding-top: 1rem; }
  .sprout { font-size: 1.4rem; }
  h1 { font-size: clamp(3rem, 16vw, 4.4rem); }
  .topics { flex-wrap: wrap; row-gap: .45rem; letter-spacing: .16em; font-size: .7rem; }
  .tagline p { font-size: 1.18rem; }
  .signup-row { grid-template-columns: 38px 1fr; border-radius: 11px; }
  .signup button { grid-column: 1/-1; min-height: 50px; width: 100%; }
  .consent { text-align: left; font-size: .68rem; }
  .scenic--left { width: 130%; left: -28%; margin-top: -.3rem; margin-bottom: -3rem; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 105px; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid rgba(185,133,52,.32); }
  .site-footer nav { gap: .65rem; }
  .site-footer nav a { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sprout { animation: float 4s ease-in-out infinite; }
  .scenic--left { animation: reveal 1.1s ease-out both; }
  @keyframes float { 50% { transform: translateY(-5px) rotate(-8deg); } }
  @keyframes reveal { from { opacity: 0; transform: translateX(-24px); } }
}