/* ============================================================
   ALERA DIGITAL — INNER PAGES
   The service pages, the calculator, the booking page and the policy.
   Loaded after styles.css, which owns the tokens, the nav, the buttons,
   the footer and the reveal system — everything here is additive.

   These are the pages Google sends people to, so none of them loads
   three.js. The home page earns its WebGL hero by being the thing
   people look at; a service page earns its ranking by arriving fast.
   The hero band below is layered CSS gradients tuned to the same
   palette, which costs nothing and reads as the same brand.
   ============================================================ */

/* ---------------- page hero ---------------- */

.phero {
  position: relative;
  padding: clamp(7.5rem, 15vw, 11rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  /* without this the band ends on a hard horizontal rule across the page */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  background:
    radial-gradient(60% 80% at 14% 8%,  rgba(33,82,226,.20),  transparent 62%),
    radial-gradient(52% 70% at 86% 2%,  rgba(145,86,239,.19), transparent 60%),
    radial-gradient(74% 90% at 62% 44%, rgba(46,197,235,.17), transparent 66%),
    radial-gradient(40% 54% at 24% 86%, rgba(255,122,68,.11), transparent 62%),
    linear-gradient(175deg, #F4F7FD 0%, var(--page) 72%);
}
/* a slow drift, so the band is not a flat print */
.phero::after {
  content: ""; position: absolute; z-index: -1; inset: -30%;
  background: radial-gradient(38% 46% at 50% 50%, rgba(255,255,255,.65), transparent 70%);
  animation: pheroDrift 26s var(--ease) infinite alternate;
}
@keyframes pheroDrift {
  from { transform: translate3d(-6%, -3%, 0) scale(1); }
  to   { transform: translate3d(7%, 4%, 0) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .phero::after { animation: none; } }

.phero__in { max-width: 54rem; }
.phero__n {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
}
.phero__n b {
  font-weight: 600; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.phero h1 {
  margin: .9rem 0 0;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 200;
  letter-spacing: -.042em; line-height: 1.02; color: var(--ink);
}
.phero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.02em;
  background: linear-gradient(104deg, var(--blue), var(--cyan) 46%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phero__lede {
  margin-top: 1.5rem; max-width: 40rem;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.62; color: var(--ink-2);
}
.phero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }

/* ---------------- the problem ---------------- */

.gap { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.gap__lead { max-width: 46rem; }
.gap__lead h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.16; color: var(--ink);
}
.gap__lead p { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.68; color: var(--ink-2); }

.trio {
  display: grid; gap: 1rem; margin-top: 2.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }

.trio article {
  position: relative; overflow: hidden;
  padding: 1.6rem 1.5rem 1.7rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.trio article::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: .9;
}
.trio article:nth-child(2)::before { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.trio article:nth-child(3)::before { background: linear-gradient(90deg, var(--violet), var(--ember)); }
.trio article:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.trio h3 {
  font-size: 1.04rem; font-weight: 500; letter-spacing: -.016em; color: var(--ink);
  margin-bottom: .5rem;
}
.trio p { font-size: .93rem; line-height: 1.62; color: var(--ink-2); }

/* ---------------- what's included ---------------- */

.incl { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.incl__grid {
  display: grid; gap: 1px; margin-top: 2.6rem;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 680px)  { .incl__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .incl__grid { grid-template-columns: repeat(3, 1fr); } }

.incl__grid article {
  padding: 1.7rem 1.5rem 1.8rem;
  background: var(--white);
  transition: background .4s var(--ease);
}
.incl__grid article:hover { background: #FCFDFF; }
.incl__grid h3 {
  display: flex; align-items: center; gap: .55rem;
  font-size: .99rem; font-weight: 500; letter-spacing: -.014em; color: var(--ink);
  margin-bottom: .45rem;
}
.incl__grid h3::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--cyan));
}
.incl__grid p { font-size: .92rem; line-height: 1.62; color: var(--ink-2); }

/* ---------------- questions ---------------- */

.faq { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.faq__list { max-width: 50rem; margin-top: 2.2rem; }

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details[open] { background: linear-gradient(180deg, rgba(255,255,255,.7), transparent); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem .4rem 1.15rem 0;
  cursor: pointer; list-style: none;
  font-size: 1.01rem; font-weight: 450; letter-spacing: -.016em; color: var(--ink);
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: .42rem;
  width: 8px; height: 8px;
  border-right: 1.7px solid var(--ink-3); border-bottom: 1.7px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .35s var(--ease), border-color .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--blue); }
.faq__a {
  padding: 0 2.5rem 1.4rem 0; max-width: 46rem;
  font-size: .95rem; line-height: 1.7; color: var(--ink-2);
}
.faq__a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- closing band ---------------- */

.endcta { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); }
.endcta__in {
  position: relative; overflow: hidden;
  display: grid; gap: 1.8rem; align-items: center;
  padding: clamp(2.2rem, 5vw, 3.4rem);
  border-radius: 26px;
  background: var(--ink);
  color: #fff;
}
@media (min-width: 880px) { .endcta__in { grid-template-columns: 1fr auto; gap: 2.6rem; } }
.endcta__in::before {
  content: ""; position: absolute; inset: auto -10% -70% auto;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,82,226,.55), transparent 66%);
}
.endcta h2 {
  position: relative;
  font-size: clamp(1.5rem, 3.1vw, 2.2rem); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.14;
}
.endcta p {
  position: relative; margin-top: .75rem; max-width: 38rem;
  font-size: .98rem; line-height: 1.64; color: rgba(255,255,255,.72);
}
.endcta .btn { position: relative; }

/* ---------------- also from alera ---------------- */

.also { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.also h2 {
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 1.2rem;
}
.also__row { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .also__row { grid-template-columns: repeat(3, 1fr); } }
.also__row a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--white);
  font-size: .97rem; font-weight: 450; color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.also__row a:hover {
  transform: translateY(-2px); border-color: transparent;
  box-shadow: var(--shadow-lift);
}
.also__row span { color: var(--ink-3); transition: transform .4s var(--ease); }
.also__row a:hover span { transform: translateX(4px); }

/* ============================================================
   CALCULATOR
   Every assumption is a slider and every step of the arithmetic is
   printed, because the entire argument of the page is that you can
   check it. A black box would undercut the copy.
   ============================================================ */

.calc { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.calc__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .calc__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }

.dials {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow);
}
.dial-f + .dial-f { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.dial-f__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dial-f label { font-size: .95rem; font-weight: 450; color: var(--ink); }
.dial-f output {
  font-size: 1.12rem; font-weight: 500; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.dial-f__note { margin-top: .4rem; font-size: .84rem; line-height: 1.55; color: var(--ink-3); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin-top: .9rem; height: 22px;
  background: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet));
}
input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7.5px;
  border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(10,14,26,.1);
  box-shadow: 0 1px 2px rgba(10,14,26,.1), 0 6px 14px -6px rgba(10,14,26,.4);
  transition: transform .2s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(10,14,26,.1);
  box-shadow: 0 1px 2px rgba(10,14,26,.1), 0 6px 14px -6px rgba(10,14,26,.4);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 100px; }

