/* =========================================================
   Level Up Home Renovations — blueprint theme
   Blueprint blue + white linework, pulled from the logo's navy.
   ========================================================= */
:root {
  --bp: #123a66;          /* blueprint blue */
  --bp-deep: #0c2a4d;     /* darker sheet, used for bands */
  --bp-ink: #0a1f3a;      /* text on white buttons */
  --line: #eaf2ff;        /* white linework */
  --muted: #a9bfdc;       /* secondary text */
  --faint: rgba(234, 242, 255, .16);
  --grid-minor: rgba(234, 242, 255, .05);
  --grid-major: rgba(234, 242, 255, .10);
  --chrome: linear-gradient(180deg, #ffffff 0%, #dfe6ef 45%, #9fb0c6 58%, #eef2f7 100%);

  --f-head: "Montserrat", "Arial Black", Arial, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1180px;
  --pad: clamp(16px, 4vw, 40px);
  --sec: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--line); font: 400 17px/1.6 var(--f-body);
  background-color: var(--bp);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--f-head); margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
.i { width: 1.1em; height: 1.1em; flex: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: #fff; color: var(--bp-ink); padding: 10px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px dashed var(--line); outline-offset: 4px; }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 3px;
  font: 700 14px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--bp-ink); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.btn--light:hover { background: #dfe8f5; }
.btn--outline { background: transparent; color: var(--line); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--outline:hover { background: rgba(234,242,255,.1); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 13px; }
.btn--block { width: 100%; }

/* Sheet labels, like the title strip on a drawing */
.sheet {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.sheet::before { content: ""; width: 26px; height: 1px; background: currentColor; }

.head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.head h2, .contact h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.02em; }
.head p:not(.sheet) { margin-top: 14px; color: var(--muted); font-size: 18px; }

/* Rise-in on scroll (only when JS is running) */
.js .up { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .up.in { opacity: 1; transform: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: sticky; top: 0; z-index: 50; background: #0d2c50; border-bottom: 1px solid var(--faint); }
.nav__in { height: 76px; display: flex; align-items: center; gap: 28px; }
.nav__logo { margin-right: auto; }
.nav__logo img { height: 58px; width: auto; }
.nav__links { display: none; gap: 30px; }
.nav__links a { font: 600 13px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 8px 0; position: relative; transition: color .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover, .nav__links a.on { color: var(--line); }
.nav__links a:hover::after, .nav__links a.on::after { transform: scaleX(1); }
.nav__short { display: none; }
@media (min-width: 860px) { .nav__links { display: flex; } }
@media (max-width: 420px) { .nav__num { display: none; } .nav__short { display: inline; } .nav__logo img { height: 50px; } }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; padding-top: clamp(40px, 7vw, 90px); overflow: hidden; }
.roof { display: block; width: min(1100px, 100%); height: auto; margin: 0 auto -1px; padding: 0 var(--pad); overflow: visible; }
.roof path { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.roof__line--in { stroke-width: 1.2 !important; opacity: .55; }
.roof__arrow path { stroke-width: 5; }
.js .roof path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js.go .roof path { animation: draw 1.4s var(--ease) forwards; }
.js.go .roof__line--in { animation-delay: .25s !important; }
.js.go .roof__chim { animation-delay: .7s !important; animation-duration: .6s !important; }
.js.go .roof__arrow path:first-child { animation-delay: 1.1s !important; animation-duration: .7s !important; }
.js.go .roof__arrow path:last-child { animation-delay: 1.55s !important; animation-duration: .45s !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__in { text-align: center; padding-top: clamp(18px, 3vw, 34px); display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow { font: 500 clamp(15px, 1.6vw, 20px)/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--line); }
.hero__title { font-size: clamp(48px, 8.4vw, 104px); font-weight: 900; letter-spacing: -.035em; line-height: .98; margin: 18px 0 22px; }
.hero__sub { max-width: 560px; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); }
.hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.js .hero__in > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js.go .hero__in > * { opacity: 1; transform: none; }
.js.go .hero__in > :nth-child(1) { transition-delay: .5s; }
.js.go .hero__in > :nth-child(2) { transition-delay: .65s; }
.js.go .hero__in > :nth-child(3) { transition-delay: .8s; }
.js.go .hero__in > :nth-child(4) { transition-delay: .95s; }

.hero__show { margin-top: clamp(44px, 6vw, 72px); padding-bottom: var(--sec); }
@media (max-width: 560px) { .hero__btns .btn { width: 100%; } }

/* =========================================================
   DRAWING FRAME + BEFORE/AFTER
   ========================================================= */
.frame { position: relative; padding: 12px; border: 1px solid var(--faint); }
/* corner registration marks */
.frame::before, .frame::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--line); border-style: solid; pointer-events: none; }
.frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
/* dimension line under the photo */
.dim { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dim::before, .dim::after { content: ""; flex: 1; height: 9px; }
.dim::before { background: linear-gradient(var(--muted), var(--muted)) left center/1px 9px no-repeat, linear-gradient(var(--faint), var(--faint)) center/100% 1px no-repeat; }
.dim::after { background: linear-gradient(var(--muted), var(--muted)) right center/1px 9px no-repeat, linear-gradient(var(--faint), var(--faint)) center/100% 1px no-repeat; }

.ba__clip { overflow: hidden; }
.ba__clip:has(.ba:focus-visible) { outline: 2px dashed var(--line); outline-offset: 6px; }
.ba {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bp-deep);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba:focus-visible { outline: none; }
.ba__in { position: absolute; inset: 0; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { clip-path: inset(0 50% 0 0); }
.ba__before.sample { filter: grayscale(.85) sepia(.25) brightness(.78) contrast(.92); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; pointer-events: none; will-change: transform; }
.ba__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.35); }
.ba__knob {
  position: absolute; top: 50%; left: -27px; width: 54px; height: 54px; margin-top: -27px;
  border-radius: 50%; background: #fff; color: var(--bp); display: grid; place-items: center;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.5); transition: transform .25s var(--ease);
}
.ba__knob svg { width: 26px; height: 26px; }
.ba.drag .ba__knob { transform: scale(1.1); }
.ba__tag { position: absolute; top: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; pointer-events: none; transition: opacity .25s; }
.ba__tag--b { left: 12px; background: rgba(10,31,58,.75); color: #fff; }
.ba__tag--a { right: 12px; background: #fff; color: var(--bp-ink); }
.ba__sample { position: absolute; right: 12px; bottom: 12px; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; background: #ffe3a3; color: #4a3500; pointer-events: none; }
.ba.fallback { background: linear-gradient(135deg, #1a4a80, var(--bp-deep)); }
.ba.fallback img { visibility: hidden; }

/* Photos rise into place: a wipe that lifts from the bottom edge.
   The photo box slides up while its contents slide down by the same amount,
   so the picture stays still and only the visible edge moves. */
.js .rise .ba, .js .rise .ba__in { transition: transform 1.1s var(--ease); }
.js .rise:not(.in) .ba { transform: translateY(100%); }
.js .rise:not(.in) .ba__in { transform: translateY(-100%); }

.ba--hero { aspect-ratio: 16 / 8.5; }
@media (max-width: 700px) { .ba--hero { aspect-ratio: 4 / 3.4; } }

/* =========================================================
   WORK
   ========================================================= */
.work { padding-bottom: var(--sec); }
.proj, .rev__card { margin: 0; }
.gallery { display: grid; gap: clamp(28px, 4vw, 44px) 32px; }
@media (min-width: 800px) { .gallery { grid-template-columns: 1fr 1fr; } }
.proj__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.proj__cap h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.proj__cap span { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; }
.proj__views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.proj__views button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 3px; background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--faint); font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s, color .2s, box-shadow .2s;
}
.proj__views button:hover { color: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.proj__views button[aria-pressed="true"] { background: var(--line); color: var(--bp-ink); box-shadow: none; }

/* =========================================================
   SERVICES
   ========================================================= */
.services {
  padding: var(--sec) 0; border-block: 1px solid var(--faint);
  background-color: var(--bp-deep);
  background-image:
    linear-gradient(rgba(234,242,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,242,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(234,242,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,242,255,.035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* The service grid is drawn as a floor plan: heavy outer walls,
   lighter interior walls, dimension lines, callout bubbles and a title block. */
.plan { position: relative; padding: 34px 0 0 34px; }
.plan__dx { position: absolute; top: 0; left: 34px; right: 0; margin: 0; }
.plan__dy { position: absolute; top: 34px; bottom: 0; left: 0; width: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plan__dy::before, .plan__dy::after { content: ""; flex: 1; width: 9px; }
.plan__dy::before { background: linear-gradient(var(--muted), var(--muted)) center top/9px 1px no-repeat, linear-gradient(var(--faint), var(--faint)) center/1px 100% no-repeat; }
.plan__dy::after { background: linear-gradient(var(--muted), var(--muted)) center bottom/9px 1px no-repeat, linear-gradient(var(--faint), var(--faint)) center/1px 100% no-repeat; }
.plan__dy span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.svc {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  background: rgba(234,242,255,.5);                 /* interior walls show through the gaps */
  border: 4px solid var(--line);                    /* exterior walls */
  box-shadow: 0 0 0 5px var(--bp-deep), 0 0 0 6px rgba(234,242,255,.35);
}
@media (min-width: 620px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .svc { grid-template-columns: repeat(3, 1fr); } }
.svc__item { position: relative; padding: 30px 28px 32px; background: var(--bp-deep); }
.svc__item::before { /* section hatching on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(-45deg, rgba(234,242,255,.07) 0 1px, transparent 1px 9px);
}
.svc__item:hover::before { opacity: 1; }
.svc__item > * { position: relative; }
.svc__tag {
  position: absolute !important; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  font: 500 11px/1 var(--f-mono); letter-spacing: .04em; color: var(--line);
}
.svc__ico { width: 44px; height: 44px; color: var(--line); margin-bottom: 22px; }
.svc__item h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.svc__item p { color: var(--muted); font-size: 16px; }

.tblock {
  margin: 34px 0 0 auto; width: min(100%, 460px); display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--line); font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.tblock div { padding: 10px 12px; border-left: 1px solid rgba(234,242,255,.4); }
.tblock div:nth-child(2) { border-left: 0; }
.tblock div:first-child { grid-column: 1 / -1; border-left: 0; border-bottom: 1px solid rgba(234,242,255,.4); }
.tblock dt { color: var(--muted); font-size: 9.5px; margin-bottom: 4px; }
.tblock dd { margin: 0; color: var(--line); }
@media (max-width: 619px) {
  .plan { padding-left: 0; }
  .plan__dx { left: 0; }
  .plan__dy { display: none; }
}

/* =========================================================
   PROCESS
   ========================================================= */
.process { padding: var(--sec) 0 calc(var(--sec) * .6); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps li { display: flex; gap: 18px; align-items: flex-start; }
.steps__n { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); font: 800 17px var(--f-head); }
.steps h3 { font-size: 20px; font-weight: 700; margin: 4px 0 6px; }
.steps p { color: var(--muted); font-size: 16px; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews { padding: calc(var(--sec) * .6) 0 var(--sec); }
.rev { display: grid; gap: 20px; }
@media (min-width: 900px) { .rev { grid-template-columns: repeat(3, 1fr); } }
.rev__card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px 26px; background: rgba(12,42,77,.6); }
.rev__stars { color: #fff; letter-spacing: .18em; font-size: 15px; }
.rev__card blockquote { margin: 0; flex: 1; font-size: 18px; line-height: 1.55; }
.rev__who { padding-top: 16px; border-top: 1px dashed var(--faint); }
.rev__who strong { display: block; font: 700 15px var(--f-head); }
.rev__who span { font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rev__sample { position: absolute; top: 14px; right: 14px; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; background: #ffe3a3; color: #4a3500; }

/* =========================================================
   AREA
   ========================================================= */
.area { padding: 48px 0; background: var(--bp-deep); border-block: 1px solid var(--faint); }
.area__in { display: flex; gap: 22px; align-items: flex-start; }
.area__pin { flex: none; width: 40px; height: 40px; color: var(--line); margin-top: 2px; }
.area h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.area p { margin-top: 10px; color: var(--muted); font-size: 16px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: var(--sec) 0; }
.contact__in { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .contact__in { grid-template-columns: 1fr 1fr; gap: 72px; } }
.contact__copy > p:not(.sheet) { margin-top: 18px; color: var(--muted); max-width: 440px; font-size: 18px; }
.contact__phone { display: inline-block; margin: 30px 0 22px; font: 900 clamp(36px, 5vw, 56px)/1 var(--f-head); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.contact__phone:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--muted); text-decoration: none; word-break: break-all; }
.contact__mail:hover { color: var(--line); }
@media (max-width: 560px) { .contact__btns .btn { flex: 1; } }

.form { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); background: rgba(12,42,77,.72); border: 1px solid var(--faint); position: relative; }
.form::before, .form::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--line); }
.form::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.form::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.form h3 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field > span { font: 500 11.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field em { font-style: normal; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  width: 100%; font: 500 16px/1.4 var(--f-body); color: var(--line);
  padding: 13px 14px; border: 1px solid rgba(234,242,255,.3); border-radius: 2px; background: rgba(10,31,58,.55);
  transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9bfdc' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field select option { color: #0a1f3a; }
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(169,191,220,.6); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--line); background: rgba(10,31,58,.8); }
.field.bad input, .field.bad textarea { border-color: #ff9d8a; }
.form__err { color: #ffb4a6; font-size: 15px; }
.form__note { font-size: 13px; color: var(--muted); text-align: center; }
.form__ok { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: rgba(234,242,255,.1); font-size: 15px; }
.form__ok .i { width: 20px; height: 20px; margin-top: 2px; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { padding: 48px 0 calc(28px + env(safe-area-inset-bottom)); background: var(--bp-deep); border-top: 1px solid var(--faint); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.foot__in img { width: 110px; height: auto; }
.foot nav, .foot__contact { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.foot__contact { margin-left: auto; }
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--line); }
.foot__contact span { color: var(--muted); }
.foot__copy { margin-top: 32px; font: 400 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .foot__contact { margin-left: 0; } }

/* =========================================================
   MOBILE CALL BAR
   ========================================================= */
.callbar { display: none; }
@media (max-width: 859px) {
  .callbar {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 3px;
    background: #fff; color: var(--bp-ink); text-decoration: none; font: 700 14px var(--f-head); letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
    transform: translateY(160%); transition: transform .45s var(--ease);
  }
  .callbar.on { transform: none; }
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

@media (max-width: 560px) {
  .proj__cap { flex-direction: column; align-items: flex-start; gap: 6px; }
  .proj__cap span { text-align: left; }
}