/* ==========================================================================
   Client site mock-ups — the "before" and "after" artboards.
   Every artboard is a fixed 1200×750 canvas scaled by --s (set in main.js).
   Placeholder clients: swap for real captures before launch.
   ========================================================================== */
.site{position:absolute;top:0;left:0;width:1200px;height:calc(var(--ah,750)*1px);overflow:hidden;transform:scale(var(--s,1));transform-origin:0 0;display:none;text-align:left;letter-spacing:0;line-height:1.4}
.site.is-active{display:block}
.site *{box-sizing:border-box;margin:0;padding:0}
.site a{pointer-events:none}

/* Real projects use captures instead of built artboards */
.site--shot{background:#fff}
.site--shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.site--shot[data-side="after"] img{object-position:0 0}

/* ---------- BEFORE · Hartley & Co. (2014) ---------- */
.o-hart{background:#d9cfb4 repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px);font-family:Georgia,"Times New Roman",serif;color:#333;font-size:13px}
.o-hart .s-wrap{width:960px;height:100%;margin:0 auto;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.45)}
.o-hart .s-head{height:118px;background:linear-gradient(#7a5230,#4a2f17);padding:26px 30px;color:#f5e6c8;position:relative}
.o-hart .s-head b{font-size:38px;font-style:italic;text-shadow:2px 2px 0 #2a1808;font-weight:400}
.o-hart .s-head i{display:block;font-size:13px;color:#e0c89a;margin-top:2px}
.o-hart .s-head span{position:absolute;right:30px;top:34px;text-align:right;font:bold 15px Arial,sans-serif;color:#fff}
.o-hart .s-nav{display:flex;background:linear-gradient(#f4f4f4,#bdbdbd);border-top:1px solid #fff;border-bottom:1px solid #777}
.o-hart .s-nav a{flex:1;text-align:center;padding:9px 0;font:bold 12px Arial,sans-serif;color:#333;border-right:1px solid #999;text-shadow:0 1px 0 #fff;text-decoration:none}
.o-hart .s-nav a:first-child{background:linear-gradient(#8a5c34,#5b3a1c);color:#fff;text-shadow:none}
.o-hart .s-slide{margin:16px 20px;height:236px;border:5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);background:linear-gradient(135deg,#8d6a45,#c9a777 45%,#6e4c2c);position:relative}
.o-hart .s-slide::before,.o-hart .s-slide::after{content:"\25C0";position:absolute;top:96px;left:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:16px/34px Arial;text-align:center}
.o-hart .s-slide::after{content:"\25B6";left:auto;right:10px}
.o-hart .s-slide p{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;padding:8px 14px;font:12px Arial,sans-serif}
.o-hart .s-cols{display:flex;gap:22px;padding:6px 24px}
.o-hart .s-main{flex:1}
.o-hart .s-h1{font-size:23px;color:#5b3a1c;font-weight:400;border-bottom:1px dotted #a58a63;padding-bottom:6px;margin-bottom:10px}
.o-hart .s-main p{text-align:justify;line-height:1.55;margin-bottom:9px}
.o-hart .s-main a,.o-hart .s-side a{color:#00e;text-decoration:underline}
.o-hart .s-side{width:250px}
.o-hart .s-box{border:1px solid #c9b48e;background:#f8f1e1;margin-bottom:12px}
.o-hart .s-box .s-h2{background:linear-gradient(#8a5c34,#5b3a1c);color:#fff;font:bold 13px Arial,sans-serif;padding:6px 10px}
.o-hart .s-box div{padding:9px 10px;font-size:12px;line-height:1.5}
.o-hart .s-fb{display:inline-block;background:#3b5998;color:#fff;font:bold 12px Arial,sans-serif;padding:6px 10px;border-radius:3px}
.o-hart .s-count{font:12px "Courier New",monospace;background:#000;color:#3f3;padding:2px 6px;letter-spacing:2px}
.o-hart .s-foot{position:absolute;bottom:0;left:120px;width:960px;background:#4a2f17;color:#d8c29a;font:11px Arial,sans-serif;text-align:center;padding:9px}

/* ---------- BEFORE · Marsden Veterinary (2011) ---------- */
.o-mars{background:linear-gradient(#7fd3d8,#d9f3f4 60%);font-family:Verdana,Geneva,sans-serif;font-size:11px;color:#124}
.o-mars .s-wrap{width:900px;margin:14px auto 0;background:#fff;border:3px solid #1b7c86;height:722px}
.o-mars .s-head{height:110px;background:linear-gradient(90deg,#1b7c86,#5cc3c9);color:#fff;padding:22px 24px;position:relative}
.o-mars .s-head b{font:700 34px "Comic Sans MS","Chalkboard SE",cursive;text-shadow:2px 2px 3px rgba(0,0,0,.4)}
.o-mars .s-head i{display:block;font-size:12px;margin-top:4px}
.o-mars .s-paw{position:absolute;right:40px;top:26px;width:34px;height:30px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:-20px -22px 0 -8px rgba(255,255,255,.75),2px -30px 0 -8px rgba(255,255,255,.75),24px -22px 0 -8px rgba(255,255,255,.75),-70px 40px 0 -4px rgba(255,255,255,.35)}
.o-mars .s-tick{background:#ffef9c;border-top:1px solid #c7a800;border-bottom:1px solid #c7a800;color:#b00;font-weight:bold;padding:5px 0;overflow:hidden;white-space:nowrap}
.o-mars .s-tick span{display:inline-block;padding-left:100%;animation:o-tick 16s linear infinite}
@keyframes o-tick{to{transform:translateX(-100%)}}
.o-mars .s-body{display:flex}
.o-mars .s-menu{width:170px;padding:12px 10px;background:#e3f5f6;height:560px;border-right:1px solid #9fd4d8}
.o-mars .s-menu a{display:block;margin-bottom:6px;padding:7px 8px;background:linear-gradient(#fff,#bfe6e9);border:2px outset #9fd4d8;color:#0b4a52;font-weight:bold;text-decoration:none}
.o-mars .s-mid{flex:1;padding:14px 16px}
.o-mars .s-h1{font:700 19px "Comic Sans MS","Chalkboard SE",cursive;color:#1b7c86;margin-bottom:8px}
.o-mars .s-mid p{line-height:1.6;margin-bottom:9px}
.o-mars .s-mid p u{color:#00e}
.o-mars table{border-collapse:collapse;width:100%;margin-top:6px}
.o-mars td{border:1px solid #7fb9be;padding:4px 8px}
.o-mars tr:first-child td{background:#1b7c86;color:#fff;font-weight:bold}
.o-mars .s-right{width:200px;padding:14px 12px 0 0}
.o-mars .s-pet{border:2px ridge #5cc3c9;padding:8px;text-align:center;background:#f4fdfd}
.o-mars .s-pet .s-h2{font:700 14px "Comic Sans MS","Chalkboard SE",cursive;color:#c2185b;margin-bottom:6px}
.o-mars .s-img{height:120px;border:1px solid #999;background:#eee;color:#777;font-size:10px;text-align:left;padding:6px;margin-bottom:6px}
.o-mars .s-img::before{content:"";display:inline-block;width:12px;height:12px;border:1px solid #999;background:linear-gradient(135deg,#fff 50%,#d33 50%);margin-right:5px;vertical-align:-2px}
.o-mars .s-emerg{margin-top:10px;background:#c00;color:#ff0;font-weight:bold;text-align:center;padding:8px;font-size:12px;animation:o-blink 1s steps(2) infinite}
@keyframes o-blink{50%{opacity:.35}}

/* ---------- BEFORE · Penrose Removals (2009) ---------- */
.o-penr{background:#001a66;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#000}
.o-penr .s-wrap{width:1000px;height:100%;margin:0 auto;background:#fff;border-left:4px solid #fc0;border-right:4px solid #fc0}
.o-penr .s-head{height:130px;background:linear-gradient(#0033a0,#001a66);text-align:center;padding-top:18px;color:#fc0}
.o-penr .s-head b{font:400 46px Impact,"Arial Narrow Bold",sans-serif;letter-spacing:1px;text-shadow:3px 3px 0 #000}
.o-penr .s-head i{display:block;color:#fff;font-size:14px;font-weight:bold;margin-top:4px}
.o-penr .s-call{background:#fc0;color:#c00;font:400 25px Impact,"Arial Narrow Bold",sans-serif;text-align:center;padding:7px;border-top:3px solid #c00;border-bottom:3px solid #c00}
.o-penr .s-call span{animation:o-blink 1s steps(2) infinite}
.o-penr .s-nav{background:#c00;text-align:center;padding:7px;color:#fff;font-weight:bold}
.o-penr .s-nav a{color:#fff;margin:0 9px;text-decoration:underline}
.o-penr .s-cols{display:flex;gap:12px;padding:14px}
.o-penr .s-col{flex:1;border:3px double #0033a0;padding:10px;height:340px}
.o-penr .s-col .s-h2{font-weight:bold;background:#0033a0;color:#fc0;font-size:14px;padding:5px 8px;margin:-10px -10px 9px;text-transform:uppercase}
.o-penr .s-col p{line-height:1.5;margin-bottom:8px}
.o-penr .s-col li{margin:0 0 5px 16px}
.o-penr .s-col u{color:#00e}
.o-penr .s-van{height:96px;background:linear-gradient(#bcd 60%,#789 60%);border:1px solid #000;margin-bottom:8px;position:relative}
.o-penr .s-van::before{content:"";position:absolute;left:30px;bottom:24px;width:150px;height:52px;background:#fc0;border:2px solid #000;box-shadow:42px 14px 0 -12px #0033a0}
.o-penr .s-van::after{content:"";position:absolute;left:50px;bottom:12px;width:24px;height:24px;border-radius:50%;background:#111;box-shadow:96px 0 0 #111}
.o-penr .s-in{display:block;width:100%;height:22px;border:2px inset #ccc;margin-bottom:7px;background:#fff}
.o-penr .s-btn{display:inline-block;border:2px outset #ddd;background:#ddd;padding:3px 14px;font-weight:bold}
.o-penr .s-foot{text-align:center;font-size:11px;color:#333;padding:6px 40px;line-height:1.6}
.o-penr .s-count{font:12px "Courier New",monospace;background:#000;color:#f33;padding:1px 6px;letter-spacing:2px}

/* ---------- AFTER · Hartley & Co. ---------- */
.n-hart{background:#F1ECE1;color:#1C2B22;font-family:"DM Sans",system-ui,sans-serif}
.n-hart .s-nav{display:flex;align-items:center;justify-content:space-between;padding:30px 56px}
.n-hart .s-logo{font:500 25px Fraunces,Georgia,serif;letter-spacing:-.5px}
.n-hart .s-links{display:flex;gap:34px;font-size:14.5px;align-items:center}
.n-hart .s-links b{font-weight:500;background:#1C2B22;color:#F1ECE1;padding:13px 22px;border-radius:40px}
.n-hart .s-hero{display:flex;padding:22px 56px 0;gap:48px}
.n-hart .s-copy{flex:1;padding-top:14px}
.n-hart .s-kick{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:#A4582F;margin-bottom:26px}
.n-hart .s-h1{font:400 84px/.98 Fraunces,Georgia,serif;letter-spacing:-3px}
.n-hart .s-h1 em{font-style:italic;color:#A4582F}
.n-hart .s-lede{font-size:18px;line-height:1.55;max-width:430px;margin:24px 0 26px;color:#47554B}
.n-hart .s-cta{display:flex;gap:22px;align-items:center;font-size:15px}
.n-hart .s-cta b{font-weight:500;background:#A4582F;color:#fff;padding:16px 28px;border-radius:40px}
.n-hart .s-cta span{border-bottom:1px solid currentColor;padding-bottom:3px}
.n-hart .s-pic{width:440px;height:560px;border-radius:220px 220px 0 0;position:relative;overflow:hidden;background:
  repeating-linear-gradient(92deg,rgba(60,30,10,.16) 0 1px,transparent 1px 9px),
  repeating-linear-gradient(88deg,rgba(255,220,170,.10) 0 2px,transparent 2px 23px),
  linear-gradient(160deg,#C58B55,#8F5A2E 55%,#6F4220)}
.n-hart .s-pic::before{content:"";position:absolute;left:60px;right:60px;bottom:0;height:330px;background:linear-gradient(#22352A,#16241C);box-shadow:inset 0 0 0 10px #2C4436,inset 0 0 0 11px rgba(0,0,0,.4)}
.n-hart .s-pic::after{content:"";position:absolute;left:50%;bottom:150px;width:8px;height:44px;margin-left:34px;border-radius:4px;background:#D9B26A}
.n-hart .s-facts{position:absolute;left:56px;bottom:26px;display:flex;gap:44px;font-size:13px;color:#47554B}
.n-hart .s-facts b{display:block;font:400 26px Fraunces,Georgia,serif;color:#1C2B22;letter-spacing:-.6px}

/* ---------- AFTER · Marsden Veterinary ---------- */
.n-mars{background:#E9F0E6;color:#15302A;font-family:"DM Sans",system-ui,sans-serif}
.n-mars::before{content:"";position:absolute;right:-160px;top:-160px;width:620px;height:620px;border-radius:50%;background:#D5E3D0}
.n-mars::after{content:"";position:absolute;right:300px;bottom:-120px;width:260px;height:260px;border-radius:50%;background:#FFD9CC}
.n-mars .s-nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:30px 56px}
.n-mars .s-logo{font-weight:700;font-size:21px;letter-spacing:-.6px;display:flex;align-items:center;gap:10px}
.n-mars .s-logo::before{content:"";width:26px;height:26px;border-radius:50% 50% 50% 4px;background:#FF7A59}
.n-mars .s-links{display:flex;gap:32px;font-size:14.5px;align-items:center}
.n-mars .s-open{display:flex;align-items:center;gap:8px;background:#fff;padding:10px 16px;border-radius:30px;font-weight:500}
.n-mars .s-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#2FA36B}
.n-mars .s-hero{position:relative;z-index:1;display:flex;gap:40px;padding:48px 56px 0;align-items:flex-start}
.n-mars .s-copy{flex:1}
.n-mars .s-h1{font-weight:700;font-size:82px;line-height:.98;letter-spacing:-4px}
.n-mars .s-h1 span{color:#FF7A59}
.n-mars .s-lede{font-size:18px;line-height:1.55;max-width:440px;margin:28px 0 0;color:#3E5750}
.n-mars .s-trust{display:flex;gap:36px;margin-top:64px;font-size:13px;color:#3E5750}
.n-mars .s-trust b{display:block;font-size:28px;letter-spacing:-1px;color:#15302A}
.n-mars .s-card{width:420px;background:#fff;border-radius:26px;padding:32px;box-shadow:0 30px 60px rgba(21,48,42,.14)}
.n-mars .s-card .s-h2{font-weight:700;font-size:22px;letter-spacing:-.6px;margin-bottom:20px}
.n-mars .s-lab{font-size:12px;color:#6B807A;margin:16px 0 8px}
.n-mars .s-chips{display:flex;gap:8px}
.n-mars .s-chips span{padding:10px 16px;border-radius:30px;background:#EEF3EC;font-size:14px}
.n-mars .s-chips .s-on{background:#15302A;color:#fff}
.n-mars .s-days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.n-mars .s-days span{text-align:center;padding:10px 0;border-radius:14px;background:#EEF3EC;font-size:12px;color:#6B807A}
.n-mars .s-days b{display:block;font-size:18px;color:#15302A}
.n-mars .s-days .s-on{background:#FFE4DB}
.n-mars .s-go{margin-top:24px;background:#FF7A59;color:#fff;text-align:center;padding:17px;border-radius:40px;font-weight:600;font-size:15px}

/* ---------- AFTER · Penrose Removals ---------- */
.n-penr{background:#0D1A3C;color:#fff;font-family:Archivo,system-ui,sans-serif}
.n-penr .s-nav{display:flex;align-items:center;justify-content:space-between;padding:30px 56px}
.n-penr .s-logo{font-weight:800;font-stretch:75%;font-size:26px;text-transform:uppercase;letter-spacing:.5px}
.n-penr .s-logo i{font-style:normal;color:#FFD23F}
.n-penr .s-links{display:flex;gap:32px;font-size:14.5px;align-items:center;color:#C5CDE3}
.n-penr .s-links b{color:#0D1A3C;background:#FFD23F;padding:12px 20px;font-weight:700}
.n-penr .s-hero{display:flex;gap:40px;padding:34px 56px 0}
.n-penr .s-copy{flex:1}
.n-penr .s-kick{font:500 12px "Roboto Mono",monospace;letter-spacing:2.2px;text-transform:uppercase;color:#FFD23F;margin-bottom:22px}
.n-penr .s-h1{font-weight:800;font-stretch:68%;font-size:98px;line-height:.88;text-transform:uppercase;letter-spacing:-1px}
.n-penr .s-h1 span{color:#FFD23F}
.n-penr .s-lede{font-size:18px;line-height:1.55;max-width:430px;margin:26px 0 0;color:#C5CDE3}
.n-penr .s-card{width:400px;background:#fff;color:#0D1A3C;padding:30px}
.n-penr .s-card .s-h2{font-weight:800;font-stretch:75%;font-size:28px;text-transform:uppercase;line-height:1;margin-bottom:20px}
.n-penr .s-f{border:1.5px solid #D5DAE8;padding:11px 14px;margin-bottom:10px;font-size:15px;font-weight:500}
.n-penr .s-f small{display:block;font:500 10px "Roboto Mono",monospace;letter-spacing:1.4px;text-transform:uppercase;color:#7C86A6;margin-bottom:3px}
.n-penr .s-beds{display:flex;gap:8px;margin-bottom:16px}
.n-penr .s-beds span{flex:1;text-align:center;padding:11px 0;border:1.5px solid #D5DAE8;font-weight:600}
.n-penr .s-beds .s-on{background:#0D1A3C;color:#FFD23F;border-color:#0D1A3C}
.n-penr .s-go{background:#FFD23F;text-align:center;padding:16px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.n-penr .s-strip{position:absolute;left:0;right:0;bottom:0;display:flex;border-top:1px solid rgba(255,255,255,.14)}
.n-penr .s-strip div{flex:1;padding:22px 56px;font-size:13px;color:#C5CDE3;border-right:1px solid rgba(255,255,255,.14)}
.n-penr .s-strip b{display:block;font-weight:800;font-stretch:75%;font-size:28px;color:#fff}