/* ---- the result ---- */

.result {
  position: sticky; top: 5.5rem;
  overflow: hidden;
  padding: clamp(1.5rem, 3.4vw, 2.3rem);
  border-radius: var(--r-md);
  background: var(--ink); color: #fff;
}
@media (max-width: 999px) { .result { position: static; } }
.result::before {
  content: ""; position: absolute; inset: -55% -25% auto auto;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,197,235,.4), transparent 68%);
}
.result__k {
  position: relative;
  font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.result__big {
  position: relative; display: block; margin: .5rem 0 .3rem;
  font-size: clamp(2.6rem, 7vw, 3.9rem); font-weight: 200;
  letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #fff, #BBD3FF 52%, #9FE9FA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result__sub { position: relative; font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.62); }

.result__row {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  margin-top: 1.7rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.result__row div span {
  display: block; font-size: .7rem; letter-spacing: .06em;
  color: rgba(255,255,255,.55); margin-bottom: .3rem;
}
.result__row div b {
  font-size: 1.14rem; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums;
}

.result details { position: relative; margin-top: 1.6rem; }
.result summary {
  cursor: pointer; list-style: none;
  font-size: .85rem; color: rgba(255,255,255,.75);
  text-decoration: underline; text-underline-offset: 3px;
}
.result summary::-webkit-details-marker { display: none; }
.result summary:hover { color: #fff; }

.steps-math { margin-top: 1.2rem; }
.steps-math li { list-style: none; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.steps-math li:first-child { border-top: 0; }
.steps-math h4 {
  font-size: .71rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: .35rem;
}
.steps-math code {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .79rem; line-height: 1.5; color: rgba(255,255,255,.72);
}
.steps-math b {
  display: block; margin-top: .22rem;
  font-size: .9rem; font-weight: 500; color: #9FE9FA;
  font-variant-numeric: tabular-nums;
}
.result__fine { position: relative; margin-top: 1.1rem; font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.45); }
.result .btn { position: relative; margin-top: 1.6rem; }

/* ============================================================
   PROSE — the policy, and any long-form page after it
   ============================================================ */

.prose { padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem); }
.prose__in { max-width: 44rem; }
.prose h2 {
  margin: 2.8rem 0 .9rem;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400;
  letter-spacing: -.028em; color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 1.8rem 0 .6rem;
  font-size: 1.02rem; font-weight: 500; letter-spacing: -.014em; color: var(--ink);
}
.prose p, .prose li { font-size: .97rem; line-height: 1.72; color: var(--ink-2); }
.prose p + p { margin-top: .9rem; }
.prose ul { margin: .9rem 0 0; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.3rem; margin-top: .55rem; }
.prose ul li::before {
  content: ""; position: absolute; left: .15rem; top: .62rem;
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--cyan));
}
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 500; color: var(--ink); }

