.about{background:var(--navy);color:#fff;padding:150px 0;position:relative;overflow:hidden;}
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:76px;align-items:center;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:44px;}}
.about .eyebrow{color:var(--aegean-light);}
.about h2{color:#fff;font-size:clamp(28px,4vw,42px);margin-top:16px;font-style:italic;font-weight:400;}
.about p{margin-top:22px;color:rgba(255,255,255,0.78);line-height:1.85;font-size:16px;max-width:460px;}

/* a quiet, personal line beneath the main paragraph — the kind of
   thing a family says about their own place rather than marketing
   copy about it */
.about-note{
  margin-top:30px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,0.14);
  max-width:460px;
}
.about-note p{
  margin-top:0;font-family:var(--serif);font-style:italic;font-size:17px;
  color:#F1D9A8;line-height:1.7;
}

.about-media{
  position:relative;aspect-ratio:5/4;border-radius:2px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.5);
}
.about-media .ph{transition:transform 1.4s var(--ease-soft);}
.about-media:hover .ph{transform:scale(1.035);}

/* depth layer: a soft glow drifting behind the photo via parallax */
.about-depth{position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(241,217,168,0.18),transparent 70%);
  top:-120px;right:-120px;filter:blur(10px);pointer-events:none;}