/* The continuation is scoped to protect the completed hero and header.
   Grid, type and buttons are derived from the hero (1920 × 1056 canvas, scaled by viewport width).
   Every section is sized to fit one screen: heights use svh so short laptops still see a whole block.

   Spacing scale — the only spacing values used below:
   --sp-1  label → title (caption → heading, value → label)
   --sp-2  title → text, text → text, items in a list
   --sp-3  text → button / next group (buttons sit one step further from text)
   --sp-4  section heading → section content
   --pe-card-pad   every card: equal padding on all sides, and the same inset from a photo edge
   --pe-grid-gap   gap between photos and cards in a row or grid
   --pe-gutter     page margin and gap between two columns (hero content inset) */
.pe-continuation { --pe-blue:#039ae1; --pe-blue-hover:#0286c4; --pe-accent:#39b9ed; --pe-ink:#101923; --pe-muted:#536776; --pe-soft:#c3ced6; --pe-line:#d9e8f0;
  --pe-gutter:4.53125vw; --pe-edge:.885417vw; --pe-radius:1.041667vw; --pe-radius-sm:.729167vw;
  --sp-1:clamp(8px,.52vw,10px); --sp-2:clamp(12px,.83vw,16px); --sp-3:clamp(24px,min(1.67vw,3.4svh),32px); --sp-4:clamp(28px,min(2.5vw,5svh),48px);
  --pe-card-pad:clamp(20px,1.67vw,32px); --pe-grid-gap:clamp(12px,1.04vw,20px);
  --pe-pad:clamp(40px,min(6.25vw,9svh),120px);
  --pe-panel-x:calc(var(--pe-gutter) - var(--pe-edge));
  --pe-btn-h:3.854167vw; --pe-btn-fs:.729167vw; --pe-btn-px:2.1875vw; --pe-btn-gap:1.041667vw; --pe-btn-icon:.9375vw;
  --pe-ease:cubic-bezier(.16,1,.3,1);
  overflow-x:clip; color:var(--pe-ink); background:#fff; font-family:'IBM Plex Sans',Arial,sans-serif; font-weight:400; font-size:clamp(15px,min(1.05vw,2svh),19px); line-height:1.55; font-feature-settings:'kern','liga'; }
.pe-continuation h2,.pe-continuation h3,.pe-continuation p,.pe-continuation figure,.pe-continuation address,.pe-continuation blockquote { margin:0; }
.pe-continuation h2 { font:800 clamp(28px,min(2.916667vw,5.2svh),56px)/1.12 'Archivo',sans-serif; text-transform:uppercase; letter-spacing:0; }
.pe-continuation h2 em { font-style:normal; color:var(--pe-blue); }
.pe-continuation h3 { font:700 clamp(18px,min(1.25vw,2.6svh),24px)/1.2 'Archivo',sans-serif; letter-spacing:-.01em; }
.pe-continuation p { text-wrap:pretty; }
.pe-continuation :focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.pe-continuation [id] { scroll-margin-top:var(--strip-h,0px); } /* anchors land below the pinned strip */
.pe-continuation .pe-button:focus-visible { outline:3px solid #003e60; outline-offset:4px; }

/* ---------- Layout ---------- */
.pe-wrap { --pe-inset:var(--pe-gutter); padding-inline:var(--pe-inset); width:100%; }
.pe-section { padding-block:var(--pe-pad); }
.pe-screen { min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
/* Tinted panels sit in the same inset, rounded frame as the hero photo; content keeps the hero text line. */
.pe-dark,.pe-gray,.pe-night { margin:var(--pe-edge); border-radius:var(--pe-radius); }
.pe-dark.pe-screen,.pe-gray.pe-screen,.pe-night.pe-screen { min-height:calc(var(--pe-view,100svh) - 2 * var(--pe-edge)); }
.pe-dark .pe-wrap,.pe-gray .pe-wrap,.pe-night .pe-wrap,.pe-footer .pe-wrap { --pe-inset:var(--pe-panel-x); }
.pe-gray { --pe-line:#c9dce8; background:#eaf4fa; }
/* All text on blue is white. */
.pe-dark { --pe-muted:#ffffffd9; --pe-line:#ffffff59; --pe-soft:#ffffff66; background:var(--pe-blue); color:#fff; }
.pe-dark h2,.pe-dark h3,.pe-dark .pe-caption,.pe-dark a:not(.pe-button) { color:#fff; }
.pe-dark h2 em { color:#fff; }
.pe-dark .pe-caption { opacity:.85; }
/* Emergency panel: near-black like the footer, blue accents and a blue call button. */
.pe-night { --pe-muted:#ffffffb3; --pe-line:#ffffff26; --pe-soft:#ffffff4d; background:#0b141c; color:#fff; }
.pe-night h2,.pe-night h3,.pe-night a:not(.pe-button) { color:#fff; }
.pe-night h2 em,.pe-night .pe-caption,.pe-night .pe-stats strong { color:var(--pe-accent); }

/* One vertical rhythm for every text column and card. */
.pe-stack { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); min-width:0; }
.pe-stack>.pe-caption { margin-bottom:calc(var(--sp-1) - var(--sp-2)); }
.pe-stack>:is(.pe-actions,.pe-cta,.pe-button,.pe-stats,.pe-facts,.pe-contact-lines,.pe-map,.pe-reviews-controls) { margin-top:calc(var(--sp-3) - var(--sp-2)); }

.pe-section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--pe-gutter); align-items:end; margin-bottom:var(--sp-4); }
.pe-section-heading>.pe-caption { grid-column:1; grid-row:1; margin-bottom:var(--sp-1); }
.pe-section-heading>h2 { grid-column:1; grid-row:2; }
.pe-heading-aside { grid-column:2; grid-row:2; }
.pe-caption { color:#0077ad; font:700 clamp(10px,.625vw,12px)/1.4 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.06em; }
.pe-lead { color:var(--pe-muted); max-width:34em; }
.pe-note { font-size:13px; line-height:1.5; color:var(--pe-muted); }
.pe-num { font:700 12px/1 'Geist Mono',monospace; letter-spacing:.04em; color:var(--pe-blue); }
.pe-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }

/* ---------- Buttons: same shape, size, type and shadow as .hero-button ---------- */
.pe-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--pe-btn-gap); min-height:max(48px,var(--pe-btn-h)); padding:0 max(22px,var(--pe-btn-px)); border:0; border-radius:999px; font:700 max(10px,var(--pe-btn-fs))/1.3 'Archivo',sans-serif; color:#fff; background:#000; text-transform:uppercase; white-space:nowrap; box-shadow:0 5px 16px #0b1b2a30,0 1px 3px #0b1b2a24; text-align:center; transition:background .2s,box-shadow .2s,transform .2s,color .2s; text-decoration:none; }
.pe-button:hover { color:#fff; background:#17242d; box-shadow:0 8px 22px #0b1b2a40,0 2px 4px #0b1b2a24; transform:translateY(-2px); }
.pe-button:active { transform:translateY(0); }
.pe-button:disabled { cursor:default; opacity:.4; box-shadow:none; transform:none; }
.pe-button--call { background:var(--pe-blue); }
.pe-button--call:hover { background:var(--pe-blue-hover); }
.pe-button--call::before { content:''; width:max(14px,var(--pe-btn-icon)); height:max(14px,var(--pe-btn-icon)); flex-shrink:0; background:url('/assets/phone.svg') center/contain no-repeat; }
.pe-button--ghost { background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; color:inherit; }
.pe-button--ghost:hover { background:#fff; color:var(--pe-ink); box-shadow:inset 0 0 0 1.5px #fff; }
.pe-dark .pe-button,.pe-dark .pe-button--call { background:#000; }
.pe-dark .pe-button:hover { background:#17242d; }
.pe-dark .pe-button--ghost { background:transparent; color:#fff; }
.pe-dark .pe-button--ghost:hover { background:#fff; color:var(--pe-ink); }
/* A soft repeating ring draws the eye to the emergency call. */
.pe-button--pulse { position:relative; }
.pe-button--pulse::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 2px var(--pe-accent); opacity:0; animation:pe-pulse 2.4s ease-out infinite; pointer-events:none; }
@keyframes pe-pulse { 0% { transform:scale(1); opacity:.9; } 70%,100% { transform:scale(1.18,1.45); opacity:0; } }
/* Round arrow buttons for carousels and the photo viewer. */
.pe-arrow { display:inline-grid; place-items:center; width:max(44px,2.916667vw); height:max(44px,2.916667vw); flex-shrink:0; border:1.5px solid currentColor; border-radius:50%; background:transparent; color:var(--pe-ink); padding:0; transition:background .2s,color .2s,border-color .2s,opacity .2s,transform .2s; }
.pe-arrow svg { width:42%; height:42%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pe-arrow:hover:not(:disabled) { background:var(--pe-ink); border-color:var(--pe-ink); color:#fff; }
.pe-arrow:disabled { opacity:.3; cursor:default; }

/* ---------- Photo frames and the hero-style entrance ---------- */
.pe-frame { position:relative; overflow:hidden; border-radius:var(--pe-radius-sm); background:#dfeef7; isolation:isolate; }
.pe-frame>img { display:block; width:100%; height:100%; object-fit:cover; }
.pe-tiles { position:absolute; inset:0; z-index:3; pointer-events:none; }
.pe-tiles i { position:absolute; display:block; background:var(--pe-blue); }
/* Before a scene plays, photos wait under solid brand blue (like the hero) and groups wait offstage. */
html.pe-motion [data-pixel]:not(.pe-pixel-done)::after { content:''; position:absolute; inset:0; z-index:3; background:var(--pe-blue); }
html.pe-motion [data-enter] { opacity:0; transform:translate3d(var(--pe-x,0),var(--pe-y,0),0); transition:opacity .78s var(--pe-ease),transform .78s var(--pe-ease); transition-delay:calc(var(--pe-delay,320ms) + var(--i,0) * 110ms); }
html.pe-motion [data-enter=left] { --pe-x:-56px; }
html.pe-motion [data-enter=right] { --pe-x:56px; }
html.pe-motion [data-enter=up] { --pe-y:36px; --pe-delay:520ms; }
html.pe-motion .is-in [data-enter] { opacity:1; transform:none; }
html.pe-motion .is-done [data-enter] { transition:none; }

/* ---------- 1. Services: list + photo stage with pixel swaps ---------- */
.pe-services { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--pe-gutter); height:clamp(340px,calc(var(--pe-view,100svh) - 330px),660px); }
.pe-service-list { display:flex; flex-direction:column; }
.pe-service-list [role=tab] { position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:var(--sp-2); align-items:baseline; flex:1 1 auto; align-content:center; width:100%; padding:min(var(--sp-2),1.9svh) 0; border:0; border-bottom:1px solid var(--pe-line); background:none; text-align:left; color:#8d9ba6; transition:color .3s; }
.pe-service-list [role=tab]:first-child { border-top:1px solid var(--pe-line); }
.pe-service-name { font:700 clamp(17px,min(1.6vw,3.1svh),30px)/1.2 'Archivo',sans-serif; letter-spacing:-.01em; transition:transform .35s var(--pe-ease); }
/* One short line expands under the active service (max-height on purpose: a single small text block). */
.pe-service-desc { grid-column:2; overflow:hidden; max-height:0; opacity:0; font-size:clamp(14px,.9vw,17px); line-height:1.5; color:var(--pe-muted); transition:max-height .5s var(--pe-ease),opacity .4s; }
.pe-service-list [role=tab]:hover { color:var(--pe-ink); }
.pe-service-list [role=tab]:hover .pe-service-name { transform:translateX(6px); }
.pe-service-list [aria-selected=true] { color:var(--pe-ink); }
.pe-service-list [aria-selected=true] .pe-service-desc { max-height:5em; opacity:1; }
.pe-service-list [aria-selected=true] .pe-service-desc::before { content:''; display:block; height:var(--sp-1); }
.pe-service-list .pe-num { color:inherit; }
.pe-service-list [aria-selected=true] .pe-num { color:var(--pe-blue); }
.pe-progress { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--pe-blue); transform:scaleX(0); transform-origin:left; }
.pe-service-list [aria-selected=true] .pe-progress { transform:scaleX(1); }
.pe-services.is-playing [aria-selected=true] .pe-progress { transform:scaleX(0); animation:pe-progress var(--pe-cycle,6s) linear forwards; }
.pe-services.is-playing:is(:hover,:focus-within) .pe-progress { animation-play-state:paused; }
@keyframes pe-progress { to { transform:scaleX(1); } }
.pe-service-stage { position:relative; min-height:0; }
.pe-service-photo { height:100%; border-radius:var(--pe-radius); }
.pe-service-card { position:absolute; z-index:4; left:var(--pe-card-pad); bottom:var(--pe-card-pad); width:min(440px,calc(100% - 2 * var(--pe-card-pad))); padding:var(--pe-card-pad); border-radius:var(--pe-radius-sm); background:#fffffff2; box-shadow:0 18px 50px #0b1b2a2e; backdrop-filter:blur(10px); }
.pe-service-card p:not(.pe-caption) { font-size:clamp(14px,.9vw,16px); color:var(--pe-muted); }
.pe-service-card.is-changing>* { animation:pe-card-swap .6s var(--pe-ease); }
@keyframes pe-card-swap { 0% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:none; } }

/* ---------- 2. Roadside: copy + photo with a live response radar ---------- */
.pe-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:var(--pe-gutter); align-items:center; }
.pe-phone-inline { font:700 clamp(16px,1.05vw,20px) 'Geist Mono',monospace; white-space:nowrap; }
.pe-phone-inline:hover { text-decoration:underline; text-underline-offset:5px; }
.pe-stats { display:grid; grid-template-columns:repeat(3,auto); gap:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--pe-line); }
.pe-stats div { display:grid; gap:var(--sp-1); }
.pe-stats strong { font:800 clamp(24px,min(2.1vw,4svh),40px)/1 'Archivo',sans-serif; }
.pe-stats span { font:700 clamp(9px,.57vw,11px)/1.35 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }
.pe-radar-photo { position:relative; height:clamp(340px,calc(var(--pe-view,100svh) - 2 * var(--pe-edge) - 2 * var(--pe-pad)),820px); }
.pe-radar-photo .pe-frame { height:100%; border-radius:var(--pe-radius); }
.pe-radar-photo .pe-frame>img { object-position:50% 58%; filter:brightness(1.3) saturate(1.08); }
.pe-radar { position:absolute; z-index:2; left:66%; top:50%; width:clamp(160px,17vw,320px); aspect-ratio:1; translate:-50% -50%; pointer-events:none; }
.pe-radar span { position:absolute; inset:0; border:1.5px solid #ffffffd9; border-radius:50%; background:radial-gradient(circle,#039ae100 55%,#039ae133); opacity:0; animation:pe-ring 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
.pe-radar span:nth-child(2) { animation-delay:1.2s; }
.pe-radar span:nth-child(3) { animation-delay:2.4s; }
.pe-radar i { position:absolute; left:50%; top:50%; width:16px; height:16px; translate:-50% -50%; border-radius:50%; background:var(--pe-blue); box-shadow:0 0 0 4px #fff,0 6px 18px #0009; }
@keyframes pe-ring { 0% { transform:scale(.12); opacity:1; } 100% { transform:scale(1); opacity:0; } }
.pe-glass-chip { position:absolute; z-index:4; left:var(--pe-card-pad); top:var(--pe-card-pad); display:flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-2); border-radius:999px; border:1px solid #ffffff59; background:#0b1b2a4d; backdrop-filter:blur(12px); font:700 clamp(10px,.6vw,12px)/1.2 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:#fff; white-space:nowrap; }
.pe-live-dot { position:relative; width:8px; height:8px; border-radius:50%; background:#3ee98a; }
.pe-live-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #3ee98a; animation:pe-live 1.8s ease-out infinite; }
@keyframes pe-live { from { transform:scale(.6); opacity:1; } to { transform:scale(1.8); opacity:0; } }

/* ---------- 3. About: parallax collage + scroll-filled statement ---------- */
.pe-about { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--pe-gutter); align-items:center; }
.pe-collage { position:relative; height:clamp(360px,calc(var(--pe-view,100svh) - 2 * var(--pe-pad)),820px); }
.pe-collage-main { position:absolute; left:0; top:0; width:80%; height:84%; border-radius:var(--pe-radius); }
.pe-collage-small { position:absolute; right:0; bottom:0; width:44%; height:44%; border:var(--sp-1) solid #fff; border-radius:var(--pe-radius); box-shadow:0 20px 50px #0b1b2a33; }
.pe-collage [data-parallax] { will-change:transform; }
.pe-collage-main>img { object-position:50% 30%; }
.pe-badge { position:absolute; z-index:5; right:20%; top:var(--pe-card-pad); width:clamp(92px,7.3vw,140px); translate:50% 0; }
.pe-badge circle { fill:var(--pe-blue); }
.pe-badge text { font:700 9.4px 'Geist Mono',monospace; letter-spacing:1.6px; fill:#fff; transform-box:view-box; transform-origin:50% 50%; animation:pe-spin 22s linear infinite; }
.pe-badge-arrow { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
@keyframes pe-spin { to { transform:rotate(360deg); } }
.pe-fill-text { font:500 clamp(19px,min(1.7vw,3.3svh),32px)/1.32 'IBM Plex Sans',sans-serif; letter-spacing:-.015em; max-width:26em; }
.pe-word { color:var(--pe-soft); transition:color .35s ease; }
.pe-word.is-lit { color:var(--pe-ink); }
.pe-facts { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pe-grid-gap); width:100%; }
.pe-facts li { display:grid; align-content:start; gap:4px; padding-top:var(--sp-2); border-top:2px solid var(--pe-ink); }
.pe-facts strong { font:700 clamp(14px,.95vw,18px)/1.25 'Archivo',sans-serif; }
.pe-facts span { font-size:clamp(13px,.8vw,15px); color:var(--pe-muted); }

/* ---------- 4. Process: four steps with drawn connectors ---------- */
.pe-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--pe-grid-gap); }
.pe-steps li { display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.pe-steps .pe-frame { height:clamp(160px,calc(var(--pe-view,100svh) - 570px),420px); margin-bottom:calc(var(--sp-2) - var(--sp-1)); }
.pe-steps .pe-frame>img { object-position:50% 40%; transition:transform .9s var(--pe-ease); }
.pe-steps li:hover .pe-frame>img { transform:scale(1.06); }
.pe-step-num { display:flex; align-items:center; gap:var(--sp-2); font:800 clamp(34px,min(2.9vw,5.6svh),56px)/.9 'Archivo',sans-serif; color:var(--pe-blue); letter-spacing:-.02em; }
.pe-step-num::after { content:''; flex:1; height:1px; background:var(--pe-blue); transform-origin:left; opacity:.5; }
html.pe-motion .pe-step-num::after { transform:scaleX(0); transition:transform 1s var(--pe-ease) calc(700ms + var(--i,0) * 160ms); }
html.pe-motion .is-in .pe-step-num::after { transform:none; }
.pe-steps p { font-size:clamp(14px,.9vw,17px); color:var(--pe-muted); }

/* ---------- 5. Reviews: photo + draggable carousel with arrows ---------- */
.pe-reviews { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,2.25fr); gap:var(--pe-grid-gap); height:clamp(260px,calc(var(--pe-view,100svh) - 440px),480px); }
.pe-reviews-photo { height:100%; }
.pe-reviews-photo>img { object-position:50% 30%; }
.pe-reviews-track { display:flex; gap:var(--pe-grid-gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; min-width:0; }
.pe-reviews-track::-webkit-scrollbar { display:none; }
.pe-reviews-track.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.pe-review { flex:0 0 calc((100% - var(--pe-grid-gap)) / 2); min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--pe-card-pad); border-radius:var(--pe-radius-sm); background:#f1f6f9; scroll-snap-align:start; transition:background .3s; }
.pe-review:hover { background:#e8f2f8; }
.pe-review-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.pe-stars { color:#fbbc04; letter-spacing:3px; font-size:16px; line-height:1; }
.pe-review-label { font:700 10px/1.3 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:#6b7d8a; }
.pe-review blockquote { font:500 clamp(19px,min(1.8vw,3.5svh),34px)/1.32 'IBM Plex Sans',sans-serif; letter-spacing:-.015em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; }
.pe-review blockquote::before { content:'“'; display:block; height:.5em; font:800 2.4em/1 'Archivo',sans-serif; color:var(--pe-blue); }
.pe-review footer { margin-top:auto; padding-top:var(--sp-2); display:flex; align-items:center; gap:var(--sp-2); font-size:15px; font-weight:600; }
.pe-review footer a { text-decoration:underline; text-underline-offset:4px; }
.pe-review small { display:block; color:var(--pe-muted); font-size:13px; font-weight:400; }
.pe-avatar,.pe-review-photo { width:44px; height:44px; flex-shrink:0; border-radius:50%; object-fit:cover; }
.pe-avatar { display:grid; place-items:center; background:var(--pe-ink); color:#fff; font:700 14px 'Archivo',sans-serif; }
.pe-reviews-controls { display:flex; align-items:center; gap:var(--sp-2); }
#reviews-position { font:700 13px 'Geist Mono',monospace; min-width:64px; }
.pe-reviews-bar { width:clamp(80px,8vw,160px); height:2px; background:var(--pe-line); overflow:hidden; }
.pe-reviews-bar i { display:block; height:100%; background:var(--pe-blue); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--pe-ease); }
#reviews-source { font-size:14px; }
#reviews-source a { text-decoration:underline; text-underline-offset:4px; }
.pe-google-attribution { white-space:nowrap; font:400 16px/1.4 Arial,sans-serif; color:#1f1f1f; letter-spacing:normal; }

/* ---------- 6. FAQ ---------- */
.pe-faq { --pe-faq-num:44px; --pe-faq-icon:36px; --pe-faq-row:min(var(--sp-2),2svh); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-areas:'head head' 'photo list'; column-gap:var(--pe-gutter); row-gap:var(--sp-4); align-items:stretch; }
.pe-faq-head { grid-area:head; }
.pe-faq-photo>img { object-position:50% 38%; }
/* The photo stretches to the height of the question list, top to bottom. */
.pe-faq-photo { grid-area:photo; width:100%; height:auto; min-height:200px; }
.pe-faq-photo>img { position:absolute; inset:0; } /* the list sets the row height, not the photo's own proportions */
/* The call to action closes the block: its own row, centred, one section-step below the content. */
.pe-faq-cta { display:flex; justify-content:flex-start; margin-top:var(--sp-4); }
.pe-faq-list { grid-area:list; align-self:start; interpolate-size:allow-keywords; }
.pe-faq-list details { border-bottom:1px solid var(--pe-line); }
.pe-faq-list details:first-child { border-top:1px solid var(--pe-line); }
.pe-faq-list summary { display:grid; grid-template-columns:var(--pe-faq-num) 1fr auto; align-items:center; gap:var(--sp-2); padding:var(--pe-faq-row) 0; cursor:pointer; list-style:none; font:700 clamp(16px,min(1.15vw,2.3svh),22px)/1.3 'Archivo',sans-serif; transition:color .2s; }
.pe-faq-list summary::-webkit-details-marker { display:none; }
.pe-faq-list summary:hover,.pe-faq-list details[open] summary { color:var(--pe-blue); }
.pe-faq-list summary i { position:relative; width:var(--pe-faq-icon); height:var(--pe-faq-icon); border-radius:50%; background:#fff; box-shadow:0 2px 8px #0b1b2a14; transition:transform .35s var(--pe-ease),background .2s; }
.pe-faq-list summary i::before,.pe-faq-list summary i::after { content:''; position:absolute; left:50%; top:50%; width:12px; height:2px; translate:-50% -50%; background:var(--pe-ink); border-radius:2px; }
.pe-faq-list summary i::after { rotate:90deg; }
.pe-faq-list details[open] summary i { transform:rotate(45deg); background:var(--pe-blue); }
.pe-faq-list details[open] summary i::before,.pe-faq-list details[open] summary i::after { background:#fff; }
/* The answer lines up with the question text and stops where the icon starts. */
.pe-faq-list details>div { padding:0 calc(var(--pe-faq-icon) + var(--sp-2)) var(--pe-faq-row) calc(var(--pe-faq-num) + var(--sp-2)); color:var(--pe-muted); font-size:clamp(14px,.95vw,17px); }
.pe-faq-list details::details-content { block-size:0; overflow:clip; transition:block-size .45s var(--pe-ease),content-visibility .45s allow-discrete; }
.pe-faq-list details[open]::details-content { block-size:auto; }
.pe-faq-list a { text-decoration:underline; }

/* ---------- 7. Contact ---------- */
.pe-contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--pe-gutter); align-items:center; }
.pe-contact-lines { display:grid; gap:var(--sp-1); }
.pe-contact-phone { font:800 clamp(28px,min(2.5vw,5svh),48px)/1.1 'Archivo',sans-serif; }
.pe-contact-phone:hover { text-decoration:underline; text-underline-offset:6px; }
.pe-contact-lines address,.pe-contact-lines p { font-style:normal; color:var(--pe-muted); font-size:clamp(14px,.95vw,17px); }
.pe-map { position:relative; width:100%; height:clamp(96px,calc(var(--pe-view,100svh) - 700px),220px); border:1px solid #ffffff4d; border-radius:var(--pe-radius-sm); display:grid; place-items:center; overflow:hidden; background:linear-gradient(115deg,transparent 46%,#ffffff40 46.4%,#ffffff40 48.6%,transparent 49%),linear-gradient(8deg,transparent 60%,#ffffff33 60.3%,#ffffff33 61.8%,transparent 62.1%),repeating-linear-gradient(0deg,#ffffff1a 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,#ffffff1a 0 1px,transparent 1px 34px),#0287c6; }
.pe-map::before { content:''; position:absolute; left:58%; top:44%; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px #ffffff40,0 0 0 14px #ffffff1f; }
.pe-map:has(iframe)::before { display:none; }
.pe-map iframe { border:0; height:100%; width:100%; }
.pe-map-button { position:relative; z-index:1; display:flex; align-items:center; gap:var(--sp-1); border:0; border-radius:999px; background:#0b1b2a66; backdrop-filter:blur(8px); padding:var(--sp-2) var(--sp-3); color:#fff; font:700 12px 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.pe-map-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.pe-map-button:hover { text-decoration:underline; text-underline-offset:4px; }
.pe-request { --pe-muted:#536776; --pe-line:#d9e8f0; color:#101923; background:#fff; padding:var(--pe-card-pad); border-radius:var(--pe-radius); display:grid; gap:min(var(--sp-2),1.9svh); min-width:0; box-shadow:0 30px 70px #00304c40; }
.pe-request h3 { margin-bottom:calc(var(--sp-1) - min(var(--sp-2),1.9svh)); }
.pe-dark .pe-request :is(h3,a:not(.pe-button)) { color:#101923; }
.pe-request label { display:flex; flex-direction:column; gap:var(--sp-1); font-size:13px; font-weight:600; min-width:0; }
.pe-request input,.pe-request select,.pe-request textarea { width:100%; min-width:0; font:400 16px/1.5 'IBM Plex Sans',sans-serif; background:#f6f9fb; border:1px solid #cfdde6; color:#101923; border-radius:10px; padding:10px 14px; transition:border-color .2s,background .2s,box-shadow .2s; }
.pe-request :is(input,select,textarea):focus { outline:0; border-color:var(--pe-blue); background:#fff; box-shadow:0 0 0 3px #039ae133; }
.pe-request input,.pe-request select { min-height:clamp(42px,5.4svh,50px); }
.pe-request textarea { min-height:clamp(64px,10svh,110px); resize:vertical; }
.pe-request :is(input,textarea)::placeholder { color:#7a8791; }
.pe-form-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.pe-field-error { color:#b3261e; font-size:12px; font-weight:400; }
.pe-field-error:empty { display:none; }
.pe-request [aria-invalid=true] { border-color:#b3261e; }
.pe-submit { width:100%; margin-top:calc(var(--sp-3) - min(var(--sp-2),1.9svh)); }
.pe-emergency { padding-top:var(--sp-2); border-top:1px solid var(--pe-line); }
.pe-emergency a { text-decoration:underline; }
.pe-request-result { padding:var(--sp-2); background:#eaf7fd; color:#101923; border-radius:10px; font-size:15px; overflow-wrap:anywhere; }
.pe-request-result pre { font:inherit; white-space:pre-wrap; }
.pe-request-result .pe-button { margin:var(--sp-2) var(--sp-1) 0 0; }

/* ---------- 8. Gallery with crossing ribbons ---------- */
.pe-gallery-section { padding-top:var(--sp-3); }
.pe-ribbons { position:relative; height:clamp(110px,8.6vw,150px); margin-bottom:var(--sp-4); overflow:hidden; }
.pe-ribbon { position:absolute; left:-4%; right:-4%; top:50%; padding:var(--sp-2) 0; overflow:hidden; font:800 clamp(16px,1.45vw,28px)/1 'Archivo',sans-serif; text-transform:uppercase; color:#fff; }
.pe-ribbon--blue { background:var(--pe-blue); rotate:-2.4deg; translate:0 -50%; z-index:2; }
.pe-ribbon--dark { background:var(--pe-ink); rotate:2deg; translate:0 -50%; }
.pe-ribbon>div { display:flex; width:max-content; animation:pe-marquee 36s linear infinite; }
.pe-ribbon--dark>div { animation-direction:reverse; animation-duration:44s; }
.pe-ribbon span { display:flex; align-items:center; white-space:nowrap; }
.pe-ribbon span::after { content:''; width:.42em; height:.42em; margin-inline:.9em; background:currentColor; rotate:45deg; }
@keyframes pe-marquee { to { transform:translateX(-50%); } }
.pe-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); grid-template-areas:'a a b c d' 'a a e f g'; gap:var(--pe-grid-gap); height:clamp(300px,calc(var(--pe-view,100svh) - 560px),680px); }
.pe-gallery-item { display:block; width:100%; height:100%; padding:0; border:0; cursor:zoom-in; }
.pe-gallery-item:nth-child(1) { grid-area:a; }
.pe-gallery-item>img { object-position:var(--pos,50% 50%); transition:transform .9s var(--pe-ease),filter .4s; }
.pe-gallery-item::before { content:'+'; position:absolute; z-index:2; right:var(--sp-2); bottom:var(--sp-2); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--pe-ink); font:500 24px/1 'Archivo',sans-serif; opacity:0; transform:scale(.6); transition:opacity .3s,transform .4s var(--pe-ease); }
.pe-gallery-item:hover>img,.pe-gallery-item:focus-visible>img { transform:scale(1.07); }
.pe-gallery-item:hover::before,.pe-gallery-item:focus-visible::before { opacity:1; transform:none; }
.pe-lightbox { width:min(1400px,94vw); max-width:none; max-height:none; padding:0; border:0; background:transparent; overflow:visible; }
.pe-lightbox::backdrop { background:#050e16e6; backdrop-filter:blur(6px); }
.pe-lightbox figure { display:grid; gap:var(--sp-2); }
.pe-lightbox img { display:block; width:100%; max-height:82svh; object-fit:contain; border-radius:var(--pe-radius-sm); }
.pe-lightbox figcaption { display:flex; justify-content:space-between; gap:var(--sp-2); color:#fff; font:700 12px 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.pe-lightbox .pe-arrow { position:fixed; top:50%; translate:0 -50%; color:#fff; background:#0b1b2a80; border-color:#ffffff80; }
.pe-lightbox .pe-arrow:hover { background:#fff; color:var(--pe-ink); border-color:#fff; }
.pe-lightbox-prev { left:var(--sp-3); }
.pe-lightbox-next { right:var(--sp-3); }
.pe-lightbox .pe-lightbox-close { top:var(--sp-3); right:var(--sp-3); translate:none; }
.pe-lightbox[open] img { animation:pe-zoom-in .45s var(--pe-ease); }
@keyframes pe-zoom-in { from { opacity:0; transform:scale(.96); } }

/* ---------- 9. Footer: dark panel with equal padding on all sides ---------- */
.pe-footer { --pe-muted:#ffffffa6; --pe-line:#ffffff26; --pe-footer-pad:var(--pe-panel-x); margin:var(--pe-edge); border-radius:var(--pe-radius); background:#0b141c; color:#fff; padding:var(--pe-footer-pad) 0; overflow:hidden; }
.pe-footer .pe-caption { color:var(--pe-accent); }
.pe-footer-top { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--pe-gutter); align-items:start; }
.pe-footer-nav { display:grid; grid-template-columns:repeat(2,max-content); gap:var(--sp-1) var(--pe-gutter); }
.pe-footer-nav a { font:800 clamp(24px,min(2.3vw,4.6svh),44px)/1.15 'Archivo',sans-serif; text-transform:uppercase; transition:color .25s,transform .35s var(--pe-ease); }
.pe-footer-nav a:hover { color:var(--pe-accent); transform:translateX(8px); }
.pe-footer-contact { color:var(--pe-muted); font-size:clamp(14px,.95vw,17px); }
.pe-footer-phone { font:800 clamp(26px,min(2.4vw,4.8svh),46px)/1.1 'Archivo',sans-serif; color:#fff; }
.pe-footer-phone:hover { color:var(--pe-accent); }
.pe-footer-contact .pe-actions { color:#fff; }
.pe-footer .pe-button { background:#fff; color:var(--pe-ink); }
.pe-footer .pe-button:hover { background:#e6eef3; color:var(--pe-ink); }
.pe-footer .pe-button--ghost { background:transparent; color:#fff; }
.pe-footer .pe-button--ghost:hover { background:#fff; color:var(--pe-ink); }
.pe-giant { display:flex; margin:0 !important; font:800 9.4vw/.86 'Archivo',sans-serif; letter-spacing:-.02em; white-space:nowrap; color:#fff; overflow:hidden; padding-bottom:.04em; }
.pe-giant span { display:inline-block; }
html.pe-motion .pe-giant span { transform:translateY(105%); transition:transform .9s var(--pe-ease) calc(200ms + var(--i,0) * 35ms); }
html.pe-motion .is-in .pe-giant span { transform:none; }
/* Brand lockup: the header logo as a 3D mark — 16 stacked layers give it real depth; blue sides fade to navy. */
.pe-footer-brand { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-4) 0 var(--sp-3); }
.pe-footer-brand .pe-giant { flex:1 1 auto; min-width:0; }
.pe-logo3d { --w:clamp(64px,12vw,240px); --step:calc(var(--w) * .0085); position:relative; flex-shrink:0; width:var(--w); aspect-ratio:1280 / 887; perspective:calc(var(--w) * 5); }
.pe-logo3d::before { content:''; position:absolute; inset:-40% -30%; background:radial-gradient(closest-side,#039ae166,transparent 72%); pointer-events:none; }
.pe-logo3d-in,.pe-logo3d-sway,.pe-logo3d-obj { position:absolute; inset:0; transform-style:preserve-3d; }
.pe-logo3d-obj { transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.pe-logo3d-obj i { position:absolute; inset:0; -webkit-mask:url('/assets/pe-logo-mark.svg') center / contain no-repeat; mask:url('/assets/pe-logo-mark.svg') center / contain no-repeat; background:color-mix(in srgb,#07243a calc(var(--l) * 6%),var(--pe-blue)); transform:translateZ(calc(var(--l) * var(--step) * -1)); }
.pe-logo3d-obj i:first-child { background:linear-gradient(110deg,#fff 38%,#a8e0ff 50%,#fff 62%) 0 0 / 260% 100%; animation:pe-logo-sheen 5.5s ease-in-out infinite; }
.pe-logo3d-sway { animation:pe-logo-sway 7s ease-in-out infinite alternate; }
@keyframes pe-logo-sway { from { transform:rotateY(-26deg) rotateX(8deg); } to { transform:rotateY(18deg) rotateX(-4deg); } }
@keyframes pe-logo-sheen { 0%,55% { background-position:130% 0; } 85%,100% { background-position:-30% 0; } }
.pe-logo3d:not(.is-live) .pe-logo3d-sway,.pe-logo3d:not(.is-live) .pe-logo3d-obj i:first-child,.pe-logo3d.is-tracking .pe-logo3d-sway { animation-play-state:paused; }
html.pe-motion .pe-logo3d-in { transform:rotateY(-120deg) scale(0); transition:transform 1.3s var(--pe-ease) .15s; }
html.pe-motion .is-in .pe-logo3d-in { transform:none; }
.pe-footer-bottom { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--pe-line); font-size:13px; color:var(--pe-muted); }
.pe-footer-bottom a:hover { color:#fff; }
.pe-privacy { max-width:560px; }
.pe-privacy summary { cursor:pointer; }
.pe-privacy p { margin-top:var(--sp-1) !important; }


/* ---------- Modals: service request (light) and video (dark), one shell ---------- */
body:has(.pe-modal[open]) { overflow:hidden; }
.pe-modal,.pe-continuation .panel { width:min(1040px,calc(100% - 2 * var(--pe-edge))); max-width:none; max-height:calc(100dvh - 2 * var(--pe-edge)); padding:0; border:0; border-radius:var(--pe-radius); overflow:auto; overscroll-behavior:contain; box-shadow:0 40px 120px #00000080; }
.pe-modal::backdrop,.pe-continuation .panel::backdrop { background:#050e16cc; backdrop-filter:blur(8px); }
.pe-modal[open],.pe-continuation .panel[open] { animation:pe-modal-in .55s var(--pe-ease); }
@keyframes pe-modal-in { from { opacity:0; transform:translateY(28px) scale(.97); } }
.pe-modal-close,.pe-continuation .close-panel { position:absolute; z-index:6; top:var(--pe-card-pad); right:var(--pe-card-pad); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:#0b1b2acc; color:#fff; font-size:0; backdrop-filter:blur(8px); transition:background .2s,transform .3s var(--pe-ease); }
.pe-modal-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.pe-continuation .close-panel span { font-size:26px; line-height:1; }
.pe-modal-close:hover,.pe-continuation .close-panel:hover { background:#000; transform:rotate(90deg); }
.pe-modal { background:#fff; color:var(--pe-ink); }
.pe-modal-body { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); min-height:min(620px,calc(100dvh - 2 * var(--pe-edge))); }
.pe-modal-photo { border-radius:0; min-height:260px; }
.pe-modal-photo>img { animation:pe-modal-photo .7s var(--pe-ease); }
@keyframes pe-modal-photo { from { opacity:0; transform:scale(1.06); } }
.pe-modal-form.pe-request { align-content:center; gap:var(--sp-2); padding:calc(var(--pe-card-pad) * 1.5); border-radius:0; box-shadow:none; }
.pe-modal-form h2 { font-size:clamp(24px,min(2.3vw,4.4svh),40px); margin-bottom:calc(var(--sp-1) - var(--sp-2)); }
.pe-modal-form .pe-caption { margin-bottom:calc(var(--sp-1) - var(--sp-2)); }
.pe-modal-form .pe-lead { font-size:clamp(14px,.95vw,17px); }
.pe-modal-form .pe-submit { margin-top:calc(var(--sp-3) - var(--sp-2)); }
/* Video: dark like the footer, the clip edge to edge, our heading and buttons below. */
.pe-continuation .panel { background:#0b141c; color:#fff; }
.pe-continuation #panel-content { padding:0; }
.pe-video .overview-video { display:block; width:100%; margin:0; aspect-ratio:16 / 9; border-radius:0; background:#000; }
.pe-video-copy { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); padding:calc(var(--pe-card-pad) * 1.25); }
.pe-video-copy .pe-caption { color:var(--pe-accent); margin-bottom:var(--sp-1); }
.pe-continuation .panel h2 { max-width:none; margin:0; color:#fff; font:800 clamp(24px,min(2.3vw,4.4svh),40px)/1.12 'Archivo',sans-serif; letter-spacing:0; }
.pe-continuation .panel h2 em { color:var(--pe-accent); }
.pe-continuation .video-caption { margin-top:var(--sp-2); color:#ffffff99; font-size:12px; }
.pe-button--light { background:#fff; color:var(--pe-ink); }
.pe-button--light:hover { background:#e6eef3; color:var(--pe-ink); }
/* Emergency call on the night panel: green, like the header call button, with a pulsing ring. */
/* Green call buttons carry a white outline (inset, so the size does not change). */
.pe-night .pe-button--pulse,.pe-footer .pe-button--call { background:#00c853; color:#fff; text-shadow:0 1px 2px #0000004d; box-shadow:inset 0 0 0 2px #fff,0 5px 16px #0b1b2a30,0 1px 3px #0b1b2a24; }
.pe-night .pe-button--pulse:hover,.pe-footer .pe-button--call:hover { background:#00b04a; color:#fff; box-shadow:inset 0 0 0 2px #fff,0 8px 22px #0b1b2a40,0 2px 4px #0b1b2a24; }
.pe-night .pe-button--pulse::after { box-shadow:0 0 0 2px #3ee98a; }


/* ---------- Desktop cursor: a chrome combination wrench; over anything clickable it turns a blue nut ---------- */
.pe-wrench { position:fixed; left:0; top:0; z-index:2147483647; width:48px; height:48px; pointer-events:none; opacity:0; transition:opacity .15s; filter:drop-shadow(0 3px 4px #0b1b2a66); will-change:transform; }
.pe-wrench.is-visible { opacity:1; }
.pe-wrench svg { display:block; width:100%; height:100%; overflow:visible; }
.pe-wrench-nut { opacity:0; transition:opacity .2s; }
.pe-wrench.is-engaged .pe-wrench-nut { opacity:1; animation:pe-nut-turn 1.1s cubic-bezier(.45,0,.25,1) infinite; }
.pe-wrench.is-engaged .pe-wrench-tool { animation:pe-wrench-turn 1.1s cubic-bezier(.45,0,.25,1) infinite; }
.pe-wrench.is-down .pe-wrench-tool { animation:none; transform:rotate(26deg); }
/* The nut turns 60 degrees per stroke (one hex face), so the loop is seamless; the wrench ratchets back. */
@keyframes pe-wrench-turn { 0% { transform:rotate(-30deg); } 55%,62% { transform:rotate(30deg); } 100% { transform:rotate(-30deg); } }
@keyframes pe-nut-turn { 0% { transform:rotate(0deg); } 55%,100% { transform:rotate(60deg); } }
html.pe-wrench-on,html.pe-wrench-on *:not(input):not(textarea):not(video) { cursor:none !important; }

/* ---------- Pixel trail on tinted panels: big squares light up where the mouse passes ---------- */
.pe-dark,.pe-night,.pe-gray,.pe-footer { position:relative; }
.pe-pixel-trail { position:absolute; inset:0; z-index:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; }
:is(.pe-dark,.pe-night,.pe-gray,.pe-footer)>.pe-wrap { position:relative; z-index:1; }

.pe-mobile-actions { display:none; }

/* ---------- Below 1200 px the hero switches to fixed pixel metrics; follow them. ----------
   --pe-view is the height a visitor actually sees: the screen minus the fixed header (and, on phones,
   minus the fixed call bar). Photo heights are "whatever is left" of it, so every block fits one screen. */
@media(max-width:1199px) {
 .pe-continuation { --pe-gutter:38px; --pe-edge:10px; --pe-radius:22px; --pe-radius-sm:14px; --pe-btn-h:56px; --pe-btn-fs:11px; --pe-btn-px:24px; --pe-btn-gap:8px; --pe-btn-icon:17px;
   --sp-1:8px; --sp-2:14px; --sp-3:28px; --sp-4:36px; --pe-card-pad:24px; --pe-grid-gap:16px; --pe-pad:64px;
   --pe-view:calc(100svh - 120px); }
 .pe-continuation [id] { scroll-margin-top:112px; }
 .pe-screen,.pe-dark.pe-screen,.pe-gray.pe-screen,.pe-night.pe-screen { min-height:0; }
}
@media(max-width:1023px) {
 .pe-services { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); height:clamp(340px,calc(var(--pe-view) - 330px),560px); }
 .pe-radar-photo,.pe-collage { height:clamp(320px,calc(var(--pe-view) - 2 * var(--pe-pad) - 2 * var(--pe-edge)),600px); }
 .pe-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .pe-steps .pe-frame { height:clamp(140px,calc((var(--pe-view) - 620px) / 2),260px); }
 .pe-reviews { grid-template-columns:1fr; height:auto; }
 .pe-reviews-photo { display:none; }
 .pe-review { min-height:280px; }
 .pe-contact { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--sp-3); align-items:start; }
 .pe-map { display:none !important; }
 .pe-gallery { height:clamp(300px,calc(var(--pe-view) - 440px),520px); }
 .pe-footer-top { grid-template-columns:1fr; gap:var(--sp-4); }
}

/* ---------- Phones and small tablets: one column, swipe rows, photos flex to the free height ---------- */
@media(max-width:767px) {
 .pe-continuation { --pe-pad:48px; }
 .pe-section-heading { grid-template-columns:1fr; margin-bottom:var(--sp-3); }
 .pe-section-heading>h2 { margin-bottom:var(--sp-2); }
 .pe-heading-aside { grid-column:1; grid-row:3; }
 .pe-split,.pe-about,.pe-faq,.pe-contact { grid-template-columns:1fr; gap:var(--sp-3); }
 .pe-faq { grid-template-areas:'head' 'list'; }
 .pe-faq-photo { display:none; }
 /* Intros that repeat what the heading already says, and call buttons that repeat the fixed call bar. */
 #services .pe-heading-aside,#gallery .pe-heading-aside,.pe-faq-head .pe-lead,#contact .pe-lead,.pe-contact-lines p { display:none; }

 /* 1. Services: a swipeable chip row, then the photo with its card laid over the bottom. */
 .pe-services { grid-template-columns:1fr; height:auto; gap:var(--sp-2); }
 .pe-service-list { flex-direction:row; justify-content:flex-start; gap:var(--sp-1); overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--pe-inset) * -1); padding-inline:var(--pe-inset); scroll-padding-inline:var(--pe-inset); }
 .pe-service-list::-webkit-scrollbar { display:none; }
 .pe-service-list [role=tab],.pe-service-list [role=tab]:first-child { flex:0 0 auto; width:auto; display:flex; gap:var(--sp-1); align-items:center; padding:10px 16px; border:1px solid var(--pe-line); border-radius:999px; overflow:hidden; }
 .pe-service-list [aria-selected=true] { border-color:var(--pe-ink); background:var(--pe-ink); color:#fff; }
 .pe-service-list [aria-selected=true] .pe-num { color:var(--pe-accent); }
 .pe-service-name { font-size:15px; }
 .pe-service-list [role=tab]:hover .pe-service-name { transform:none; }
 .pe-service-desc { display:none; }
 .pe-progress { bottom:0; }
 .pe-service-stage { height:clamp(240px,calc(var(--pe-view) - 2 * var(--pe-pad) - 182px),520px); }
 .pe-service-card { left:var(--pe-card-pad); right:var(--pe-card-pad); bottom:var(--pe-card-pad); width:auto; gap:var(--sp-1); }
 .pe-service-card>.pe-button { margin-top:var(--sp-2); }

 /* 2. Roadside: the night photo runs edge to edge at the top of the panel and fades into it. */
 .pe-night { overflow:hidden; isolation:isolate; padding-top:0; }
 .pe-night .pe-split { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .pe-night .pe-radar-photo { order:-1; height:clamp(160px,calc(var(--pe-view) - var(--pe-pad) - 2 * var(--pe-edge) - 335px),360px); margin:0 calc(var(--pe-inset) * -1) calc(var(--sp-4) * -1); }
 .pe-radar-photo .pe-frame { border-radius:0; }
 .pe-radar-photo .pe-frame>img { object-position:50% 72%; }
 .pe-radar-photo::after { content:''; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,#0b141c00 76%,#0b141c); pointer-events:none; }
 .pe-radar { left:72%; top:36%; width:140px; }
 .pe-night .pe-split-copy { position:relative; z-index:4; }
 html.pe-motion .pe-radar-photo[data-enter] { --pe-x:0; }
 .pe-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); padding-top:var(--sp-2); }

 /* 3. About: statement first, the collage takes the rest of the screen. */
 .pe-about { display:flex; flex-direction:column; align-items:stretch; }
 .pe-collage { order:2; height:clamp(150px,calc(var(--pe-view) - 2 * var(--pe-pad) - 385px),320px); }
 .pe-badge { width:72px; }
 .pe-fill-text { font-size:17px; }
 .pe-facts { gap:var(--sp-2); }
 .pe-facts strong { font-size:13px; }
 .pe-facts span { font-size:12px; }

 /* 4. Process and 8. gallery: horizontal swipe rows. */
 .pe-steps,.pe-gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--pe-inset) * -1); padding-inline:var(--pe-inset); scroll-padding-inline:var(--pe-inset); gap:var(--pe-grid-gap); }
 .pe-steps::-webkit-scrollbar,.pe-gallery::-webkit-scrollbar { display:none; }
 .pe-steps li { flex:0 0 min(78%,320px); scroll-snap-align:start; }
 .pe-steps .pe-frame { height:clamp(150px,calc(var(--pe-view) - 2 * var(--pe-pad) - 346px),380px); }
 .pe-step-num { font-size:clamp(34px,10vw,44px); }
 .pe-gallery { height:auto; }
 .pe-gallery-item { flex:0 0 min(82%,340px); height:clamp(200px,calc(var(--pe-view) - 2 * var(--pe-pad) - 268px),440px); scroll-snap-align:start; }
 .pe-gallery-item:nth-child(1) { flex-basis:min(88%,420px); }
 /* Steeper, opposite angles on narrow screens so the dark ribbon is not hidden under the blue one. */
 .pe-ribbons { height:132px; margin-bottom:var(--sp-3); }
 .pe-ribbon { font-size:14px; padding:10px 0; }
 .pe-ribbon--blue { rotate:-7deg; }
 .pe-ribbon--dark { rotate:6deg; }

 /* 5. Reviews: one card at a time. */
 .pe-review { flex-basis:88%; min-height:0; }
 .pe-reviews-controls { flex-wrap:wrap; }

 /* 6. FAQ. */
 .pe-faq { --pe-faq-num:28px; --pe-faq-icon:32px; --pe-faq-row:var(--sp-2); }
 .pe-faq-list summary { font-size:15px; }
 .pe-faq-list details>div { font-size:14px; }

 /* 7. Contact: phone and address, the two actions, then a compact form. */
 .pe-contact-lines,#request-title { display:none; }
 .pe-contact-lines address { font-size:14px; }
 .pe-contact .pe-actions .pe-button { flex:1 1 0; }
 #request-mode,.pe-emergency { display:none; }
 .pe-form-pair { grid-template-columns:1fr 1fr; gap:var(--sp-2); }
 .pe-request { gap:10px; }
 .pe-request label { gap:6px; }
 .pe-request input,.pe-request select { min-height:44px; }
 .pe-request textarea { min-height:56px; }
 #request-privacy { font-size:12px; }
 .pe-request { box-shadow:none; }

 /* 9. Footer. */
 .pe-footer-nav a { font-size:20px; }
 .pe-footer-bottom { display:grid; grid-template-columns:1fr auto; gap:var(--sp-1) var(--sp-3); }
 .pe-privacy { grid-column:1 / -1; grid-row:2; }
 .pe-lightbox .pe-arrow { top:auto; bottom:var(--sp-3); translate:none; }
 .pe-modal-body { grid-template-columns:1fr; min-height:0; }
 .pe-modal-photo { min-height:0; height:clamp(150px,26dvh,240px); }
 .pe-modal-form.pe-request { padding:var(--pe-card-pad) var(--pe-panel-x) calc(var(--pe-panel-x) + 4px); }
 .pe-video-copy { padding:var(--pe-panel-x); }
 .pe-video-copy .pe-actions { width:100%; }
 .pe-video-copy .pe-button { flex:1 1 0; }
 .pe-lightbox .pe-lightbox-close { top:var(--sp-3); bottom:auto; }
}

/* ---------- Phones: the hero's phone metrics, plus the fixed call bar ---------- */
@media(max-width:619px) {
 .pe-continuation { --pe-gutter:24px; --pe-edge:12px; --pe-radius:20px; --pe-radius-sm:14px; --pe-btn-h:48px; --pe-btn-fs:10.2px; --pe-btn-px:16px; --pe-btn-icon:14px;
   --sp-1:8px; --sp-2:12px; --sp-3:20px; --sp-4:24px; --pe-card-pad:16px; --pe-grid-gap:12px; --pe-pad:36px; --pe-panel-x:24px; font-size:15px;
   --pe-view:calc(100svh - 188px); }
 .pe-continuation [id] { scroll-margin-top:108px; }
 .pe-continuation h2 { font-size:clamp(24px,6.9vw,30px); }
 .pe-lead { font-size:15px; }
 .pe-footer { padding-bottom:calc(var(--pe-footer-pad) + 76px); }
 .pe-footer-nav { gap:var(--sp-1) var(--sp-4); }
 .pe-logo3d { --w:56px; }
 .pe-footer-brand { gap:var(--sp-2); }
 .pe-mobile-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:var(--sp-1); position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); left:var(--pe-edge); right:var(--pe-edge); padding:var(--sp-1); border-radius:999px; background:#fff; border:1px solid #d9e8f0; box-shadow:0 4px 18px #002f4b24; z-index:35; font:700 13px 'Archivo',sans-serif; }
 .pe-mobile-actions a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 8px; border-radius:999px; background:#000; color:#fff; text-transform:uppercase; box-shadow:0 3px 10px #002f4b22; }
 .pe-mobile-actions a:first-child { background:var(--pe-blue); }
}
/* Short screens below 1200 px: the form keeps only what is needed to fill it in. */
@media(max-width:1199px) and (max-height:820px) {
 #request-mode,.pe-emergency { display:none; }
 .pe-request textarea { min-height:56px; }
}
@media(max-width:767px) and (max-height:820px) {
 #contact .pe-caption,#request-privacy { display:none; }
 .pe-footer-brand { margin:var(--sp-3) 0 var(--sp-2); }
}
/* Narrow phones: the statement wraps less at a slightly smaller size. */
@media(max-width:374px) {
 .pe-fill-text { font-size:16px; }
}
/* Short phones: drop secondary lines so each block still fits; photos take back the freed height. */
@media(max-width:767px) and (max-height:760px) {
 .pe-facts { display:none; }
 .pe-collage { height:clamp(150px,calc(var(--pe-view) - 2 * var(--pe-pad) - 295px),320px); }
}
/* Short screens: the FAQ intro line is the first thing to give way. */
@media(max-height:800px) {
 .pe-faq-head .pe-lead { display:none; }
}
/* Landscape tablets and short laptops under the pinned strip: denser FAQ rows, smaller gallery floor. */
@media(max-width:1199px) and (max-height:800px) {
 .pe-faq { --pe-faq-row:10px; }
}
@media(min-width:768px) and (max-width:1199px) and (max-height:800px) {
 .pe-gallery { height:clamp(260px,calc(var(--pe-view,100svh) - 560px),680px); }
}
@media(max-width:767px) and (max-height:700px) {
 .pe-steps .pe-frame { height:clamp(120px,calc(var(--pe-view) - 2 * var(--pe-pad) - 346px),380px); }
 .pe-gallery-item { height:clamp(170px,calc(var(--pe-view) - 2 * var(--pe-pad) - 268px),440px); }
 .pe-faq-cta { display:none; }
 .pe-footer-nav a { font-size:18px; }
 .pe-footer-nav { row-gap:4px; }
 .pe-footer-contact p:last-of-type { display:none; }
 .pe-continuation { --pe-pad:28px; }
 .pe-request input,.pe-request select { min-height:42px; }
 .pe-request textarea { min-height:44px; }
 .pe-service-card p:not(.pe-caption),.pe-stats,.pe-contact-lines address { display:none; }
 .pe-service-stage { height:clamp(220px,calc(var(--pe-view) - 2 * var(--pe-pad) - 182px),520px); }
 .pe-night .pe-radar-photo { height:clamp(150px,calc(var(--pe-view) - var(--pe-pad) - 2 * var(--pe-edge) - 250px),360px); }
}
@media (prefers-reduced-motion:reduce) {
 .pe-radar span,.pe-live-dot::after,.pe-badge text,.pe-ribbon>div,.pe-button--pulse::after,.pe-logo3d-sway,.pe-logo3d-obj i { animation:none !important; }
 .pe-wrench,.pe-pixel-trail { display:none !important; }
 .pe-logo3d-sway { transform:rotateY(-22deg) rotateX(7deg); }
 .pe-radar span:first-child { opacity:.8; transform:scale(.6); }
}