/* areas page extras */
.ahero .hero-ins{animation:pop 700ms 450ms var(--ease) both}
.rc blockquote{font-size:34px}
.area-note{text-align:center;margin:40px auto 0;font-size:18px;max-width:560px}
.f-img img{height:92%}

/* area cards: 2×2, less crop, real description under each */
.grid.area-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.area-card{padding:14px 14px 26px;gap:20px}
.area-card .rc-img{aspect-ratio:5/4}
.area-card .rc-img img.scene{object-position:50% 40%}
.area-card .rc-img img.photo{height:66%;width:auto;max-width:72%;object-fit:contain;margin-bottom:6%}
.area-card .rc-img img.photo.wide{height:auto;width:62%;margin-bottom:8%}
.area-c{padding:0 10px}
.area-k{margin:0 0 6px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.area-h{margin:0 0 8px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3vw,46px);line-height:1}
.area-c p:last-child{margin:0;font-size:18px;line-height:1.5}

/* how we work summary */
.hw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;background:var(--red);color:#fff;border-radius:44px;padding:clamp(28px,4.5vw,64px)}
.hw-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hw-head .h2{color:#fff}
.hw-head .lead{color:#fff3ea}
.hw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hw-step{display:flex;flex-direction:column;gap:6px;background:#fff8f2;color:var(--deep);border-radius:24px;padding:14px 16px 18px;transition:transform 400ms var(--spring)}
.hw-step:hover{transform:translateY(-6px) rotate(-1deg)}
.hw-step img{width:96px;height:auto;margin:-6px 0 0 -6px}
.hw-step b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1}
.hw-step span{font-size:16px;line-height:1.4;color:var(--muted)}

@media (max-width: 1024px){
  .hw{grid-template-columns:minmax(0,1fr)}
  .rv-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 810px){
  .grid.area-grid{grid-template-columns:minmax(0,1fr)}
  .hw{border-radius:28px}
  .hw-steps{grid-template-columns:minmax(0,1fr)}
  .hw-step{flex-direction:row;align-items:center;flex-wrap:wrap}
  .hw-step img{width:64px;margin:0}
  .hw-step b{flex:1}
  .hw-step span{flex-basis:100%}
}

/* area cards: fuller service details; on phones they sit behind a Read more toggle */
.area-c .area-p{margin:0;font-size:18px;line-height:1.5}
.area-more{display:grid;grid-template-rows:1fr}
.area-more-in{overflow:hidden;min-height:0}
.area-list{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:2px dashed rgba(17,17,17,.14);display:grid;gap:12px}
.area-list li{display:grid;gap:2px;padding-left:22px;position:relative}
.area-list li::before{content:'';position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;background:var(--red)}
.area-list b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:19px;letter-spacing:.02em;line-height:1.1}
.area-list span{font-size:16px;line-height:1.45;color:var(--muted)}
.area-note2{margin:16px 0 0;font-size:16px;line-height:1.5}
.area-book{margin-top:18px}
.area-toggle{display:none}
@media (max-width: 810px){
  .area-more{grid-template-rows:0fr;transition:grid-template-rows 500ms cubic-bezier(.22,1,.36,1)}
  .area-card.is-open .area-more{grid-template-rows:1fr}
  .area-more-in{opacity:0;transition:opacity 300ms ease}
  .area-card.is-open .area-more-in{opacity:1;transition-delay:120ms}
  .area-toggle{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 18px 10px 20px;border:2px solid var(--deep);border-radius:999px;
    background:transparent;color:var(--deep);font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
  .area-card.is-open .area-toggle{background:var(--deep);color:var(--cream)}
  .at-i{position:relative;width:12px;height:12px}
  .at-i::before,.at-i::after{content:'';position:absolute;left:0;top:5px;width:12px;height:2px;background:currentColor;border-radius:2px;transition:transform 300ms ease}
  .at-i::after{transform:rotate(90deg)}
  .area-card.is-open .at-i::after{transform:rotate(0)}
}
@media (prefers-reduced-motion: reduce){.area-more,.area-more-in{transition:none}}
@media (max-width: 810px){.area-more-in{visibility:hidden;transition:opacity 300ms ease,visibility 0s linear 500ms}.area-card.is-open .area-more-in{visibility:visible;transition:opacity 300ms ease 120ms,visibility 0s}}