/* ==========================================================================
   Stephanie Lawrence Psychotherapy — "Quiet Clifton"
   --------------------------------------------------------------------------
   A classical, well-kept consulting room: stone paper, sage, a brass hairline.
   Structure comes from base.css; this file sets colour, type and the layout
   personality of the homepage only.

   Order
     1  tokens
     2  type helpers
     3  preloader (drawn arch)
     4  header + navigation
     5  hero (full-bleed photograph)
     6  areas of work
     7  how I work
     8  about
     9  practicalities
    10  questions
    11  contact
    12  footer
    13  responsive
   ========================================================================== */

/* ------------------------------------------------------------------ 1 tokens */
:root{
  /* palette */
  --stone:      #efe9df;
  --paper:      #fbf9f5;
  --night:      #22221f;   /* ink, renamed so it never collides with base --ink */
  --sage:       #5c6f5a;
  --sage-deep:  #2f3d31;
  --brass:      #a8875a;
  --muted:      #6b655c;
  --body-text:  #3c3a34;

  /* base.css token mapping — this is a light page */
  --ink:        var(--paper);
  --ink-2:      var(--stone);
  --ink-3:      #ffffff;
  --surface:    var(--stone);
  --surface-2:  #e9e2d6;
  --text:       var(--night);
  --muted:      #6b655c;
  --ink-text:   var(--night);
  --ink-mute:   #635e54;
  --accent:     var(--sage);
  --accent-lit: #46543f;
  --accent-2:   var(--sage);
  --line:       rgba(34,34,31,.14);
  --line-d:     rgba(34,34,31,.10);

  /* type */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Mulish", system-ui, sans-serif;

  /* layout */
  --wrap-max: 1200px;
  --pad: clamp(1.15rem, 4.2vw, 3rem);
  --radius: 2px;
}

body{ font-size:17px; background:var(--paper); color:var(--night); }
::selection{ background:var(--sage); color:#fdfbf6; }
:focus-visible{ outline-color:var(--sage); }

section[id]{ scroll-margin-top:84px; }

/* skip link — visible only on keyboard focus */
.skip{
  position:absolute; left:1rem; top:-100px; z-index:1000;
  padding:.7rem 1rem;
  background:var(--sage-deep); color:#f7f3ea;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

/* ---------------------------------------------------------- 2 type helpers */
.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-body);
  font-size:.655rem; font-weight:700;
  letter-spacing:.235em; text-transform:uppercase;
  color:var(--sage);
}
.eyebrow::before{
  content:""; flex:none;
  width:clamp(18px,2.4vw,30px); height:1px;
  background:var(--brass);
}
.eyebrow--light{ color:#cfc3a9; }
.eyebrow--light::before{ background:var(--brass); }

.sect__h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.95rem, 3.5vw, 2.8rem);
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--night);
  text-wrap:balance;
}
.sect__lead,
.lead{ font-size:1.03rem; line-height:1.74; color:var(--body-text); }

.sect{ padding-block:clamp(3.8rem, 7vw, 6.4rem); }
.areas,.approach,.about,.faq,.contact{ border-top:1px solid var(--line-d); }

/* grid children must be allowed to shrink below their content width */
.areas__text,
.areas__intro > *,
.steps__item > div,
.about__body,
.faq__body,
.faq__list,
.contact__main,
.foot__brand{ min-width:0; }

/* ------------------------------------------------------- 3 preloader (arch) */
.pre{
  background:var(--stone);
  grid-template-rows:1fr auto auto;
}
.pre__mark{
  width:clamp(74px, 9vw, 104px);
  color:var(--sage);
  align-self:end;
  margin-bottom:clamp(1.4rem, 3vw, 2rem);
}
.pre__mark svg{ width:100%; height:auto; display:block; }
.pre__arch{
  stroke-dasharray:300; stroke-dashoffset:300;
  animation:arch-draw 1.5s cubic-bezier(.33,.1,.2,1) .12s forwards;
}
.pre__sill{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:arch-draw .7s cubic-bezier(.33,.1,.2,1) 1.15s forwards;
}
.pre__dot{ opacity:0; animation:fade-in .6s ease 1.5s forwards; }
@keyframes arch-draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }

