/* Personal stories, with a varied photo rhythm and media woven into each chapter. */
.personal { grid-column:1 / -1; width:100%; padding:52px; background:#f1eee5; color:#172521; overflow:hidden; }
.personal-header { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:46px; }
.personal .eyebrow { color:#53615b; letter-spacing:.16em; }
.personal h3 { font-size:clamp(42px,5.6vw,78px); font-weight:650; letter-spacing:-.065em; line-height:1.04; margin-top:12px; }
.personal h3 em { font-family:Georgia,serif; font-weight:400; }
.personal-spark { flex-shrink:0; width:90px; height:90px; color:#cf563c; transform:rotate(-8deg); }
.personal h4 { margin:0; font-size:clamp(26px,3vw,38px); line-height:1.08; letter-spacing:-.045em; font-weight:600; }
.personal p { font-size:15px; line-height:1.7; }
.personal button { padding:0; background:transparent; text-align:left; }
.personal a:focus-visible,.personal button:focus-visible { outline:3px solid #365fe0; outline-offset:5px; }
.personal-photo { display:block; position:relative; overflow:hidden; width:100%; }
.personal-photo img { width:100%; height:auto; transition:transform .4s ease; }
.personal-photo:hover img { transform:scale(1.025); }
.photo-expand { position:absolute; display:grid; place-items:center; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%; background:#f1eee5; color:#18231f; font-size:20px; box-shadow:0 2px 8px #0002; }
.personal-label { display:block; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin-bottom:16px; }
.personal-bike { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:38px; align-items:center; }
.bike-picture { position:relative; }
.bike-picture > .personal-photo { aspect-ratio:4/3; }
.bike-picture > .personal-photo img { width:100%; height:100%; object-fit:cover; object-position:35% center; }
.bike-sticker { position:absolute; top:16px; right:-14px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:112px; height:112px; border-radius:50%; background:#c8e070; color:#233424; transform:rotate(9deg); pointer-events:none; border:1px solid #213722; box-shadow:4px 5px 0 #213722; }
.bike-sticker strong { font-size:42px; line-height:1; font-weight:750; }
.bike-sticker span { margin-top:5px; font-size:10px; font-weight:750; line-height:1.25; text-align:center; text-transform:uppercase; letter-spacing:.07em; }
.bike-copy > p { margin-top:20px; }
.bike-mosaic { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:22px; align-items:start; margin-top:26px; }
.bike-film { grid-column:1 / 4; grid-row:1 / 3; margin-top:54px!important; }
.ride-friends { grid-column:4 / 10; grid-row:1; }
.ride-horn { grid-column:10 / 13; grid-row:1 / 3; align-self:center; transform:rotate(3deg); }
.ride-demo { grid-column:4 / 7; grid-row:2; align-self:end; transform:rotate(-3deg); }
.ride-sons { grid-column:7 / 10; grid-row:2; }
.ride-ward { grid-column:1 / 6; grid-row:3; margin-top:24px; }
.ride-athletes { grid-column:6 / 13; grid-row:3; align-self:end; }
.personal-duo { display:grid; grid-template-columns:1.08fr 1fr; gap:22px; margin-top:64px; align-items:start; }
.personal-family { padding:30px; background:#f4d770; min-width:0; }
.family-stack { display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; margin:30px 0 24px; padding:8px 0; }
.family-stack .personal-photo { padding:5px; background:#fff; overflow:visible; box-shadow:0 7px 15px #5133172b; }
.family-stack .personal-photo img { aspect-ratio:3/2; object-fit:contain; background:#0c1015; }
.family-stack .personal-photo:nth-child(odd) { transform:rotate(-3deg); }
.family-stack .personal-photo:nth-child(even) { transform:rotate(3deg); }
.family-stack .personal-photo:hover { z-index:2; }
.family-stack .photo-expand { width:28px; height:28px; right:9px; bottom:9px; }
.personal-family > p { margin-top:18px; }
.instagram-preview { display:block; margin-top:24px; background:#fffdf7; color:#28332d; box-shadow:0 5px 16px #5d461a12; }
.instagram-screenshot { width:100%; height:auto; }
.instagram-preview-caption { display:flex; justify-content:space-between; gap:12px; padding:15px 16px; font-size:13px; font-weight:650; }
.instagram-preview:hover { box-shadow:0 8px 20px #5d461a25; }
.personal-service { padding:30px; background:#dbe3db; min-width:0; }
.service-picture { margin-bottom:25px; }
.personal-service > p { margin-top:18px; }
.service-fact { display:flex; align-items:center; gap:12px; margin:20px 0 8px; padding-top:18px; border-top:1px solid #a7b7a9; }
.service-fact strong { font-size:35px; line-height:1; }
.service-fact span { font-size:11px; line-height:1.4; }
.service-photo-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:14px; margin-top:24px; align-items:start; }
.service-photo-grid .personal-photo:first-child { grid-column:1 / -1; }
.service-photo-grid .personal-photo:last-child { margin-top:34px; }
.personal-inline-video { margin:0; width:100%; min-width:0; }
.inline-video-frame { aspect-ratio:9/16; width:100%; overflow:hidden; background:#0b1118; }
.inline-video-frame iframe { display:block; width:100%; height:100%; border:0; }
.personal-inline-video figcaption { display:flex; justify-content:space-between; gap:10px; align-items:start; margin-top:12px; font-size:12px; line-height:1.45; }
.personal-inline-video figcaption strong { font-weight:650; }
.personal-inline-video figcaption a { white-space:nowrap; font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.personal-build { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:26px; margin-top:64px; padding-top:42px; border-top:1px solid #b6bfb2; align-items:start; }
.build-intro { grid-column:1 / 6; grid-row:1; }
.build-copy { padding-top:12px; }
.build-copy > p { margin-top:20px; }
.build-pergola { margin:30px 0 0; }
.build-pergola figcaption,.build-basement figcaption { font-size:12px; line-height:1.5; margin-top:12px; color:#526055; }
.pergola-model { margin:28px 0 0; }
.sketchfab-embed-wrapper { width:100%; aspect-ratio:4/3; background:#172521; }
.sketchfab-embed-wrapper iframe { display:block; width:100%; height:100%; border:0; }
.pergola-model figcaption { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-top:13px; font-size:12px; line-height:1.5; }
.pergola-model figcaption strong { display:block; font-size:15px; font-weight:600; }
.pergola-model figcaption div > span { display:block; margin-top:4px; color:#526055; }
.pergola-model figcaption a { white-space:nowrap; border-bottom:1px solid #8a968d; padding-bottom:4px; }
.build-comparison { grid-column:6 / 13; grid-row:1; margin:0; }
.comparison-stage { position:relative; aspect-ratio:1; overflow:hidden; background:#1a2422; }
.comparison-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparison-after { object-position:center 30%; }
.comparison-before { clip-path:inset(0 calc(100% - var(--reveal)) 0 0); object-position:50% 50%; }
.comparison-label { position:absolute; top:18px; z-index:1; padding:7px 11px; background:#10201bba; color:#fff; font-size:11px; letter-spacing:.12em; text-transform:uppercase; pointer-events:none; }
.label-before { left:18px; }
.label-after { right:18px; }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--reveal); width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; z-index:2; box-shadow:0 0 7px #0004; }
.comparison-divider > span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:54px; height:54px; border:2px solid #fff; border-radius:50%; background:#172521; color:#fff; font-size:25px; letter-spacing:4px; padding-left:4px; }
.comparison-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3; touch-action:pan-y; }
.comparison-stage:focus-within { outline:3px solid #365fe0; outline-offset:4px; }
.comparison-stage:focus-within .comparison-divider > span { background:#365fe0; }
.build-comparison figcaption { margin-top:16px; }
.build-comparison figcaption > div { display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:12px; line-height:1.5; }
.build-comparison figcaption strong { font-size:16px; font-weight:600; }
.build-comparison figcaption #comparison-help { color:#526055; font-size:11px; }
.personal .fireplace-description { margin:12px 0 0; font-size:13px; line-height:1.65; color:#526055; max-width:510px; }
.build-details { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1.28fr .9fr; gap:30px; margin-top:20px; align-items:start; }
.build-basement { margin:42px 0 0; transform:rotate(-2deg); }
.trampoline-film { margin-top:94px; }
@media(max-width:1000px) {
 .personal { padding:34px; }
 .personal-bike { grid-template-columns:1.2fr 1fr; gap:28px; }
 .bike-picture > .personal-photo { aspect-ratio:4/5; }
 .bike-sticker { width:92px; height:92px; right:-10px; }
 .bike-sticker strong { font-size:34px; }
 .bike-sticker span { font-size:8px; }
 .bike-mosaic { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
 .bike-film { grid-column:1 / 3; grid-row:1 / 3; }
 .ride-friends { grid-column:3 / 7; grid-row:1; }
 .ride-demo { grid-column:3 / 5; grid-row:2; }
 .ride-sons { grid-column:5 / 7; grid-row:2; }
 .ride-horn { grid-column:1 / 3; grid-row:3; }
 .ride-ward { grid-column:3 / 7; grid-row:3; margin-top:0; }
 .ride-athletes { grid-column:2 / 6; grid-row:4; }
 .personal-duo { gap:18px; }
 .personal-family,.personal-service { padding:24px; }
 .personal p { font-size:14px; }
 .personal-build { gap:22px; }
 .build-details { grid-template-columns:1fr 1fr; gap:26px; }
 .pergola-film { grid-column:1; grid-row:1; }
 .build-basement { grid-column:2; grid-row:1; }
 .trampoline-film { grid-column:2; grid-row:2; margin-top:0; }
 .personal-inline-video figcaption { flex-wrap:wrap; gap:4px; }
 .build-comparison figcaption > div { flex-wrap:wrap; gap:5px 14px; }
}
@media(max-width:700px) {
 .personal { padding:30px 22px; }
 .personal-header { gap:14px; margin-bottom:30px; }
 .personal h3 { font-size:48px; }
 .personal-spark { width:55px; height:55px; }
 .personal-bike,.personal-duo { grid-template-columns:1fr; }
 .personal-bike { gap:28px; }
 .bike-picture > .personal-photo { aspect-ratio:16/10; }
 .personal h4 { font-size:32px; }
 .bike-copy { max-width:480px; }
 .bike-mosaic { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
 .bike-film { grid-column:1 / -1; grid-row:1; max-width:300px; margin-top:0!important; }
 .ride-friends { grid-column:1 / -1; grid-row:2; }
 .ride-horn { grid-column:4 / 7; grid-row:3; width:85%; justify-self:center; }
 .ride-demo { grid-column:1 / 4; grid-row:3; align-self:center; }
 .ride-sons { grid-column:1 / 4; grid-row:4; }
 .ride-ward { grid-column:4 / 7; grid-row:4; margin-top:8px; align-self:center; }
 .ride-athletes { grid-column:1 / -1; grid-row:5; margin-top:3px; }
 .personal-duo { margin-top:42px; gap:26px; }
 .personal-family,.personal-service { padding:26px; }
 .family-stack { margin-block:26px; }
 .personal-build { grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:42px; padding-top:32px; }
 .build-intro { grid-column:1 / -1; grid-row:1; }
 .build-copy { padding-top:0; }
 .build-comparison { grid-column:1 / -1; grid-row:2; }
 .build-details { grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px 16px; margin-top:8px; }
 .pergola-film { grid-column:1 / -1; grid-row:1; max-width:300px; }
 .build-basement { grid-column:2 / 7; grid-row:2; margin-top:8px; }
 .trampoline-film { grid-column:1 / -1; grid-row:3; max-width:300px; justify-self:end; margin-top:5px; }
 .comparison-divider > span { width:46px; height:46px; }
 .comparison-label { top:12px; padding:6px 8px; font-size:10px; }
 .label-before { left:12px; }
 .label-after { right:12px; }
}
@media(max-width:400px) {
 .pergola-model figcaption { flex-wrap:wrap; gap:10px; }
 .personal { padding:24px 16px; }
 .personal h3 { font-size:40px; }
 .personal-spark { width:42px; height:42px; }
 .personal-family,.personal-service { padding:22px 18px; }
 .personal h4 { font-size:29px; }
 .bike-sticker { width:76px; height:76px; top:10px; right:-6px; }
 .bike-sticker strong { font-size:28px; }
 .bike-sticker span { font-size:7px; }
 .photo-expand { width:28px; height:28px; right:8px; bottom:8px; font-size:18px; }
 .bike-mosaic { gap:14px; }
 .personal-inline-video figcaption { font-size:11px; }
 .personal-inline-video figcaption a { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .personal-photo img { transition:none; } }

body.personal-open { overflow:hidden; }
#personal-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:20px 32px; background:#080f18; color:#f5f1e8; overflow:hidden; }
#personal-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:18px; }
.personal-viewer-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.personal-viewer-top p { font-size:12px; color:#ccd4de; }
.personal-viewer-close { display:flex; align-items:center; gap:14px; padding:8px 12px; background:transparent; color:#f5f1e8; font-size:13px; }
.personal-viewer-close span { font-size:26px; }
#personal-media { min-height:0; display:flex; justify-content:center; align-items:center; }
#personal-media img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.personal-viewer-bottom { display:grid; grid-template-columns:46px minmax(0,1fr) 46px; gap:20px; align-items:center; }
.personal-viewer-bottom > button { width:46px; height:46px; border:1px solid #64707e; background:transparent; color:#f5f1e8; font-size:23px; }
.personal-viewer-caption { text-align:center; }
#personal-title { font-size:18px; font-weight:500; letter-spacing:0; line-height:1.35; }
#personal-position { display:block; font-size:11px; color:#aab7c7; margin-top:7px; }

@media(max-width:700px) {
 #personal-dialog { padding:12px 14px; }
 #personal-dialog[open] { gap:12px; }
 .personal-viewer-bottom { grid-template-columns:40px minmax(0,1fr) 40px; gap:10px; }
 .personal-viewer-bottom > button { width:40px; height:44px; }
 #personal-title { font-size:15px; }
}