/* AMPL pass 6: photos as stages, not blocks.
   Home Why as a full-width paper relief (6c), a full-bleed band with a statement (Home), a drafting relief behind
   the Practice heading (6c), and a wide stage behind the Services intro. People-free images only; a card covers
   the small printed sheet on the Services table.
   Shared finish: fine grain plus a light warm scrim toward the text. No stage colours on photos.
   Motion is transform/opacity only and is off under prefers-reduced-motion. */

:root{--ph-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --ph-shadow:0 34px 70px -34px #232f4780,0 10px 24px -14px #232f4740;
  --ph-warm:#f3e5d9}

/* ---------- 0. Home hero (6b): two equal lines, same words and styles; the brush edge fills with the next section ---------- */
.hero-two-line .hero-line2{display:block}
.hero-two-line .hero-line2>.display-lead,.hero-two-line .hero-line2>.display-tail{display:inline}
.photo-band + .sec{border-top:0}

/* ---------- 1. Home Why (6c): a full-width paper relief; the copy sits on the plain plaster of the image ----------
   No frame, no crop shape, no card. The wall colour runs edge to edge, the relief sits right, a soft light drifts
   across it and the image eases with the scroll (transform/opacity only). */
.why-relief{--wall:#e6e0d2;position:relative;isolation:isolate;overflow:clip;background:var(--wall);
  min-height:clamp(560px,52vw,760px);display:flex;align-items:center;padding-block:clamp(4rem,8vw,7rem)}
.why-relief>.wrap{position:relative;z-index:2;width:100%}
.why-relief__copy{max-width:min(27rem,40vw)}
.why-relief__copy .lede{margin:1.2rem 0 1.6rem}
.why-relief__art{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.why-relief__art picture{position:absolute;inset:-3% 0;display:block}
.why-relief__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:56% 48%}
/* keep the plaster behind the text calm on very wide screens, then grain */
.why-relief__art::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#e6e0d2 0%,#e6e0d200 9%),linear-gradient(90deg,#e6e0d2e6 0%,#e6e0d299 26%,#e6e0d200 42%)}
.why-relief__art::after{content:"";position:absolute;inset:0;z-index:3;opacity:.08;mix-blend-mode:overlay;background-image:var(--ph-grain)}
.why-relief__light{position:absolute;z-index:1;top:-30%;left:20%;width:70%;height:160%;opacity:.55;mix-blend-mode:soft-light;
  background:radial-gradient(closest-side,#fff6e2 0%,#fff6e200 100%)}
.sculpt-hero:has(+ .why-relief) .brush-edge--hero{fill:#e6e0d2}
.sculpt-hero + .why-relief + .stage-section{border-top:0}
@media(max-width:899px){
  .why-relief{display:block;min-height:0;padding-block:3.25rem 0}
  .why-relief__copy{max-width:none}
  .why-relief__art{position:relative;inset:auto;height:clamp(300px,86vw,420px);margin-top:1.5rem}
  .why-relief__art picture{inset:0}
  .why-relief__art img{object-position:74% 50%}
  .why-relief__art::before{background:linear-gradient(180deg,#e6e0d2 0%,#e6e0d200 30%)}
}

/* ---------- 1b. Practice (6b): a people-free mural as the section background ----------
   The heading sits on the plain plaster (left), the pull-quote bubble floats over the mural (right),
   and the photo dissolves into the page before the capability cards. */
.engage-photo{overflow:clip}
.engage-top{display:grid;gap:clamp(2rem,5vw,4.5rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.engage-top>.sec__head{margin:0;min-width:0}
.engage-photo--bg{position:relative;isolation:isolate;--eb-h:clamp(540px,46vw,700px)}
.engage-bg{position:absolute;left:0;right:0;top:0;height:var(--eb-h);z-index:-1;overflow:hidden;background:#e4d8c6}
.engage-bg picture{position:absolute;inset:0;display:block}
.engage-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.engage-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,var(--paper,#f8f5f0) 0%,#f8f5f000 32%),linear-gradient(90deg,#f8f5f0f0 0%,#f8f5f0c7 30%,#f8f5f033 54%,#f8f5f000 68%)}
.engage-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:var(--ph-grain)}
.engage-top--bg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;min-height:calc(var(--eb-h) - var(--pa-space,120px) - 2rem)}
.engage-top--bg>.sec__head{align-self:center}
.arch-quote{margin:0;
  padding:clamp(.85rem,1.6vw,1.2rem) clamp(1rem,2vw,1.5rem);border-radius:16px;border-left:3px solid var(--copper);
  font-family:var(--serif);font-style:italic;font-weight:450;font-size:clamp(1.02rem,1.45vw,1.28rem);line-height:1.38;letter-spacing:-.01em;color:#232f47;text-wrap:balance;
  background:#fbf8efe6;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  border-top:1px solid #ffffffb3;box-shadow:0 18px 36px -18px #232f4766,0 2px 6px -2px #232f4726}
.engage-quote{align-self:end;justify-self:end;max-width:24rem;margin-bottom:clamp(1rem,3vw,2.5rem)}

@media(max-width:899px){
  .engage-photo--bg{--eb-h:clamp(480px,128vw,560px)}
  .engage-bg img{object-position:72% 50%}
  .engage-bg::before{background:linear-gradient(0deg,var(--paper,#f8f5f0) 0%,#f8f5f000 26%),linear-gradient(180deg,#f8f5f0f7 0%,#f8f5f0ec 37%,#f8f5f066 47%,#f8f5f000 57%)}
  .engage-top--bg{grid-template-columns:minmax(0,1fr);gap:2rem;min-height:calc(var(--eb-h) - var(--pa-space,120px))}
  .engage-top--bg>.sec__head{align-self:start}
  .engage-quote{justify-self:stretch;max-width:none;margin-inline:.4rem;font-size:1rem}
}

/* ---------- 2. Home band: full bleed, statement on the plaster ---------- */
.photo-band{position:relative;margin:0;overflow:clip;isolation:isolate;height:clamp(320px,42vw,640px);background:#d9cbb6}
.photo-band picture{position:absolute;inset:0;display:block}
.photo-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* the page dissolves into the photo from the top: a warm scrim that carries the statement, plus grain */
.photo-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#f8f5f0eb 0%,#f8f5f0bd 17%,#f8f5f04d 32%,#f8f5f000 45%)}
.photo-band::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:var(--ph-grain)}
.photo-band__statement{position:absolute;z-index:3;left:0;right:0;top:clamp(1.9rem,5.4vw,4.8rem);margin:0;padding-inline:var(--gutter);text-align:center;
  max-width:none;font-family:var(--sans);font-weight:550;letter-spacing:-.045em;line-height:1.08;font-size:var(--pa-h2,2.6rem)!important;color:#232f47}
.photo-band__statement em{font-family:var(--serif);font-weight:450;letter-spacing:-.02em}
/* uneven brush stroke out of the band into the next section (6b) */
.photo-band>.brush-edge--band{bottom:-1px;height:56px;z-index:4;fill:var(--paper,#f8f5f0)}
@media(max-width:768px){
  .photo-band{height:clamp(300px,82vw,380px)}
  .photo-band img{object-position:60% 50%}
  .photo-band::before{background:linear-gradient(180deg,#f8f5f0f5 0%,#f8f5f0cc 24%,#f8f5f04d 42%,#f8f5f000 56%)}
  .photo-band>.brush-edge--band{height:30px}
  .photo-band__statement span,.photo-band__statement em{display:block}
}

/* ---------- 3. Services: a wide stage behind the intro ---------- */
.svc-stage{padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(2.2rem,4.5vw,3.4rem)}
.svc-stage .crumbs{margin-bottom:clamp(1rem,2vw,1.4rem)}
.svc-stage__photo{position:relative;margin:0;overflow:hidden;border-radius:28px;aspect-ratio:1100/500;background:#cdbda5;box-shadow:var(--ph-shadow);isolation:isolate;transform:translateZ(0)}
.svc-stage__photo picture{position:absolute;inset:0;display:block}
.svc-stage__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:28% 40%}
.svc-stage__photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#f3e5d966 0%,#f3e5d900 34%)}
.svc-stage__photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:var(--ph-grain)}
/* intro and diagnostic card rise over the floor and the table edges; the diagnostic card covers the small print on the right table */
.svc-stage__body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
  margin-top:calc(min(var(--wrap) - 2 * var(--gutter), 100vw - 2 * var(--gutter)) * -.105)}
.svc-stage__body>*{min-width:0}
.svc-stage__intro{margin-left:clamp(.75rem,2.4vw,2.25rem);padding:clamp(1.4rem,3vw,2.4rem);border-radius:22px;
  background:#fbf8efeb;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid #ffffffc0;box-shadow:0 26px 50px -28px #232f4773,0 4px 12px -6px #232f4726}
.svc-stage__intro .lede{max-width:34rem}
.svc-stage .service-guide{margin-right:clamp(.75rem,2.4vw,2.25rem);margin-top:0;box-shadow:0 26px 50px -28px #232f4773,inset 0 4px 0 var(--brand-gold)}
@media(max-width:768px){
  .svc-stage__photo{aspect-ratio:4/3;border-radius:20px}
  .svc-stage__photo img{object-position:62% 45%}
  .svc-stage__body{grid-template-columns:minmax(0,1fr);margin-top:-2.75rem;gap:1.25rem}
  .svc-stage__intro{margin-inline:.6rem;padding:1.3rem 1.25rem}
  .svc-stage .service-guide{margin:0}
}

/* ---------- 4. Motion (transform/opacity only; none under reduced motion) ---------- */
@media(prefers-reduced-motion:no-preference){
  /* the band settles from 1.04 to 1 as it enters */
  .elite-js .photo-band.elite-photo img{transform:scale(1.04);transition:opacity 1.1s ease,transform 2.4s cubic-bezier(.2,.7,.2,1)}
  .elite-js .photo-band.elite-photo.is-in img{transform:none}
  /* where supported, the band also eases with the scroll */
  @supports (animation-timeline:view()){
    .photo-band picture{animation:band-settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    @keyframes band-settle{from{transform:scale(1.05) translateY(-1.5%)}to{transform:none}}
  }
  /* Why: soft light drifts across the relief; the image eases with the scroll */
  .why-relief__light{animation:relief-light 22s ease-in-out infinite alternate}
  @keyframes relief-light{from{transform:translate(-18%,-4%)}to{transform:translate(22%,6%)}}
  @supports (animation-timeline:view()){
    .why-relief__art picture{animation:relief-ease linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes relief-ease{from{transform:translateY(-2.5%)}to{transform:translateY(2.5%)}}
  }
  .engage-quote{animation:ampl-bob 8s ease-in-out infinite alternate}
}