.pre__meta{
  font-family:var(--font-body);
  font-size:.62rem; font-weight:600;
  letter-spacing:.24em;
  color:var(--muted);
  gap:1.1rem;
  padding-block:0 .9rem;
}
.pre__pct{ color:var(--sage-deep); font-variant-numeric:tabular-nums; }
.pre__track{
  width:min(240px, 58vw); height:1px;
  background:rgba(34,34,31,.16);
  overflow:hidden;
  margin-bottom:clamp(2rem, 6vh, 3.4rem);
}
.pre__bar{
  display:block; width:0; height:1px;
  background:var(--sage);
  transition:width .25s linear;
}
.pre__bar i{ display:none; }

/* ------------------------------------------------- 4 header + navigation */
.hdr{
  background:var(--paper);
  border-bottom:1px solid var(--line-d);
}
.hdr__in{ min-height:78px; gap:clamp(1rem,3vw,2rem); }
.hdr.is-scrolled{ box-shadow:0 12px 30px -24px rgba(34,34,31,.55); }

.brand{
  display:flex; align-items:center; gap:.72rem;
  flex-shrink:0;
}
.brand__mark{ width:22px; height:auto; color:var(--sage); flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.06; }
.brand__name{
  font-family:var(--font-display);
  font-size:1.02rem; letter-spacing:.005em; color:var(--night);
}
.brand__sub{
  font-family:var(--font-body);
  font-size:.55rem; font-weight:700;
  letter-spacing:.27em; text-transform:uppercase;
  color:var(--muted); margin-top:.28rem;
}

.nav__list{ gap:.05rem; }
.nav__link{
  position:relative;
  padding:.7rem .8rem;
  font-family:var(--font-body);
  font-size:.7rem; font-weight:700;
  letter-spacing:.165em; text-transform:uppercase;
  color:#3d3b34;
  border-radius:0;
}
.nav__link::after{
  content:""; position:absolute;
  left:.8rem; right:.8rem; bottom:.45rem;
  height:1px; background:var(--sage);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav__link:hover{ background:none; color:var(--sage-deep); }
.nav__link:hover::after{ transform:scaleX(1); }

.hdr__actions{ display:flex; align-items:center; gap:1rem; flex:none; }
.hdr__cta{
  padding:.74rem 1.05rem;
  font-family:var(--font-body);
  font-size:.66rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  border-radius:1px;
}
.hdr__cta:hover{ transform:translateY(-1px); }

/* ------------------------------------------------------------------ 5 hero */
.hero{
  position:relative;
  display:grid;
  align-items:center;
  min-height:calc(100vh - 78px);
  min-height:calc(100svh - 78px);
  padding-block:clamp(3rem, 7vh, 5rem);
  overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}
@supports (height:100dvh){
  .hero{ min-height:calc(100dvh - 78px); }
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:52% 48%;
  transform-origin:60% 50%;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(96deg,
      rgba(251,249,245,.98) 0%,
      rgba(251,249,245,.96) 26%,
      rgba(251,249,245,.88) 40%,
      rgba(251,249,245,.52) 56%,
      rgba(251,249,245,.14) 72%,
      rgba(251,249,245,0) 86%),
    linear-gradient(to bottom,
      rgba(251,249,245,.42) 0%,
      rgba(251,249,245,.06) 30%,
      rgba(34,34,31,.06) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9Jy4wNicvPjwvc3ZnPg==");
}
.hero__wrap{ position:relative; z-index:2; }
.hero__copy{ max-width:660px; }
@media (min-width:1024px){
  .hero__copy{ max-width:min(700px, 55vw); }
}

.hero__eyebrow{ margin-bottom:clamp(1.1rem, 2.4vh, 1.7rem); }

.hero__h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--h1-size, clamp(1.72rem, 5vw, 4.2rem));
  line-height:1.04;
  letter-spacing:-.018em;
  color:#20201c;
}
.hero__h1 .line{ padding-block:.09em; }
.hero__h1 .line > span{ display:inline-block; }

