.arley-page { --arley-width:1240px; }
.arley-page figure { margin:0; }
.arley-breadcrumbs { max-width:var(--arley-width); margin:auto; padding:1rem clamp(1.25rem,4vw,3.5rem); }
.arley-breadcrumbs .seo-breadcrumbs { display:flex; flex-wrap:wrap; gap:.65rem; margin:0; font-size:.875rem; }
.arley-hero { display:grid; grid-template-columns:1fr 1fr; position:relative; max-width:var(--arley-width); margin:auto; background:#111512; }
.arley-hero > img { width:100%; height:auto; display:block; }
.arley-hero-copy { align-self:center; padding:clamp(2rem,5vw,4rem); }
.arley-eyebrow { margin:0 0 1rem; color:#b9c4bb; font-size:.875rem; font-weight:700; letter-spacing:.07em; line-height:1.5; }
.arley-hero h1 { font-size:clamp(3.2rem,6.5vw,6rem); line-height:1.04; letter-spacing:-.045em; margin:0 0 1.5rem; }
.arley-hero-copy > p:last-child { font-size:clamp(1.125rem,1.8vw,1.5rem); color:#e0e7e1; line-height:1.6; margin:0; }
.arley-intro { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; max-width:var(--arley-width); margin:auto; padding:clamp(3rem,6vw,6rem) clamp(1.25rem,4vw,4rem); }
.arley-intro h2,.arley-history h2,.arley-section-heading h2 { font-size:clamp(2.2rem,3.5vw,3.5rem); line-height:1.1; letter-spacing:-.035em; margin:0; }
.arley-intro > p,.arley-history > div > p { margin:0; color:#ced5cf; font-size:1.0625rem; line-height:1.8; }
.arley-history { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:clamp(2rem,6vw,6rem); max-width:var(--arley-width); margin:auto; padding:0 clamp(1.25rem,4vw,4rem) clamp(3rem,6vw,6rem); }
.arley-history img { display:block; width:100%; height:auto; }
.arley-history h2 { margin-bottom:1.5rem; }
.arley-history > div > p + p { margin-top:1rem; }
.arley-history > div > .arley-eyebrow { font-size:.875rem; margin-bottom:1rem; }
.arley-history > div > .arley-sources { font-size:.875rem; color:#b9c4bb; margin-top:1.5rem; }
.arley-sources a { text-underline-offset:4px; }
.arley-page figure:not(.arley-wide) figcaption { padding-top:.8rem; color:#b9c4bb; font-size:.875rem; line-height:1.6; }
.arley-wide { position:relative; max-width:1480px; margin:0 auto !important; }
.arley-wide > img { display:block; width:100%; height:auto; }
.arley-wide figcaption { position:absolute; bottom:clamp(1rem,3vw,3rem); left:clamp(1rem,3vw,3rem); display:grid; max-width:29rem; padding:1.1rem 1.35rem; background:rgba(8,10,9,.83); border-left:3px solid #b9ce83; color:#fff; }
.arley-wide .arley-eyebrow { margin:0 0 .5rem; color:#d5dfd7; }
.arley-wide strong { font-size:clamp(1.6rem,2.5vw,2.6rem); line-height:1.1; letter-spacing:-.025em; }
.arley-wide figcaption > span:last-child { font-size:1rem; margin-top:.65rem; }
.arley-work,.arley-closeups { max-width:var(--arley-width); margin:auto; padding:clamp(3rem,6vw,6rem) clamp(1.25rem,4vw,4rem) 0; }
.arley-section-heading { margin-bottom:2rem; }
.arley-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,3rem); align-items:start; }
.arley-pair figure:nth-child(2) { margin-top:5rem; }
.arley-pair img,.arley-photo-strip img { width:100%; height:auto; display:block; }
.arley-photo-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.arley-photo-strip:focus-visible { outline:2px solid #b9ce83; outline-offset:6px; }
.arley-swipe { display:none; }
.arley-next { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; max-width:var(--arley-width); margin:auto; padding:3rem clamp(1.25rem,4vw,4rem); }
.arley-next a { font-size:1rem; text-underline-offset:5px; padding:.4rem 0; }
@media(max-width:700px) {
 .arley-hero { display:block; isolation:isolate; }
 .arley-hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.88)); }
 .arley-hero-copy { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:1.5rem 1.25rem; }
 .arley-hero .arley-eyebrow { color:#fff; margin-bottom:.6rem; }
 .arley-hero h1 { font-size:clamp(2.8rem,10vw,4.5rem); margin-bottom:.65rem; }
 .arley-hero-copy > p:last-child { font-size:1.125rem; color:#fff; }
 .arley-intro { grid-template-columns:1fr; gap:1.5rem; }
 .arley-history { grid-template-columns:1fr; gap:2rem; }
 .arley-history > div { grid-row:1; }
 .arley-history > figure { max-width:100%; }
 .arley-wide figcaption { position:static; max-width:none; padding:1.35rem 1.25rem; border-left:0; background:#171d19; }
 .arley-pair { grid-template-columns:1fr; gap:2rem; }
 .arley-pair figure:nth-child(2) { margin-top:0; }
 .arley-photo-strip { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 1rem; }
 .arley-photo-strip figure { flex:0 0 84%; min-width:0; scroll-snap-align:start; }
 .arley-swipe { display:block; font-size:.875rem; color:#b9c4bb; margin:1rem 0 0; }
 .arley-next { flex-direction:column; gap:.6rem; }
}
@media(max-width:360px) {
 .arley-hero-copy { position:relative; }
 .arley-hero::after { display:none; }
 .arley-hero > img { margin-top:.5rem; }
}

/* Latest roof access photographs retain their full original framing. */
.arley-update { max-width:var(--arley-width); margin:auto; padding:0 clamp(1.25rem,4vw,4rem) clamp(3rem,6vw,6rem); scroll-margin-top:8rem; }
.arley-update-copy { max-width:48rem; margin:1.25rem 0 0; color:#ced5cf; font-size:1.0625rem; line-height:1.8; }
.arley-update a { display:block; }
.arley-update a:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.arley-update img { display:block; width:100%; height:auto; }
.arley-update .arley-update-feature { margin-bottom:clamp(1.5rem,3vw,3rem); }
.arley-update .arley-pair figure:nth-child(2) { margin-top:0; }