.prose__meta {
  display: grid; gap: .1rem; margin: 1.4rem 0 0;
  padding: 1.2rem 1.3rem; border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow);
}
.prose__meta div { display: flex; gap: .8rem; font-size: .92rem; padding: .3rem 0; }
.prose__meta dt { flex: none; width: 6.5rem; color: var(--ink-3); }
.prose__meta dd { color: var(--ink-2); }

.note {
  margin-top: 1.2rem; padding: 1.1rem 1.25rem;
  border-radius: 14px; border-left: 3px solid var(--blue);
  background: #F3F6FD;
}
.note p { font-size: .93rem; }

.stamp {
  display: inline-block; margin-top: 1.2rem;
  padding: .3rem .7rem; border-radius: 100px;
  font-size: .78rem; color: var(--ink-3);
  background: rgba(10,14,26,.045);
}

/* ============================================================
   BOOKING
   ============================================================ */

.bookpage { padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem); }
.bookpage__grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) { .bookpage__grid { grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); } }

.agenda { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.agenda li { list-style: none; padding: 1.4rem 1.4rem 1.5rem; background: var(--white); }
.agenda__n {
  display: block; margin-bottom: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.agenda h3 { font-size: 1rem; font-weight: 500; letter-spacing: -.014em; color: var(--ink); margin-bottom: .4rem; }
.agenda p { font-size: .93rem; line-height: 1.62; color: var(--ink-2); }

.bookside { margin-top: 1.4rem; font-size: .93rem; line-height: 1.68; color: var(--ink-2); }
.bookside a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.calwrap {
  min-height: 620px;
  padding: .4rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
#cal-inline { width: 100%; min-height: 600px; overflow: auto; }
.nojs-cal { display: none; padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-2); }
.no-js .nojs-cal { display: block; }
.no-js #cal-inline { display: none; }

/* ---------------- additions the inner pages need ---------------- */

/* a quiet second button for light grounds — the home page only ever
   needed its glass variant, which disappears on a pale background */
.btn--ghost {
  background: rgba(255,255,255,.72);
  color: var(--ink);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: #fff; box-shadow: var(--shadow); }

/* the home page's rhythm is built for a long scroll; inner pages are
   shorter and the same spacing reads as holes */
.how { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* ============================================================
   THE WORK
   A portfolio page is one of the few places where the images are
   genuinely the content, so the layout's only job is to stay out of
   their way: a wide gutter, no card chrome on the art itself, and the
   commentary set small underneath rather than over the top of it.
   ============================================================ */

.gallery { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3.5rem, 7vw, 5.5rem); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
/* `display` on a class beats the UA stylesheet's `[hidden] { display: none }`,
   so the attribute alone does not hide this. Same reason `.piece[hidden]`
   below is written out explicitly. */
.filters[hidden] { display: none; }
.filters__b {
  padding: .5rem 1rem; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(255,255,255,.7);
  font: inherit; font-size: .88rem; color: var(--ink-2); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filters__b:hover { background: #fff; color: var(--ink); }
.filters__b.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.grid {
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.piece[hidden] { display: none; }

.piece__btn {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.piece__btn img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1122 / 1402;     /* reserves the space, so nothing jumps on load */
  object-fit: cover;
  background: var(--page-2);
  transition: transform .8s var(--ease);
}
.piece__btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.piece__btn:hover img { transform: scale(1.025); }
.piece__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* the magnifier only appears on hover — it is an affordance, not decoration */
.piece__zoom {
  position: absolute; right: .8rem; bottom: .8rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,14,26,.55); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.piece__zoom::before, .piece__zoom::after {
  content: ""; position: absolute; background: #fff;
}
.piece__zoom::before { left: 50%; top: 11px; width: 1.6px; height: 12px; margin-left: -.8px; }
.piece__zoom::after  { top: 50%; left: 11px; height: 1.6px; width: 12px; margin-top: -.8px; }
.piece__btn:hover .piece__zoom, .piece__btn:focus-visible .piece__zoom { opacity: 1; transform: none; }

.piece figcaption { padding-top: 1.05rem; }
.piece figcaption b {
  display: block; font-size: 1.02rem; font-weight: 500;
  letter-spacing: -.016em; color: var(--ink);
}
.piece figcaption span {
  display: block; margin-top: .18rem;
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-3);
}
.piece figcaption p {
  margin-top: .6rem; max-width: 42ch;
  font-size: .9rem; line-height: 1.62; color: var(--ink-2);
}

/* ---------------- the disclosure band ---------------- */

.note-band { padding: 0 0 clamp(3rem, 6vw, 4.5rem); }
.note-band__in {
  padding: 1.3rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
}
.note-band p { font-size: .91rem; line-height: 1.68; color: var(--ink-2); max-width: 78ch; }
.note-band b { font-weight: 500; color: var(--ink); }

/* ============================================================
   LIGHTBOX
   The grid serves 620px thumbnails; the full plate only downloads when
   somebody actually asks to see one. That is the whole reason the page
   is not four megabytes.
   ============================================================ */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 9, 18, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .32s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-in { opacity: 1; }

.lightbox__fig { display: grid; justify-items: center; gap: .9rem; max-height: 100%; }
.lightbox__fig img {
  display: block; max-width: min(100%, 760px); max-height: 78vh;
  width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  transform: scale(.97); transition: transform .4s var(--ease);
}
.lightbox.is-in .lightbox__fig img { transform: none; }
.lightbox__fig figcaption { text-align: center; color: #fff; }
.lightbox__fig b { display: block; font-size: 1rem; font-weight: 500; }
.lightbox__fig span { display: block; margin-top: .15rem; font-size: .82rem; color: rgba(255,255,255,.6); }

.lightbox__close {
  position: absolute; top: 1rem; right: 1.2rem;
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background .3s var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.12);
  display: grid; place-items: center; cursor: pointer;
  transition: background .3s var(--ease);
}
.lightbox__nav:hover { background: rgba(255,255,255,.26); }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.6rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.6rem); }
.lightbox__nav i {
  width: 9px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.lightbox__nav--prev i { transform: rotate(135deg) translate(-2px, -2px); }
.lightbox__nav--next i { transform: rotate(-45deg) translate(-2px, -2px); }

@media (max-width: 600px) {
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
  .lightbox__fig img { max-height: 66vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__fig img, .piece__btn, .piece__btn img { transition: none; }
}

/* ---------------- website designs ----------------
   The ads are 4:5 and sit in the grid as peers. A site design is 4:3 and
   is a different kind of object — cramming one into a portrait cell would
   shrink the thing you are meant to be looking at. So on a wide screen it
   takes the full row and runs image-left, caption-right, which reads as a
   case study rather than another tile. */

.piece[data-cat="web"] .piece__btn img { aspect-ratio: 1448 / 1086; }

@media (min-width: 1100px) {
  .piece[data-cat="web"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }
  .piece[data-cat="web"] figcaption { padding-top: 0; }
  .piece[data-cat="web"] figcaption b { font-size: 1.3rem; letter-spacing: -.024em; }
  .piece[data-cat="web"] figcaption p { font-size: .96rem; max-width: 40ch; }
}

.note-band p + p { margin-top: .7rem; }

/* WCAG 1.4.1 (Use of Colour, Level A): an inline link inside a paragraph
   cannot be signalled by colour alone. Blue-on-ink measured 1.4:1 against
   the surrounding text, well under the 3:1 that would let colour stand on
   its own — so prose links carry an underline. Buttons, nav and card links
   are exempt: they are distinguished by shape and position, not colour. */
.note a, .note-band a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   SERVICE HERO — the product, on the page that sells it
   The home page demonstrates each system; the service pages, which are
   the ones search actually lands on, were pure text. The card components
   already live in styles.css, so each hero now carries its own working
   demonstration rather than a description of one.
   ============================================================ */

.phero__in--split { max-width: var(--maxw); }
.phero__copy { max-width: 54rem; }

.phero__demo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  min-height: 360px;
}

@media (min-width: 1000px) {
  .phero__in--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .phero__copy { max-width: 36rem; }
  .phero__demo { margin-top: 0; min-height: 420px; }
  /* the hero headline is sized for a full-width measure; it needs reining
     in once it only has half the row */
  .phero__in--split h1 { font-size: clamp(2.3rem, 3.6vw, 3.5rem); }
}

/* On the home page a panel only animates once the showcase driver marks it
   active. Here there is one panel and no driver, so it plays on reveal. */
.phero__demo .panel { opacity: 0; visibility: hidden; }
.phero__demo .panel.is-on { opacity: 1; visibility: visible; }