.hero__lead{
  margin-top:clamp(1.2rem, 2.6vh, 1.7rem);
  max-width:46ch;
  font-size:clamp(1.01rem, 1.35vw, 1.12rem);
  line-height:1.74;
  color:#3b3932;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(1.5rem, 3.2vh, 2.1rem);
}
.hero__cta .btn{
  font-family:var(--font-body);
  font-size:.68rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.92rem 1.35rem;
  border-radius:1px;
}
.hero__cta .btn svg{ transition:transform .25s var(--ease); }
.hero__cta .btn:hover svg{ transform:translateX(3px); }
.btn--ghost{ border:1px solid rgba(34,34,31,.28); color:#2c2b26; }
.btn--ghost:hover{ border-color:var(--sage); background:rgba(92,111,90,.06); color:var(--sage-deep); }

.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem 1.6rem;
  margin-top:clamp(1.7rem, 3.6vh, 2.4rem);
  padding-top:1.05rem;
  border-top:1px solid rgba(34,34,31,.18);
  font-size:.655rem; font-weight:700;
  letter-spacing:.155em; text-transform:uppercase;
  color:#4b483f;
}
.hero__trust li{ display:flex; align-items:center; }
.hero__trust li::before{
  content:""; width:5px; height:5px; flex:none;
  margin-right:.55rem;
  background:var(--brass);
  transform:rotate(45deg);
}

/* --------------------------------------------------------- 6 areas of work */
.areas{ background:var(--paper); }
.areas__head{ margin-bottom:clamp(2rem, 3.6vw, 2.9rem); }
.areas__intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.4rem, 4vw, 3.8rem);
  align-items:start;
  margin-top:1.15rem;
}
.areas__intro .sect__h2{ max-width:16ch; }
.areas__text{
  display:grid; gap:.95rem;
  font-size:1.01rem; line-height:1.74;
  color:var(--body-text);
  max-width:60ch;
}

.areas__list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(1.6rem, 3.6vw, 3.4rem);
  counter-reset:area;
  border-bottom:1px solid var(--line);
}
.areas__list li{
  counter-increment:area;
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  align-items:baseline;
  padding:.78rem 0 .72rem;
  border-top:1px solid var(--line);
  font-family:var(--font-display);
  font-size:1rem; line-height:1.32;
  color:#2b2a25;
  overflow-wrap:break-word;
}
.areas__list li::before{
  content:counter(area, decimal-leading-zero);
  font-family:var(--font-body);
  font-size:.6rem; font-weight:700;
  letter-spacing:.1em;
  color:var(--brass);
  padding-top:.1rem;
}

/* ------------------------------------------------------------ 7 how I work */
.approach{ background:var(--stone); }
.approach__in{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.approach__lead{
  margin-top:1.15rem;
  font-size:1.01rem; line-height:1.74;
  color:#3f3d36;
  max-width:40ch;
}
.approach__arch{
  width:clamp(88px, 10vw, 126px); height:auto;
  margin-top:clamp(1.6rem, 4vw, 2.6rem);
  color:var(--brass);
  opacity:.55;
}

.steps{
  border-top:1px solid rgba(34,34,31,.16);
}
.steps__item{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);
  gap:clamp(.6rem, 2vw, 1.4rem);
  padding:clamp(1.05rem, 2.2vw, 1.45rem) 0;
  border-bottom:1px solid rgba(34,34,31,.16);
}
.steps__num{
  font-family:var(--font-display);
  font-size:.8rem; letter-spacing:.06em;
  color:var(--brass);
  padding-top:.32rem;
}
.steps__h{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.04rem, 1.55vw, 1.2rem);
  line-height:1.34;
  color:var(--sage-deep);
  margin-bottom:.42rem;
}
.steps__item p{
  font-size:.97rem; line-height:1.68;
  color:#4a473f;
  max-width:52ch;
}

