/* =====================================================================
   SUMMER ST. STUDIO · CONCEPT PREVIEW STYLES
   =====================================================================
   The drawn website previews that appear inside browser frames and
   phones across the portfolio: the shared mockup language (.mk), the
   North Room editorial variant (.mk-ed), Good Dog (.mk-gdx), The Hill
   House (.mk-hh), the Aqualift rebuild (.aq) and the site it replaced
   (.ob), plus the before / after reveal.
   These are the projects' imagery. Site-level design lives in
   css/styles.css — you should not need to edit this file.
   ===================================================================== */
/* ---------- browser frames ---------- */
.frame{
  border:1px solid var(--hairline-dark);
  background:#fff;overflow:hidden;
  box-shadow:0 18px 44px -22px rgba(37,37,37,.28);
}
.frame-bar{
  height:32px;background:#F2EEE6;border-bottom:1px solid rgba(37,37,37,.12);
  display:flex;align-items:center;gap:7px;padding:0 13px;
}
.frame-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--sand);border:1px solid rgba(37,37,37,.18);}
.frame-bar .addr{
  margin-left:9px;flex:1;max-width:280px;height:17px;border-radius:9px;
  background:#fff;border:1px solid rgba(37,37,37,.12);
  font-size:10px;letter-spacing:.06em;color:var(--ink-soft);
  display:flex;align-items:center;padding:0 11px;overflow:hidden;white-space:nowrap;
}
.frame-body{position:relative;overflow:hidden;}
.mock-scale{transition:transform 1s var(--ease);}
a:hover .mock-scale,.frame:hover .mock-scale{transform:scale(1.02);}
.phone{
  width:min(230px,60vw);
  border:1px solid var(--hairline-dark);border-radius:24px;background:#fff;overflow:hidden;
  box-shadow:0 16px 38px -18px rgba(37,37,37,.3);
}
.phone .notch{height:20px;background:#F2EEE6;border-bottom:1px solid rgba(37,37,37,.1);display:flex;justify-content:center;align-items:center;}
.phone .notch::after{content:"";width:52px;height:5px;border-radius:3px;background:rgba(37,37,37,.16);}
/* ---------- mini-site mockups (each portfolio piece is a rendered design) ---------- */
.mk{--m-bg:#F4EFE6;--m-ink:#28221D;--m-acc:#8B6854;--m-dark:#28221D;background:var(--m-bg);color:var(--m-ink);}
.mk .mk-nav{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid color-mix(in srgb,var(--m-ink) 18%,transparent);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.mk .mk-nav .mklinks{display:flex;gap:12px;opacity:.75;}
.mk .mk-brand{font-family:var(--m-font,var(--serif));font-size:12px;letter-spacing:.04em;text-transform:none;font-weight:400;}
.mk .mk-hero{padding:26px 18px 22px;}
.mk .mk-kick{font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--m-acc);margin-bottom:10px;}
.mk .mk-h1{font-family:var(--m-font,var(--serif));font-size:clamp(18px,2.2vw,27px);line-height:1.08;letter-spacing:-.01em;max-width:15ch;}
.mk .mk-h1 em{font-style:italic;color:var(--m-acc);}
.mk .mk-cta{display:inline-block;margin-top:12px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border:1px solid var(--m-ink);padding:7px 12px;border-radius:1px;}
.mk .mk-imgs{display:grid;gap:8px;padding:0 18px 20px;}
.mk .mk-imgs.two{grid-template-columns:2fr 1fr;}
.mk .mk-imgs.three{grid-template-columns:1fr 1fr 1fr;}
.mk .mk-img{border-radius:2px;min-height:64px;position:relative;overflow:hidden;}
.mk .mk-band{background:var(--m-band-bg,var(--m-dark));color:var(--m-band-ink,var(--m-bg));padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.mk .mk-band .b-serif{font-family:var(--m-font,var(--serif));font-size:13px;font-style:italic;}
.mk .mk-band .b-tag{font-size:7px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;}
.mk .mk-lines{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px;}
.mk .mk-line{height:5px;border-radius:2px;background:color-mix(in srgb,var(--m-ink) 24%,transparent);}
.mk .mk-line.w60{width:60%;}
.mk .mk-line.w80{width:80%;}
.mk .mk-line.w40{width:40%;}
/* textures for mock imagery */
.tx-hills{background:radial-gradient(140% 120% at 20% 130%, var(--t1) 55%, transparent 56%),radial-gradient(150% 150% at 85% 150%, var(--t2) 60%, transparent 61%),linear-gradient(180deg,var(--t3),var(--t4));}
.tx-arch{background:linear-gradient(var(--t1),var(--t1));position:relative;}
.tx-arch::before{content:"";position:absolute;inset:12% 22% 0;border-radius:200px 200px 0 0;background:var(--t2);}
.tx-arch::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;background:var(--t3);}
.tx-split{background:linear-gradient(105deg,var(--t1) 0 55%,var(--t2) 55% 100%);}
.tx-rows{background:repeating-linear-gradient(90deg,var(--t1) 0 10px,var(--t2) 10px 20px);}
.tx-sun{background:radial-gradient(circle at 72% 30%, var(--t1) 0 16%, transparent 17%),linear-gradient(180deg,var(--t2),var(--t3));}
.tx-grain{background:linear-gradient(160deg,var(--t1),var(--t2));}
/* phone mock */
.phone .mk .mk-hero{padding:18px 14px 14px;}
.phone .mk .mk-h1{font-size:16px;}
.phone .mk .mk-imgs{padding:0 14px 14px;}
.phone .mk .mk-nav{padding:10px 14px;}
/* ---------- mock variants ---------- */
.mk.bold .mk-h1{font-weight:600;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;}
.mk.bold .mk-h1 em{font-style:normal;color:var(--m-acc);}
.mk .mk-hero.center{text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:14px;}
.mk .mk-hero.center .mk-h1{max-width:22ch;}
.mk .mk-rows{padding:0 18px 16px;display:flex;flex-direction:column;gap:6px;}
.mk .mk-trow{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid color-mix(in srgb,var(--m-ink) 15%,transparent);border-radius:2px;
  padding:7px 11px;font-size:8px;letter-spacing:.08em;
}
.mk .mk-trow .t-time{font-weight:700;color:var(--m-acc);flex:none;}
.mk .mk-trow .t-dot{width:6px;height:6px;border-radius:50%;background:var(--m-acc);opacity:.6;flex:none;}
.mk .mk-heroimg{height:96px;}
.mk .mk-split{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;align-items:center;padding:16px 18px;}
.mk .mk-split .mk-img{border-radius:2px;}
.mk .mk-products{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 16px;}
.mk .mk-prod{border:1px solid color-mix(in srgb,var(--m-ink) 15%,transparent);border-radius:2px;overflow:hidden;}
.mk .mk-prod .p-img{height:50px;}
.mk .mk-prod .p-name{font-family:var(--m-font,var(--serif));font-size:9px;padding:6px 8px 2px;line-height:1.2;}
.mk .mk-prod .p-price{font-size:7px;letter-spacing:.12em;text-transform:uppercase;padding:0 8px 7px;color:var(--m-acc);font-weight:700;}
.mk .mk-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 14px;}
.mk .mk-chip{
  font-size:7px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border:1px solid color-mix(in srgb,var(--m-ink) 32%,transparent);padding:5px 8px;border-radius:1px;
}
.phone .mk .mk-rows{padding:0 14px 12px;}
.phone .mk .mk-products{grid-template-columns:1fr 1fr;padding:0 14px 12px;}
.phone .mk .mk-split{grid-template-columns:1fr;padding:14px;}
.phone .mk .mk-chips{padding:0 14px 12px;}
.phone .mk .mk-heroimg{height:70px;}

/* ---------- stock photos in mock-ups ---------- */
.mk .photo, .mk-img.photo, .mk .p-img.photo, .mk-heroimg.photo{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:color-mix(in srgb, var(--m-acc) 22%, var(--m-bg));
}

/* ---------- per-concept display type ---------- */
.mk.bold .mk-brand{text-transform:uppercase;letter-spacing:.08em;font-size:11px;}
.mk.bold .mk-band .b-serif{font-style:normal;text-transform:uppercase;font-size:11px;letter-spacing:.1em;}
/* ============ editorial mock variant (North Room) ============ */
.mk-ed .mk-nav{border-bottom:0;padding-bottom:8px;}
.mk-ed .mk-brand{font-family:inherit;font-size:9px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;}
.mk-ed .mk-nav .mklinks span:last-child{border:1px solid var(--m-ink);padding:2px 6px;}
.mk-ed .photo{filter:grayscale(1) contrast(1.05);background-size:cover;background-position:center;border-radius:2px;}
.mk-ed .mk-edhero{padding:10px 18px 0;}
.mk-ed .mk-edh1{font-family:var(--m-font,var(--serif));font-size:clamp(20px,2.6vw,31px);line-height:1.03;letter-spacing:-.02em;max-width:13ch;position:relative;z-index:2;font-weight:500;}
.mk-ed .mk-edrow{display:flex;align-items:flex-end;gap:12px;margin-top:-4px;}
.mk-ed .mk-edside{flex:0 0 32%;padding-bottom:6px;}
.mk-ed .mk-edside p,.mk-ed .mk-edside-p{font-size:7.5px;line-height:1.5;color:color-mix(in srgb,var(--m-ink) 72%,var(--m-bg));margin:0 0 6px;max-width:24ch;}
.mk-ed .mk-tlink{font-size:7.5px;letter-spacing:.02em;border-bottom:1px solid var(--m-ink);padding-bottom:1px;white-space:nowrap;}
.mk-ed .mk-edphoto{flex:1;height:88px;margin-top:-14px;margin-right:-18px;border-radius:2px 0 0 2px;}
.mk-ed .mk-marquee{overflow:hidden;white-space:nowrap;padding:12px 0 10px;}
.mk-ed .mq-track{display:inline-flex;gap:18px;animation:mq-drift 26s linear infinite;will-change:transform;}
.mk-ed .mq-item{font-family:var(--m-font,var(--serif));font-size:15px;letter-spacing:-.01em;}
.mk-ed .mq-item em{font-style:normal;color:color-mix(in srgb,var(--m-ink) 55%,var(--m-bg));margin-right:4px;}
@keyframes mq-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mk-ed .mk-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px 18px 14px;}
.mk-ed .mk-rail.two{grid-template-columns:repeat(2,1fr);padding:2px 14px 12px;}
.mk-ed .r-img{aspect-ratio:3/4;border-radius:2px;}
.mk-ed .r-name{display:block;font-family:var(--m-font,var(--serif));font-size:8.5px;margin-top:4px;}
.mk-ed .mk-band .b-serif{font-style:normal;font-size:12px;max-width:26ch;line-height:1.25;}
.mk-ed .mk-shelf{display:grid;grid-template-columns:1.05fr 1fr .55fr;gap:10px;align-items:start;padding:16px 18px 18px;background:var(--m-shelf,#D4C1A4);}
.mk-ed .mk-shelfcopy{padding-top:6px;}
.mk-ed .mk-shelfimg{aspect-ratio:4/5;grid-row:span 2;}
.mk-ed .mk-shelfdetail{aspect-ratio:1/1;margin-top:34px;margin-left:-26px;position:relative;z-index:2;}
.phone .mk-ed .mk-edhero{padding:12px 14px 0;}
.phone .mk-ed .mk-edh1{font-size:17px;max-width:12ch;}
.phone .mk-ed .mk-edphonephoto{height:64px;margin:0 0 2px;border-radius:0;}
.phone .mk-ed .mq-item{font-size:12px;}
@media (prefers-reduced-motion:reduce){.mk-ed .mq-track{animation:none;}}
/* ============ editorial mock, breathing room ============ */
.mk-ed .mk-nav{padding:16px 26px 12px;}
.mk-ed .mk-edhero{padding:22px 26px 0;}
.mk-ed .mk-edh1{font-size:clamp(21px,2.7vw,33px);}
.mk-ed .mk-edrow{gap:20px;margin-top:2px;}
.mk-ed .mk-edside{flex:0 0 30%;padding-bottom:10px;}
.mk-ed .mk-edside p{margin-bottom:8px;}
.mk-ed .mk-edphoto{height:96px;margin-top:-12px;margin-right:-26px;}
.mk-ed .mk-marquee{padding:22px 0 18px;}
.mk-ed .mq-track{gap:26px;}
.mk-ed .mk-rail{gap:16px;padding:4px 26px 30px;}
.mk-ed .r-name{margin-top:6px;}
.mk-ed .mk-band{padding:22px 26px;}
.mk-ed .mk-shelf{gap:16px;padding:24px 26px 26px;}
.phone .mk-ed .mk-nav{padding:12px 14px;}
.phone .mk-ed .mk-rail{padding:2px 14px 18px;gap:10px;}

/* ============ editorial mock v2: big text, big image, real space ============ */
.mk-ed .mk-edh1{font-size:clamp(26px,3.6vw,44px);line-height:1.02;max-width:11ch;}
.mk-ed .mk-edrow{gap:24px;margin-top:6px;align-items:flex-start;}
.mk-ed .mk-edside{flex:0 0 26%;padding-top:10px;padding-bottom:0;}
.mk-ed .mk-edside p{font-size:8px;max-width:22ch;margin-bottom:8px;}
.mk-ed .mk-tlink{font-size:8px;}
.mk-ed .mk-edphoto{height:170px;margin-top:-30px;margin-right:-26px;}
.mk-ed .mk-edspace{height:44px;}
.mk-ed .mk-marquee{padding:6px 0 26px;}
.mk-ed .mq-item{font-size:19px;}
.mk-ed .mq-track{gap:32px;}
.phone .mk-ed .mk-edh1{font-size:20px;max-width:11ch;}
.phone .mk-ed .mk-edphonephoto{height:78px;}
.phone .mk-ed .mk-edspace{height:22px;}
.phone .mk-ed .mq-item{font-size:13px;}

/* ============ editorial mock v3: hero photo at full scale ============ */
.mk-ed .mk-edphoto{height:auto;aspect-ratio:16/10;margin-top:-36px;margin-right:-26px;background-position:center 30%;}
.mk-ed .mk-edrow{align-items:flex-end;}
.mk-ed .mk-edside{padding-bottom:14px;}
.mk-ed .mk-edspace{height:30px;}
.phone .mk-ed .mk-edphonephoto{height:auto;aspect-ratio:4/3;background-position:center 30%;}
/* ============ Good Dog v2: animated poster world ============ */
.gdx-wrap{container-type:inline-size;width:100%;}
.mk-gdx{--gx-cream:#FFF8ED;--gx-powder:#B9D9EA;--gx-pist:#BFD6AE;--gx-butter:#F4DB83;--gx-peach:#F2B59B;--gx-tomato:#EB6548;--gx-lilac:#C9B9DA;--gx-ink:#292522;
  font-family:"DM Sans",sans-serif;background:var(--gx-cream);color:var(--gx-ink);}
.mk-gdx .gdx-w,.mk-gdx .gdx-mark,.mk-gdx .gdx-balab,.mk-gdx .gdx-frankh,.mk-gdx .gdx-float{
  font-family:"Baloo 2",sans-serif;font-weight:800;line-height:.92;letter-spacing:.005em;}
.mk-gdx .photo{background-size:cover;background-position:center;}

/* nav */
.mk-gdx .gdx-nav{border-bottom:0;padding:13px 22px 6px;align-items:center;text-transform:none;letter-spacing:0;}
.mk-gdx .gdx-mark{font-size:15px;display:flex;align-items:flex-end;gap:4px;position:relative;line-height:1;}
.mk-gdx .gdx-markgood{color:var(--gx-tomato);transform:translateY(-2.5px);display:inline-block;}
.mk-gdx .gdx-star{width:10px;height:10px;fill:var(--gx-butter);}
.mk-gdx .gdx-markstar{position:absolute;top:-7px;right:-11px;transform:rotate(14deg);}
.mk-gdx .gdx-links{font-size:8.5px;font-weight:500;gap:11px;opacity:.9;}
.mk-gdx .gdx-btn{background:var(--gx-tomato);color:var(--gx-cream);font-family:"DM Sans",sans-serif;font-weight:700;font-size:8px;padding:6px 11px;border-radius:4px;white-space:nowrap;}
.mk-gdx .gdx-btnbig{font-size:clamp(8px,1.7cqw,13px);padding:1.5cqw 2.8cqw;}

/* scene 01: poster hero */
.mk-gdx .gdx-hero{padding:3cqw 5cqw 5cqw;position:relative;}
.mk-gdx .gdx-words{line-height:.94;position:relative;z-index:1;}
.mk-gdx .gdx-w1{font-size:8.5cqw;}
.mk-gdx .gdx-w2{font-size:12.5cqw;color:var(--gx-tomato);transform:rotate(-2deg);margin:.5cqw 0;display:inline-block;}
.mk-gdx .gdx-w3{font-size:10.5cqw;}
.mk-gdx .gdx-archwrap{position:relative;z-index:2;background:var(--gx-powder);padding:.8cqw .8cqw 0;border-radius:60cqw 60cqw 1.2cqw 1.2cqw;}
/* Only the desktop hero pins its arch to the right; the Frank page and
   the phone mock lay theirs out in flow. */
.mk-gdx .gdx-hero .gdx-archwrap{position:absolute;right:6cqw;top:47%;transform:translateY(-50%);width:29cqw;}
.mk-gdx .gdx-arch{aspect-ratio:3/3.6;border-radius:60cqw 60cqw .8cqw .8cqw;}
.mk-gdx .gdx-archstar{position:absolute;top:1cqw;right:-1.6cqw;width:2.6cqw;height:2.6cqw;transform:rotate(-10deg);}
.mk-gdx .gdx-note{font-family:"Caveat",cursive;font-weight:600;font-size:clamp(11px,2.2cqw,20px);color:var(--gx-ink);white-space:nowrap;}
.mk-gdx .gdx-archnote{position:absolute;left:50%;bottom:-3.4cqw;transform:translateX(-58%) rotate(-4deg);}
.mk-gdx .gdx-heroline{display:flex;align-items:center;gap:2.6cqw;margin-top:3.4cqw;position:relative;z-index:1;}
.mk-gdx .gdx-meta{font-size:clamp(7px,1.5cqw,12px);font-weight:500;opacity:.75;}

/* scallop transition */
.mk-gdx .gdx-scallop{height:10px;background:radial-gradient(circle at 8px 10px,var(--gx-pist) 8px,transparent 8.5px);background-size:16px 10px;background-repeat:repeat-x;}

/* scene 02: floating word field */
.mk-gdx .gdx-field{background:var(--gx-pist);position:relative;height:clamp(64px,13cqw,130px);overflow:hidden;}
.mk-gdx .gdx-float{position:absolute;color:var(--gx-ink);}
.mk-gdx .gdx-f1{top:18%;left:5cqw;font-size:clamp(11px,2.6cqw,22px);animation:gdx-d1 9s ease-in-out infinite alternate;}
.mk-gdx .gdx-f2{top:4%;right:-2cqw;font-size:clamp(34px,8.5cqw,80px);color:var(--gx-cream);transform:rotate(-3deg);animation:gdx-d2 12s ease-in-out infinite alternate;}
.mk-gdx .gdx-f3{bottom:14%;left:38%;font-size:clamp(9px,2cqw,17px);transform:rotate(2deg);opacity:.85;animation:gdx-d1 11s ease-in-out infinite alternate-reverse;}
.mk-gdx .gdx-f4{top:48%;left:16%;font-size:clamp(8px,1.7cqw,14px);opacity:.6;}
@keyframes gdx-d1{from{transform:translateX(0)}to{transform:translateX(9px)}}
@keyframes gdx-d2{from{transform:translateX(0) rotate(-3deg)}to{transform:translateX(-11px) rotate(-3deg)}}

/* scene 03: before + very after on butter */
.mk-gdx .gdx-ba{background:var(--gx-butter);display:flex;align-items:flex-start;justify-content:center;gap:5cqw;padding:4.5cqw 5cqw 9.5cqw;position:relative;}
.mk-gdx .gdx-bacol{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;}
.mk-gdx .gdx-balab{font-size:clamp(10px,2cqw,17px);letter-spacing:.04em;}
.mk-gdx .gdx-baph{width:clamp(84px,17cqw,160px);height:clamp(84px,17cqw,160px);}
.mk-gdx .gdx-blob1{border-radius:52% 48% 55% 45%/50% 56% 44% 50%;}
.mk-gdx .gdx-blob2{border-radius:46% 54% 44% 56%/55% 46% 54% 45%;}
.mk-gdx .gdx-arrow{width:clamp(44px,9cqw,84px);height:auto;stroke:var(--gx-ink);align-self:center;margin-bottom:4cqw;flex:none;}
.mk-gdx .gdx-banote{position:absolute;bottom:1.6cqw;left:50%;transform:translateX(-50%) rotate(-2deg);}

/* interior: MEET FRANK on lilac */
.mk-gdx .gdx-frank{background:var(--gx-lilac);padding:3cqw 5cqw 5cqw;}
.mk-gdx .gdx-frankh{font-size:7.5cqw;}
.mk-gdx .gdx-frankstage{position:relative;display:flex;justify-content:center;margin-top:2.4cqw;}
.mk-gdx .gdx-frankarch{width:30%;margin:0;background:var(--gx-cream);}
.mk-gdx .gdx-chip{position:absolute;z-index:3;font-size:clamp(7px,1.5cqw,12px);font-weight:700;padding:.8cqw 1.8cqw;border-radius:2cqw;background:var(--gx-cream);white-space:nowrap;box-shadow:0 1px 0 rgba(41,37,34,.18);}
.mk-gdx .gdx-c1{top:7%;left:8%;background:var(--gx-powder);transform:rotate(-4deg);}
.mk-gdx .gdx-c2{top:44%;left:13%;background:var(--gx-butter);transform:rotate(2deg);}
.mk-gdx .gdx-c3{bottom:7%;left:6%;transform:rotate(-2deg);}
.mk-gdx .gdx-c4{top:16%;right:9%;background:var(--gx-peach);transform:rotate(3deg);}
.mk-gdx .gdx-c5{bottom:15%;right:12%;background:var(--gx-pist);transform:rotate(-3deg);}

/* phone */
.phone .mk-gdx .gdx-nav{padding:11px 14px 4px;}
.phone .mk-gdx .gdx-phero{padding:4px 14px 12px;position:relative;}
.phone .mk-gdx .gdx-pw1{font-size:34px;}
.phone .mk-gdx .gdx-pscene{display:flex;align-items:flex-end;margin:-4px 0 -6px;}
.phone .mk-gdx .gdx-parch{width:52%;margin:-6px -14px 0 0;order:2;}
.phone .mk-gdx .gdx-pw2{font-size:44px;color:var(--gx-tomato);transform:rotate(-2deg);position:relative;z-index:2;margin-right:-10px;}
.phone .mk-gdx .gdx-pw3{font-size:38px;position:relative;z-index:2;margin-top:-8px;}
.phone .mk-gdx .gdx-phero .gdx-note{position:absolute;bottom:2px;right:12px;transform:rotate(-4deg);}
.phone .mk-gdx .gdx-pfield{height:64px;}
.phone .mk-gdx .gdx-pfield .gdx-f2{font-size:32px;}
.phone .mk-gdx .gdx-pbook{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px;}
.phone .mk-gdx .gdx-pbook .gdx-btn{width:100%;text-align:center;}
.phone .mk-gdx .gdx-tiny{font-size:7px;opacity:.7;}


/* Inside the phone frames the mock has its own fixed-size layout; the
   desktop cqw hero rules above do not apply because the phone builder
   emits gdx-phero markup instead. Only shared bits need re-pinning. */
.phone .mk-gdx .gdx-note{font-size:12px;}
.phone .mk-gdx .gdx-btnbig{font-size:9px;padding:8px 15px;}
@media (prefers-reduced-motion:reduce){.mk-gdx .gdx-float{animation:none!important;}}

/* ============ Coming Soon featured slot ============ */
.mk-cs{background:#EFECE4;min-height:300px;display:flex;align-items:center;justify-content:center;}
.cs-inner{text-align:center;padding:56px 24px;}
.cs-kicker{font-size:8px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--ink,#1A1917);opacity:.55;display:block;margin-bottom:14px;}
.cs-h{font-family:"Source Serif 4",serif;font-weight:600;font-size:clamp(44px,6vw,76px);line-height:1.02;letter-spacing:-.015em;color:#1A1917;}
.cs-h em{font-style:italic;font-weight:500;}
.cs-sub{display:block;margin-top:14px;font-size:10px;letter-spacing:.08em;color:#1A1917;opacity:.6;}
/* ============ The Hill House mock v3: fresh, architectural, regional ============ */
.mk-hh{--hh-white:#FAFAF8;--hh-green:#263C35;--hh-sky:#B9CBD1;--hh-wine:#752F3D;--hh-blue:#DCE8EA;--hh-ink:#242424;--hh-timber:#A87956;
  font-family:"Instrument Sans",sans-serif;background:var(--hh-white);color:var(--hh-ink);}
.mk-hh .photo{background-size:cover;background-position:center;}
.mk-hh .hh-serifface,.mk-hh .hh-name,.mk-hh .hh-brand,.mk-hh .hh-introh,.mk-hh .hh-guideh,.mk-hh .hh-needh{font-family:"Newsreader","Source Serif 4",serif;font-weight:600;}

/* nav */
.mk-hh .hh-nav{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;gap:14px;}
.mk-hh .hh-navover{position:absolute;top:0;left:0;right:0;color:#fff;z-index:2;text-shadow:0 1px 10px rgba(20,25,22,.4);}
.mk-hh .hh-brand{font-size:12px;letter-spacing:.01em;}
.mk-hh .hh-links{display:flex;gap:14px;font-size:8.5px;font-weight:500;}
.mk-hh .hh-btn{background:var(--hh-green);color:var(--hh-white);font-size:8.5px;font-weight:600;padding:8px 14px;border-radius:2px;white-space:nowrap;}
.mk-hh .hh-btnsm{padding:6px 11px;font-size:8px;}

/* full-photo hero + overlap panel */
.mk-hh .hh-hero{position:relative;padding-bottom:34px;}
.mk-hh .hh-heroimg{height:215px;}
.mk-hh .hh-panel{position:absolute;left:22px;bottom:0;background:var(--hh-white);padding:14px 18px 14px;min-width:46%;box-shadow:0 10px 30px -18px rgba(36,36,36,.35);}
.mk-hh .hh-name{font-size:19px;line-height:1.05;}
.mk-hh .hh-loc{display:block;font-size:8px;font-weight:500;color:var(--hh-wine);margin-top:3px;}
.mk-hh .hh-meta{display:block;font-size:8px;opacity:.75;margin-top:5px;letter-spacing:.03em;}
.mk-hh .hh-panelrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;}
.mk-hh .hh-price{font-size:8.5px;font-weight:600;}

/* four-view reveal + room index */
.mk-hh .hh-reveal{display:grid;grid-template-columns:58px 1fr;gap:14px;padding:6px 22px 4px;}
.mk-hh .hh-idx{display:flex;flex-direction:column;gap:7px;padding-top:4px;}
.mk-hh .hh-idxrow{font-size:8px;font-weight:500;opacity:.45;display:flex;gap:6px;align-items:baseline;}
.mk-hh .hh-idxrow span{font-size:6.5px;letter-spacing:.06em;}
.mk-hh .hh-idxrow.on{opacity:1;color:var(--hh-green);border-left:2px solid var(--hh-green);padding-left:5px;margin-left:-7px;}
.mk-hh .hh-rgrid{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:auto auto;gap:9px;}
.mk-hh .hh-rlive{grid-row:1/2;}
.mk-hh .hh-rbed{grid-row:1/3;grid-column:2/3;display:flex;flex-direction:column;}
.mk-hh .hh-rbath,.mk-hh .hh-rkitch{grid-row:2/3;}
.mk-hh .hh-rlive{grid-column:1/2;}
.mk-hh .hh-rbath{grid-column:1/2;display:none;}
.mk-hh .hh-rgrid{grid-template-columns:1.7fr 1fr;grid-template-areas:"live bed" "pair bed";}
.mk-hh .hh-rlive{grid-area:live;}
.mk-hh .hh-rbed{grid-area:bed;}
.mk-hh .hh-rbath{display:block;grid-area:pair;}
.mk-hh .hh-rkitch{grid-area:pair;margin-left:calc(50% + 4.5px);}
.mk-hh .hh-rbath{width:calc(50% - 4.5px);}
.mk-hh .hh-rph{aspect-ratio:16/10;}
.mk-hh .hh-rph.tall{aspect-ratio:auto;flex:1;min-height:120px;}
.mk-hh .hh-rlab{display:block;font-size:7.5px;font-weight:500;opacity:.65;margin-top:4px;}

/* intro */
.mk-hh .hh-intro{padding:16px 22px 14px;}
.mk-hh .hh-introh{font-size:15px;}
.mk-hh .hh-intros{font-size:9px;line-height:1.6;opacity:.82;margin-top:5px;max-width:58ch;}

/* everything you need, pale blue */
.mk-hh .hh-need{background:var(--hh-blue);padding:18px 22px 16px;}
.mk-hh .hh-needh{font-size:14px;margin-bottom:12px;}
.mk-hh .hh-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mk-hh .hh-numv{display:block;font-family:"Newsreader",serif;font-weight:600;font-size:17px;line-height:1;}
.mk-hh .hh-numl{display:block;font-size:7.5px;font-weight:500;opacity:.7;margin-top:3px;}
.mk-hh .hh-amen{font-size:8px;opacity:.75;margin-top:12px;letter-spacing:.02em;}

/* while you're here, bottle green */
.mk-hh .hh-guide{background:var(--hh-green);color:var(--hh-white);display:grid;grid-template-columns:1.35fr 1fr;gap:18px;padding:20px 22px;align-items:stretch;}
.mk-hh .hh-guideh{font-size:15px;}
.mk-hh .hh-guides{font-size:8.5px;opacity:.85;margin-top:4px;}
.mk-hh .hh-ggroups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px;}
.mk-hh .hh-ggh{display:block;font-size:7px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--hh-sky);margin-bottom:6px;}
.mk-hh .hh-gentry{margin-bottom:6px;}
.mk-hh .hh-gename{display:block;font-size:8px;font-weight:600;}
.mk-hh .hh-genote{display:block;font-size:7px;opacity:.72;margin-top:1px;}
.mk-hh .hh-guideph{min-height:100%;}

/* booking strip on dusty sky */
.mk-hh .hh-bookband{background:var(--hh-sky);padding:16px 22px 14px;}
.mk-hh .hh-strip{background:var(--hh-white);display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:2px;}
.mk-hh .hh-field{flex:1;border-right:1px solid rgba(36,36,36,.14);font-size:8px;color:rgba(36,36,36,.7);padding:2px 8px;}
.mk-hh .hh-strip .hh-btn{flex:none;}
.mk-hh .hh-bookcontact{font-size:8px;margin-top:9px;opacity:.9;}
.mk-hh .hh-clink{color:var(--hh-wine);font-weight:600;text-decoration:underline;text-underline-offset:2px;font-size:8px;}

/* interior page: property sequence */
.mk-hh .hh-propwide{padding:4px 22px 8px;}
.mk-hh .hh-widerph{aspect-ratio:21/9;}
.mk-hh .hh-widerph.short{aspect-ratio:21/7;}
.mk-hh .hh-proppair{display:grid;grid-template-columns:58px 1.5fr 1fr;gap:12px;padding:4px 22px 8px;}
.mk-hh .hh-idxalt{padding-top:2px;}
.mk-hh .hh-pairitem.big .hh-rph{aspect-ratio:4/3;}
.mk-hh .hh-pairitem .hh-rph.tall{min-height:0;height:calc(100% - 14px);}
.mk-hh .hh-hostline{display:flex;gap:12px;align-items:baseline;padding:10px 22px;font-size:8.5px;font-weight:500;background:var(--hh-blue);}
.mk-hh .hh-reviewrow{padding:14px 22px 18px;}
.mk-hh .hh-reviewt{font-family:"Newsreader",serif;font-style:italic;font-size:10.5px;line-height:1.55;max-width:54ch;}
.mk-hh .hh-reviewa{display:block;font-size:7px;letter-spacing:.08em;opacity:.55;margin-top:5px;}

/* phone */
.phone .mk-hh .hh-phero{position:relative;}
.phone .mk-hh .hh-phero .hh-heroimg{height:150px;}
.phone .mk-hh .hh-navover{padding:11px 14px;}
.phone .mk-hh .hh-ppanel{position:relative;left:auto;bottom:auto;margin:-26px 14px 0;box-shadow:0 10px 24px -16px rgba(36,36,36,.4);}
.phone .mk-hh .hh-pfeed{padding:14px;display:flex;flex-direction:column;gap:10px;}
.phone .mk-hh .hh-psticky{display:flex;justify-content:space-between;align-items:center;background:var(--hh-white);border-top:1px solid rgba(36,36,36,.12);padding:9px 14px;}
/* =====================================================================
   AQUALIFT · featured client project
   Drawn previews of the rebuilt site (.aq) and the site it replaced
   (.ob), plus the before / after reveal in the home hero.
   Sizes use cqw so the mockups scale to any frame they sit in.
   ===================================================================== */
.aq-wrap{container-type:inline-size;width:100%;}
.aq{
  position:relative;display:flex;flex-direction:column;width:100%;
  aspect-ratio:16/10;overflow:hidden;color:#F3F6F8;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  background-image:
    linear-gradient(rgba(167,188,201,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,188,201,.05) 1px,transparent 1px),
    radial-gradient(ellipse 70% 90% at 78% 32%,rgba(63,192,236,.1),transparent 62%),
    linear-gradient(168deg,#14334B 0%,#10293C 55%,#0B1826 100%);
  background-size:5.2cqw 5.2cqw,5.2cqw 5.2cqw,100% 100%,100% 100%;
}
.aq-top{display:flex;align-items:center;gap:2.4cqw;padding:2.1cqw 3cqw;border-bottom:1px solid rgba(167,188,201,.16);}
.aq-logo{display:flex;align-items:center;gap:.7cqw;font-size:2.05cqw;font-weight:700;letter-spacing:-.02em;color:#fff;text-transform:none;}
.aq-logo img{height:4.6cqw;width:auto;display:block;}
.aq-nav{display:flex;gap:1.9cqw;margin-left:auto;}
.aq-nav span{font-size:1.24cqw;color:#A7BCC9;white-space:nowrap;}
.aq-nav span:first-child{color:#fff;}
.aq-body{flex:1;display:flex;align-items:center;padding:0 3cqw;position:relative;min-height:0;}
.aq-copy{max-width:56%;display:flex;flex-direction:column;gap:1.5cqw;position:relative;z-index:2;}
.aq-kick{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1cqw;letter-spacing:.2em;text-transform:uppercase;color:#7E99A8;}
.aq-h1{font-size:4.05cqw;line-height:1.06;font-weight:700;letter-spacing:-.028em;color:#fff;}
.aq-sub{font-size:1.3cqw;line-height:1.5;color:#A7BCC9;max-width:40ch;}
.aq-ctas{display:flex;gap:1cqw;margin-top:.4cqw;}
.aq-ctas b{font-size:1.12cqw;font-weight:600;padding:1cqw 1.7cqw;background:#3FC0EC;color:#0B1826;white-space:nowrap;}
.aq-ctas i{font-size:1.12cqw;font-style:normal;font-weight:500;padding:1cqw 1.7cqw;border:1px solid rgba(167,188,201,.4);color:#D7E7ED;white-space:nowrap;}
.aq-micro{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9cqw;letter-spacing:.16em;color:rgba(167,188,201,.62);padding:0 3cqw 2cqw;}
.aq-survey{position:absolute;right:2cqw;top:50%;transform:translateY(-50%);width:29cqw;height:auto;opacity:.9;}
.aq-svgtxt{font-family:"IBM Plex Mono",ui-monospace,monospace;fill:rgba(214,228,236,.8);}

/* capabilities / interior view */
.aq-inner{flex:1;display:flex;flex-direction:column;gap:1.6cqw;padding:2.6cqw 3cqw;min-height:0;}
.aq-h2{font-size:3cqw;line-height:1.1;font-weight:700;letter-spacing:-.024em;color:#fff;max-width:60%;}
.aq-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2cqw;}
.aq-cap{border:1px solid rgba(167,188,201,.2);padding:1.5cqw 1.7cqw;display:flex;flex-direction:column;gap:.6cqw;}
.aq-capnum{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.92cqw;letter-spacing:.16em;color:#3FC0EC;}
.aq-capname{font-size:1.5cqw;font-weight:600;color:#F3F6F8;}
.aq-proof{display:flex;gap:2.6cqw;margin-top:auto;padding-top:1.4cqw;border-top:1px solid rgba(167,188,201,.16);}
.aq-pf{display:flex;flex-direction:column;gap:.3cqw;}
.aq-pf b{font-size:1.7cqw;font-weight:700;color:#fff;}
.aq-pf span{font-size:.95cqw;color:#A7BCC9;}

/* phone variant */
.aq-ph{aspect-ratio:9/17;}
.aq-ph .aq-top{padding:3.4cqw 4.6cqw;}
.aq-ph .aq-logo{font-size:4.4cqw;}
.aq-ph .aq-logo::before{width:3.8cqw;height:3.8cqw;}
.aq-burger{margin-left:auto;width:5cqw;height:.6cqw;background:#9EBECA;box-shadow:0 1.7cqw 0 #9EBECA,0 -1.7cqw 0 #9EBECA;}
.aq-ph .aq-body{padding:0 4.6cqw;}
.aq-ph .aq-copy{max-width:100%;gap:3.4cqw;}
.aq-ph .aq-kick{font-size:2.2cqw;}
.aq-ph .aq-h1{font-size:8.2cqw;}
.aq-ph .aq-ctas b{font-size:2.9cqw;padding:2.6cqw 4.2cqw;}
.aq-ph .aq-micro{font-size:1.9cqw;padding:0 4.6cqw 4.4cqw;}

/* ---------- the site it replaced ---------- */
.ob{
  position:relative;display:flex;flex-direction:column;width:100%;
  aspect-ratio:16/10;overflow:hidden;background:#fff;color:#333;
  font-family:Arial,Helvetica,sans-serif;
}
.ob-top{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:2cqw 2.6cqw;border-bottom:1px solid #dfe3e6;}
.ob-logo{display:flex;align-items:baseline;gap:.4cqw;}
.ob-logo b{font-size:2.9cqw;color:#12507F;font-weight:700;letter-spacing:-.02em;}
.ob-logo i{font-size:2.9cqw;color:#E87B23;font-style:normal;font-weight:700;}
.ob-strap{font-size:1.2cqw;color:#8A9099;}
.ob-nav{display:flex;flex-wrap:wrap;background:#12507F;padding:0 1.3cqw;}
.ob-nav span{color:#fff;font-size:1.26cqw;padding:1cqw .9cqw;border-right:1px solid rgba(255,255,255,.16);white-space:nowrap;}
.ob-hero{position:relative;height:21cqw;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(160deg,#7FA8C4 0%,#4E7F9E 45%,#2E5A75 100%);}
.ob-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 72% 38%,rgba(255,255,255,.28),transparent 55%),
  repeating-linear-gradient(102deg,rgba(255,255,255,.05) 0 3px,transparent 3px 9px);}
.ob-h1{position:relative;z-index:2;padding:0 3cqw;max-width:62%;color:#fff;font-size:2.25cqw;line-height:1.24;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.ob-dots{position:absolute;bottom:1.4cqw;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:.7cqw;}
.ob-dots i{width:.8cqw;height:.8cqw;border-radius:50%;background:rgba(255,255,255,.55);}
.ob-dots i:first-child{background:#fff;}
.ob-body{flex:1;display:flex;gap:2.2cqw;padding:2.3cqw 2.6cqw;min-height:0;}
.ob-cols{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5cqw;align-content:start;min-width:0;}
.ob-col{display:flex;flex-direction:column;gap:.55cqw;}
.ob-h5{font-size:1.38cqw;color:#12507F;font-weight:700;line-height:1.25;}
.ob-p{font-size:1.08cqw;line-height:1.42;color:#666;}
.ob-side{width:23%;display:flex;flex-direction:column;gap:1.1cqw;flex:0 0 auto;}
.ob-box{border:1px solid #d8dde1;background:#F4F6F7;}
.ob-box b{display:block;background:#E87B23;color:#fff;font-size:1.12cqw;padding:.6cqw .8cqw;font-weight:700;}
.ob-box span{display:block;padding:.72cqw .8cqw;font-size:1.02cqw;color:#7A8189;line-height:1.4;}

/* ---------- the before / after reveal ---------- */
/* --pos is the divider, 0-100 from the left.
   100 = all before, 0 = all after. The before layer sits on top,
   clipped to the left of the divider. */
.reveal-stage{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;}
.reveal-stage img{-webkit-user-drag:none;user-drag:none;}
.reveal-layer{min-width:0;}
.reveal-layer.reveal-before{position:absolute;inset:0;z-index:2;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);}
.reveal-tag{
  position:absolute;bottom:12px;z-index:4;padding:5px 9px;
  font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
/* The before tag lives inside the clipped layer, so the divider
   wipes it away along with the old site. */
.reveal-tag-before{left:12px;background:rgba(255,255,255,.88);color:#3B4650;border:1px solid rgba(0,0,0,.14);}
.reveal-tag-after{right:12px;background:rgba(8,18,25,.72);color:#D7E7ED;border:1px solid rgba(158,190,202,.25);}
.reveal-handle{
  position:absolute;top:0;bottom:0;z-index:5;left:var(--pos,50%);
  width:44px;transform:translateX(-50%);cursor:ew-resize;
  display:grid;place-items:center;touch-action:none;
}
.reveal-handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;
  background:var(--paper);box-shadow:0 0 0 1px rgba(37,37,37,.3);}
.reveal-handle .grip{
  position:relative;width:38px;height:38px;border-radius:50%;
  background:var(--paper);box-shadow:0 3px 14px rgba(37,37,37,.35);
  display:grid;place-items:center;font-size:13px;color:var(--ink);
  letter-spacing:-.05em;transition:transform .25s var(--ease);
}
.reveal-handle:hover .grip{transform:scale(1.08);}
.reveal-handle:focus-visible{outline:none;}
.reveal-handle:focus-visible .grip{outline:2px solid var(--ink);outline-offset:4px;transform:scale(1.08);}

/* The reveal keeps hero hover-zoom off: two layers scaling under a
   clip-path shimmer at the seam. */
.reveal-stage .mock-scale{transition:none;}
.frame:hover .reveal-stage .mock-scale{transform:none;}

/* Touch: keep the slider working. The stage itself accepts horizontal
   drags (vertical still scrolls the page, via touch-action:pan-y), and
   the handle grows to a comfortable thumb target. */
@media (pointer:coarse){
  .reveal-handle{width:56px;}
  .reveal-handle .grip{width:44px;height:44px;}
}
@media (max-width:720px){
  .reveal-tag{font-size:8.5px;padding:4px 7px;bottom:8px;}
  .reveal-tag-before{left:8px;}
  .reveal-tag-after{right:8px;}
}