/* ------------------------------------------------------------------ 8 about */
.about{ background:var(--paper); }
.about__in{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem, 5vw, 4.6rem);
  align-items:start;
}
.about__plate{
  position:relative; margin:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(300px, 32vw, 420px);
  padding:clamp(1.5rem, 3vw, 2.1rem) clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.1rem, 2.2vw, 1.5rem);
  background:#f2ede3;
  border:1px solid rgba(34,34,31,.1);
}
.about__arch{
  position:absolute;
  top:clamp(.9rem, 2.2vw, 1.6rem); left:50%;
  transform:translateX(-50%);
  width:clamp(104px, 14vw, 158px);
  color:var(--brass); opacity:.6;
}
.about__plate-line{
  font-family:var(--font-display);
  font-size:clamp(1rem, 1.5vw, 1.16rem);
  line-height:1.58;
  color:var(--sage-deep);
  max-width:26ch;
  margin-bottom:1.5rem;
}
.about__plate figcaption{
  font-family:var(--font-body);
  font-size:.605rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted);
  padding-top:.85rem;
  border-top:1px solid rgba(34,34,31,.16);
}

.about__body .sect__h2{ margin-bottom:1.15rem; }
.about__lead{
  font-family:var(--font-display);
  font-size:clamp(1.03rem, 1.45vw, 1.14rem);
  line-height:1.62;
  color:#2f2e28;
  max-width:52ch;
  margin-bottom:1rem;
}
.about__body p{
  font-size:.99rem; line-height:1.74;
  color:#423f38;
  max-width:58ch;
  margin-bottom:.85rem;
}

.creds{
  margin-top:clamp(1.5rem, 3vw, 2.1rem);
  border-top:1px solid rgba(34,34,31,.16);
}
.creds__row{
  display:grid;
  grid-template-columns:minmax(0,8rem) minmax(0,1fr);
  gap:clamp(.4rem, 2vw, 1.4rem);
  padding:.72rem 0;
  border-bottom:1px solid rgba(34,34,31,.12);
}
.creds dt{
  font-family:var(--font-body);
  font-size:.605rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage);
  padding-top:.24rem;
}
.creds dd{
  font-size:.93rem; line-height:1.62;
  color:#3a3832;
}

/* -------------------------------------------------------- 9 practicalities */
.practical{
  background:var(--sage-deep);
  color:#f3efe6;
  border-top:0;
}
.practical__in{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 4.6rem);
  align-items:start;
}
.practical .sect__h2{ color:#f7f3ea; }
.practical__lead{
  margin-top:1.15rem;
  font-size:1rem; line-height:1.74;
  color:rgba(243,239,230,.8);
  max-width:38ch;
}
.practical__link{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:clamp(1.4rem, 3vw, 1.9rem);
  font-family:var(--font-body);
  font-size:.665rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:#e3cfa9;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(227,207,169,.42);
  transition:color .22s, border-color .22s;
}
.practical__link svg{ width:14px; height:14px; transition:transform .22s var(--ease); }
.practical__link:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
.practical__link:hover svg{ transform:translateX(3px); }

.facts{ border-top:1px solid rgba(243,239,230,.24); }
.facts__row{
  display:grid;
  grid-template-columns:minmax(0,8rem) minmax(0,1fr);
  gap:clamp(.4rem, 2vw, 1.4rem);
  padding:.88rem 0;
  border-bottom:1px solid rgba(243,239,230,.16);
}
.facts dt{
  font-family:var(--font-body);
  font-size:.605rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#c9ae82;
  padding-top:.26rem;
}
.facts dd{
  font-size:.96rem; line-height:1.68;
  color:rgba(247,243,234,.92);
  max-width:56ch;
}

/* -------------------------------------------------------------- 10 questions */
.faq{ background:var(--stone); }
.faq__in{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem, 5vw, 4.6rem);
  align-items:start;
}
.faq__lead{
  margin-top:1.15rem;
  font-size:.99rem; line-height:1.74;
  color:#44413a;
  max-width:36ch;
}
.faq__list{ border-top:1px solid rgba(34,34,31,.18); }
.faq__item{ border-bottom:1px solid rgba(34,34,31,.18); }
.faq__item summary{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.4rem;
  padding:1.2rem 0;
  cursor:pointer; list-style:none;
  font-family:var(--font-display);
  font-size:clamp(.99rem, 1.45vw, 1.1rem);
  line-height:1.42;
  color:#2a2924;
  transition:color .22s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--sage); }
.faq__sign{
  position:relative; flex:none;
  width:13px; height:13px; margin-top:.5rem;
}
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; left:0; top:50%;
  width:13px; height:1px;
  background:var(--brass);
  transition:transform .3s var(--ease), opacity .3s;
}
.faq__sign::after{ transform:rotate(90deg); }
details[open] .faq__sign::after{ transform:rotate(0deg); }
.faq__body{ padding:0 clamp(1rem,4vw,2.4rem) 1.45rem 0; }
.faq__body p{
  font-size:.98rem; line-height:1.78;
  color:#413e37;
  max-width:66ch;
}

/* ---------------------------------------------------------------- 11 contact */
.contact{ background:var(--paper); }
.contact__in{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem, 5vw, 4.6rem);
  align-items:start;
}
.contact__lead{
  margin-top:1.15rem;
  font-size:1rem; line-height:1.74;
  color:#403d36;
  max-width:44ch;
}
.contact__ways{
  margin-top:clamp(1.7rem, 3.4vw, 2.4rem);
  border-top:1px solid rgba(34,34,31,.18);
}
.contact__big{
  display:grid;
  grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);
  gap:clamp(.5rem,2vw,1rem);
  align-items:baseline;
  padding:1rem 0;
  border-bottom:1px solid rgba(34,34,31,.18);
}
.contact__big-label{
  font-family:var(--font-body);
  font-size:.605rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage);
}
.contact__big-value{
  font-family:var(--font-display);
  font-size:clamp(1.18rem, 2.2vw, 1.62rem);
  line-height:1.24;
  color:#26251f;
  overflow-wrap:anywhere;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px;
  background-position:0 calc(100% - .06em);
  background-repeat:no-repeat;
  transition:background-size .4s var(--ease), color .25s;
}
.contact__big:hover .contact__big-value{
  color:var(--sage-deep);
  background-size:100% 1px;
}

.contact__card{
  background:var(--stone);
  border:1px solid rgba(34,34,31,.1);
  padding:clamp(1.4rem, 2.8vw, 2.1rem);
}
.contact__card-h{
  font-family:var(--font-display);
  font-weight:400; font-size:1.04rem;
  color:var(--sage-deep);
  padding-bottom:.85rem; margin-bottom:1rem;
  border-bottom:1px solid rgba(34,34,31,.16);
}
.contact__address{
  font-size:1rem; line-height:1.72;
  color:#3a3832;
}
.contact__map{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.15rem;
  font-family:var(--font-body);
  font-size:.645rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage);
  padding-bottom:.3rem;
  border-bottom:1px solid rgba(92,111,90,.36);
  transition:color .2s, border-color .2s;
}
.contact__map svg{ width:12px; height:12px; transition:transform .2s var(--ease); }
.contact__map:hover{ color:var(--sage-deep); border-color:var(--sage); }
.contact__map:hover svg{ transform:translate(2px,-2px); }
.contact__note{
  margin-top:1.4rem; padding-top:1rem;
  border-top:1px solid rgba(34,34,31,.14);
  font-size:.855rem; line-height:1.68;
  color:#5a574e;
}

/* ----------------------------------------------------------------- 12 footer */
.foot{
  background:#1f201d;
  color:#f2ede2;
  border-top:0;
  padding-block:clamp(2.8rem, 5vw, 3.8rem) 1.3rem;
}
.foot__top{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.4fr);
  gap:clamp(2rem, 5vw, 4rem);
  border-bottom-color:rgba(242,237,226,.16);
}
.brand--foot .brand__mark{ color:#c0a47a; }
.brand--foot .brand__name{ color:#f5f1e6; font-size:1.08rem; }
.brand--foot .brand__sub{ color:rgba(245,241,230,.5); }
.foot__blurb{
  margin-top:1.15rem;
  font-size:.87rem; line-height:1.7;
  color:rgba(245,241,230,.62);
  max-width:34ch;
}
.foot .foot__h{ color:rgba(245,241,230,.44); }
.foot__nav ul{ display:grid; gap:.5rem; }
.foot__nav a{
  font-size:.85rem; line-height:1.5;
  color:rgba(245,241,230,.82);
  transition:color .18s;
  overflow-wrap:anywhere;
}
.foot__nav a:hover{ color:#e3cfa9; }
.foot__nav li{
  font-size:.85rem; line-height:1.55;
  color:rgba(245,241,230,.66);
  overflow-wrap:anywhere;
}
.foot__bottom{
  font-family:var(--font-body);
  font-size:.66rem; font-weight:500;
  letter-spacing:.08em;
  color:rgba(245,241,230,.4);
  border-top:0;
}

/* ------------------------------------------------------------- 13 responsive */
@media (max-width:1180px){
  .nav__link{ padding:.7rem .62rem; font-size:.66rem; }
  .nav__link::after{ left:.62rem; right:.62rem; }
}

@media (max-width:1023px){
  .hero{ min-height:calc(100vh - 68px); min-height:calc(100svh - 68px); }
  @supports (height:100dvh){
    .hero{ min-height:calc(100dvh - 68px); }
  }
  .areas__intro{ grid-template-columns:minmax(0,1fr); gap:1.1rem; }
  .areas__intro .sect__h2{ max-width:22ch; }
  .areas__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }

  .approach__in,
  .about__in,
  .practical__in,
  .faq__in,
  .contact__in{ grid-template-columns:minmax(0,1fr); }

  .approach__arch{ display:none; }
  .about__plate{ max-width:520px; }
  .contact__card{ max-width:520px; }

  /* mobile overlay: serif menu, no uppercase tracking */
  .nav{
    background:var(--paper);
    padding:1.1rem var(--pad) 2rem;
  }
  .nav__link{
    font-family:var(--font-display);
    font-size:1.22rem; font-weight:400;
    letter-spacing:0; text-transform:none;
    color:#2a2924;
    padding:1.05rem .1rem;
  }
  .nav__link::after{ display:none; }
  .nav__head{ border-bottom:1px solid var(--line); }
  .nav__headlabel{
    font-family:var(--font-body);
    font-size:.6rem; font-weight:700;
    letter-spacing:.24em; color:var(--muted);
  }
  .nav__close{
    border:1px solid var(--line);
    border-radius:50%; color:var(--night);
  }
  .nav__foot{
    display:grid; gap:.55rem;
    padding-top:1.6rem;
    font-family:var(--font-body);
    font-size:.9rem; color:var(--muted);
  }
  .nav__foot a{ color:var(--sage-deep); }
  .nav__foot a[href^="mailto"]{ overflow-wrap:anywhere; }
}

@media (max-width:860px){
  /* hero stacks: the sentence first, then the photograph as a full-bleed band */
  .hero{
    display:flex; flex-direction:column;
    min-height:0;
    padding-block:clamp(2.4rem, 6vw, 3.4rem) 0;
  }
  .hero__wrap{ order:1; }
  .hero__veil{ display:none; }
  .hero__media{
    position:relative; inset:auto; z-index:0;
    order:2;
    height:clamp(220px, 34vh, 340px);
    height:clamp(220px, 34svh, 340px);
    margin-top:clamp(2rem, 6vw, 2.8rem);
    width:100%;
  }
  .hero__img{ object-position:44% 52%; }
  .hero::after{ display:none; }
  .hero__copy{ max-width:none; }
  .hero__trust{ margin-top:1.5rem; }
}

@media (max-width:640px){
  .hdr__cta{ display:none; }
  .brand__name{ font-size:.94rem; }
  .brand__sub{ font-size:.5rem; letter-spacing:.24em; }
  .areas__list{ grid-template-columns:minmax(0,1fr); }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .contact__big{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .contact__big-value{ font-size:1.14rem; }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:560px){
  .creds__row,
  .facts__row{ grid-template-columns:minmax(0,1fr); gap:.24rem; }
  .creds dt,.facts dt{ padding-top:0; }
  .steps__item{ grid-template-columns:1.7rem minmax(0,1fr); }
  .about__plate{ min-height:280px; }
}

@media (prefers-reduced-motion: reduce){
  .pre__arch,.pre__sill,.pre__dot{ animation:none; stroke-dashoffset:0; opacity:1; }
  .hero__img{ transform:none; }
}