/* Performance Painting Services
   Accent palette sampled from the client's own deck-stain photographs (hue ~20deg):
   sunlit board #E2A181, mid #C48666, shadow #6C4939. Weathered grey #8E8D86 from 013.
   Motion is CSS scroll-driven (animation-timeline), compositor side, zero JS. */

:root {
  --ground: #131010;
  --ground-2: #1B1614;
  --ground-3: #241C18;
  --ink: #F5EFEA;
  --ink-dim: #B6AAA2;
  --ink-faint: #9C8F86;
  --accent: #E09A6F;
  --accent-bright: #F0B48D;
  --accent-deep: #6C4939;
  --weathered: #8E8D86;
  --line: rgba(224, 154, 111, 0.22);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; margin: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 1.25rem;
}

/* ---------- skip link + focus ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #1A1210; padding: 0.75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gut);
  /* gradient stays on background-image so background-color can be animated independently */
  background-image: linear-gradient(to bottom, rgba(19,16,16,0.92), rgba(19,16,16,0));
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
.top .mark { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.01em; }
.top .mark span { color: var(--accent); }
.call-sm {
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  border: 1px solid var(--accent); border-radius: 999px; padding: 0.5rem 1.05rem;
  background: var(--accent); color: #1A1210; white-space: nowrap;
}
.call-sm:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  /* The video plays far brighter than the still, so text that cleared over the poster
     failed over the footage. Darkening the media is what makes legibility independent
     of which frame is on screen. */
  filter: brightness(0.86) saturate(1.0);
}
/* The still is the LCP element and the video's poster is the same frame, so the swap is
   invisible and the page never waits on the clip. Phones never fetch it. */
.hero-video { position: absolute; inset: 0; z-index: 1; }
.hero-media img { position: absolute; inset: 0; z-index: 0; }
@media (max-width: 760px) { .hero-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-media::after {
  /* MUST sit above .hero-video (z-index 1). Without this the clip paints over every
     gradient in this stack and the hero copy loses its entire scrim the moment the
     video starts playing, which is exactly what happened. */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(96deg, rgba(16,13,12,0.90) 0%, rgba(16,13,12,0.84) 40%, rgba(16,13,12,0.62) 58%, rgba(16,13,12,0.28) 76%, rgba(16,13,12,0.06) 92%, rgba(16,13,12,0) 100%),
    radial-gradient(125% 100% at 70% 40%, rgba(19,16,16,0) 36%, rgba(19,16,16,0.40) 100%),
    linear-gradient(to top, var(--ground) 3%, rgba(19,16,16,0.84) 15%, rgba(19,16,16,0.46) 40%, rgba(19,16,16,0.20) 100%),
    linear-gradient(to right, rgba(19,16,16,0.74), rgba(19,16,16,0.04) 62%);
}
/* film grain. Cheap, static, and it stops the flat gradients from banding. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.hero-inner { position: relative; z-index: 4; padding: 0 var(--gut) clamp(3rem, 8vh, 6rem); width: min(100%, var(--max)); margin-inline: auto; }

.hero h1 { font-size: clamp(2.9rem, 9.5vw, 7.4rem); max-width: 15ch; text-wrap: balance; }
.hero-rule {
  width: 0; height: 1px; background: linear-gradient(to right, var(--accent), transparent);
  margin-bottom: 1.75rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin: 1.5rem 0 0; max-width: 46ch; color: var(--ink-dim); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--accent); color: #1A1210;
  font-weight: 700; font-size: 1.02rem; text-decoration: none;
  padding: 0.95rem 1.7rem; border-radius: 999px; border: 1px solid var(--accent);
  transition: transform 0.18s ease, background 0.18s ease;
}
.btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(224,154,111,0.12); color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }

.rating {
  display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink-dim); font-size: 0.95rem;
  /* solid, so the ratio does not depend on which video frame is underneath */
  background: #171311; border: 1px solid rgba(245,239,234,0.10);
  padding: 0.5rem 1rem 0.5rem 0.85rem; border-radius: 999px;
}
.rating b { color: var(--ink); font-size: 1.05rem; }
.stars { color: var(--accent); letter-spacing: 0.1em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 4; display: grid; justify-items: center; gap: 0.5rem;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim);
}
/* solid backing so the cue does not depend on the frame behind it, same reasoning as
   the rating chip and the state tags */
.scroll-cue { color: var(--ink); background: rgba(16,13,12,0.86); padding: 0.55rem 0.9rem 0.4rem;
  border-radius: 999px; backdrop-filter: blur(6px); }
.scroll-cue i { opacity: 0.9; }
.scroll-cue i { display: block; width: 1px; height: 2.4rem; background: linear-gradient(to bottom, var(--accent), transparent); }

/* ---------- section shell ---------- */
section { position: relative; }
.band { padding: clamp(5rem, 13vh, 9rem) 0; }
.band-2 { background: var(--ground-2); }
.lead-h { font-size: clamp(2.1rem, 5.2vw, 4rem); max-width: 18ch; }
.sub { color: var(--ink-dim); max-width: 54ch; margin: 1.25rem 0 0; }

/* ---------- transformation (sticky stage) ---------- */
.transform-scope { position: relative; height: 320svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; }
.stage-frame { position: absolute; inset: 0; }
.stage-frame img { width: 100%; height: 100%; object-fit: cover; }
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(19,16,16,0.86) 2%, rgba(19,16,16,0.15) 48%, rgba(19,16,16,0.55) 100%);
}
.stage-copy {
  position: relative; z-index: 3; text-align: center;
  width: min(100% - var(--gut) * 2, 42rem); margin-inline: auto;
  display: grid;
}
.stage-copy > div { grid-area: 1 / 1; align-self: center; }
/* The plates change underneath, so the copy cannot rely on any one photograph being dark
   where the text sits. This scrim makes legibility independent of which plate is showing. */
.stage-copy::before {
  content: ""; position: absolute; inset: -4rem -6rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(19,16,16,0.86) 0%, rgba(19,16,16,0.72) 38%, rgba(19,16,16,0.35) 64%, rgba(19,16,16,0) 82%);
}
.stage-copy p { color: #D8CFC9; }
.copy-after { opacity: 0; }
.stage-copy h2 { font-size: clamp(2.2rem, 7vw, 5rem); }
.stage-copy p { color: var(--ink-dim); margin-top: 1rem; }
.state-tag {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.tag-before { background: #1F1E1B; color: #E8E5E0; border: 1px solid rgba(232,229,224,0.34); }
.tag-after { background: #1F1E1B; color: var(--accent-bright); border: 1px solid var(--line); }

/* scroll progress hairline across the header */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(to right, var(--accent-deep), var(--accent), var(--accent-bright));
}

/* ---------- reviews ---------- */
.reviews { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); margin-top: 3.5rem; }
figure.review {
  margin: 0; background: var(--ground-3); border: 1px solid rgba(245,239,234,0.07);
  border-radius: 1.1rem; padding: clamp(1.5rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
figure.review .stars { font-size: 0.95rem; }
blockquote { margin: 0; font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
figure.review figcaption { color: var(--ink-faint); font-size: 0.88rem; letter-spacing: 0.02em; }
figure.review figcaption b { color: var(--ink-dim); font-weight: 650; }

/* ---------- work grid, a photograph is never a rectangle ----------
   Rows are a FIXED height and items carry no aspect-ratio. Mixing aspect ratios inside a
   row made the row as tall as its tallest item and left dead space under the others, which
   is what the 16:9 next to a 3:4 was doing. Column spans per row sum to exactly 6. */
.work {
  display: grid;
  gap: clamp(0.6rem, 1.3vw, 1.15rem);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(200px, 23vw, 330px);
  margin-top: 3.5rem;
}
.work figure {
  margin: 0; overflow: hidden; background: var(--ground-3); position: relative;
  border-radius: 1rem;
}
.work img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work figure.w-wide { grid-column: span 4; }
.work figure.w-col  { grid-column: span 3; }
.work figure.w-sq   { grid-column: span 2; }
.work figure.w-arch { grid-column: span 2; border-radius: 11rem 11rem 1rem 1rem; }

/* ---------- closing CTA ---------- */
.close { text-align: center; padding: clamp(6rem, 16vh, 11rem) 0; background: var(--ground-2); }
.close h2 { font-size: clamp(2.4rem, 7vw, 5.2rem); margin-inline: auto; max-width: 16ch; }
.close .sub { margin-inline: auto; text-align: center; }
.close-cta { margin-top: 2.5rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
.phone-big {
  display: block; font-family: var(--display); font-size: clamp(2rem, 6vw, 3.4rem);
  color: var(--accent); text-decoration: none; margin-top: 2rem; letter-spacing: -0.01em;
}
.phone-big:hover { color: var(--accent-bright); }

footer { padding: 2.5rem 0 3.5rem; color: var(--ink-faint); font-size: 0.85rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center; }

/* ---------- scroll-driven motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* The header gradient alone is too weak once content scrolls under it: on a phone the
       review text was showing through and colliding with the wordmark. Solidify on scroll. */
    .top { animation: topSolid linear both; animation-timeline: scroll(root); animation-range: 0 18svh; }
    @keyframes topSolid {
      to { background-color: #131010; border-bottom-color: rgba(245,239,234,0.10); }
    }

    /* ---- HERO, layered parallax on the document scroll ----
       view() with an `entry` range is useless here: the hero is on screen at load, so the
       entry phase is already over. Everything below is driven by scroll(root) over the first
       viewport. Each layer moves at its OWN rate, which is what reads as depth rather than
       a single pane sliding.
       The transform is applied to BOTH the img and the video. It was on the img alone, and
       the video sits on top of it, so the only thing the visitor could actually see never
       moved at all. */
    .hero-media img, .hero-media video {
      animation: heroPlate linear both;
      animation-timeline: scroll(root); animation-range: 0 100svh;
      transform-origin: 58% 62%;
    }
    @keyframes heroPlate {
      from { transform: scale(1.0) translate3d(0,0,0); }
      to   { transform: scale(1.17) translate3d(0, 9%, 0); }
    }

    /* the scrim deepens as the copy leaves, so the type never thins out over the plate */
    .hero-media::after {
      animation: heroScrim linear both;
      animation-timeline: scroll(root); animation-range: 0 100svh;
    }
    @keyframes heroScrim { from { opacity: 1; } to { opacity: 1.0; filter: brightness(0.72); } }

    /* grain lifts slightly as you move, so the surface is never dead still */
    .hero::before {
      animation: heroGrain linear both;
      animation-timeline: scroll(root); animation-range: 0 100svh;
    }
    @keyframes heroGrain { from { opacity: 0.14; } to { opacity: 0.26; } }

    /* four copy layers, four different rates. The headline leads, the rating trails. */
    .hero-rule  { animation: hrRule linear both;  animation-timeline: scroll(root); animation-range: 0 62svh; }
    @keyframes hrRule  { to { transform: translateY(-8.5rem); opacity: 0; } }

    .hero h1    { animation: hrLead linear both;  animation-timeline: scroll(root); animation-range: 0 88svh; }
    @keyframes hrLead  { to { transform: translateY(-7.5rem); opacity: 0.06; filter: blur(3px); } }

    .hero .lede { animation: hrMid linear both;   animation-timeline: scroll(root); animation-range: 0 78svh; }
    @keyframes hrMid   { to { transform: translateY(-4.6rem); opacity: 0; } }

    .hero-cta   { animation: hrSlow linear both;  animation-timeline: scroll(root); animation-range: 0 72svh; }
    @keyframes hrSlow  { to { transform: translateY(-2.8rem); opacity: 0; } }

    .rating     { animation: hrTrail linear both; animation-timeline: scroll(root); animation-range: 0 66svh; }
    @keyframes hrTrail { to { transform: translateY(-1.4rem); opacity: 0; } }

    .scroll-cue { animation: cueOut linear both; animation-timeline: scroll(root); animation-range: 0 26svh; }
    @keyframes cueOut { to { opacity: 0; transform: translate(-50%, 1.2rem); } }

    /* entrance, time based, so the page is alive before a scroll ever happens */
    .hero-rule { animation: ruleDraw 1.1s cubic-bezier(.16,1,.3,1) 0.25s both, hrRule linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 62svh; }
    @keyframes ruleDraw { to { width: min(11rem, 34vw); } }

    /* --- every layer moves --- */

    /* header progress hairline, driven by the whole document */
    .progress { animation: prog linear both; animation-timeline: scroll(root); }
    @keyframes prog { to { transform: scaleX(1); } }

    /* headings and body copy rise AND resolve out of a blur, which is what reads as
       cinematic rather than just "faded in" */
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 6% entry 58%; }
    @keyframes rise {
      from { opacity: 0; transform: translateY(2.6rem); filter: blur(9px); }
      to   { opacity: 1; transform: none; filter: blur(0); }
    }

    /* section headings drift on past their entrance, so nothing sits perfectly still */
    .band .lead-h { animation: driftUp linear both; animation-timeline: view(); animation-range: cover 12% cover 100%; }
    @keyframes driftUp { to { transform: translateY(-2.2rem); } }
    .band .eyebrow { animation: driftUpSm linear both; animation-timeline: view(); animation-range: cover 12% cover 100%; }
    @keyframes driftUpSm { to { transform: translateY(-3.4rem); } }

    /* review cards stagger and settle */
    figure.review { animation: cardIn linear both; animation-timeline: view(); animation-range: entry 4% entry 62%; }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(3.2rem) scale(0.965); filter: blur(7px); }
      to   { opacity: 1; transform: none; filter: blur(0); }
    }
    .reviews figure.review:nth-child(3n+2) { animation-range: entry 9% entry 68%; }
    .reviews figure.review:nth-child(3n+3) { animation-range: entry 14% entry 74%; }

    /* ---- WORK GRID REVEAL ----
       Restored 2026-09-02, deleted by mistake in the same edit that removed the stage plates.
       The timeline MUST be declared on the figure, not the img: the figure is overflow:hidden,
       which makes it a scroll container, so view() on the img inside resolves its scrollport to
       the figure and the animation is born finished. */
    .work figure { view-timeline-name: --frame; view-timeline-axis: block; }
    .work figure img {
      animation: revealWipe linear both, revealSettle linear both;
      animation-timeline: --frame, --frame;
      animation-range: entry 0% entry 62%, entry 0% cover 42%;
    }
    @keyframes revealWipe {
      from { clip-path: inset(100% 0 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
    @keyframes revealSettle {
      from { transform: scale(1.22) translateY(3%); }
      to   { transform: scale(1) translateY(0); }
    }
    .work figure:nth-child(3n+2) img { animation-range: entry 6% entry 68%, entry 6% cover 48%; }
    .work figure:nth-child(3n+3) img { animation-range: entry 12% entry 74%, entry 12% cover 54%; }

    /* the closing block draws itself as it arrives */
    .close h2 { animation: closeIn linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; }
    @keyframes closeIn { from { opacity: 0; transform: translateY(2.4rem) scale(0.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
    .phone-big { animation: phoneIn linear both; animation-timeline: view(); animation-range: entry 8% entry 56%; }
    @keyframes phoneIn { from { opacity: 0; letter-spacing: 0.16em; transform: translateY(1rem); } to { opacity: 1; letter-spacing: -0.01em; transform: none; } }

    /* the copy swaps at the midpoint */
    /* ---- THE TRANSFORMATION STAGE ----
       Restored 2026-09-02 after being deleted by mistake while the hero block was rewritten.
       The named view-timeline lives on the scope; the `contain` phase is exactly the window
       the sticky stage is pinned for. scroll(nearest) does NOT work here: the scope is not
       itself a scroller, so it resolves to the document and burns all four plates inside the
       first third of the page. */
    .transform-scope { view-timeline-name: --xform; view-timeline-axis: block; }
    .stage-frame {
      animation-name: plate; animation-timeline: --xform;
      animation-fill-mode: both; animation-timing-function: linear;
    }
    .plate-1 { animation-name: plateFirst; animation-range: contain 0%  contain 27%; }
    .plate-2 { animation-range: contain 23% contain 51%; }
    .plate-3 { animation-range: contain 47% contain 75%; }
    .plate-4 { animation-name: plateLast;  animation-range: contain 71% contain 100%; }
    @keyframes plate {
      0%   { opacity: 0; transform: scale(1.10); filter: blur(7px); }
      18%  { opacity: 1; filter: blur(0px); }
      82%  { opacity: 1; filter: blur(0px); }
      100% { opacity: 0; transform: scale(1.0); filter: blur(5px); }
    }
    @keyframes plateFirst {
      0%   { opacity: 1; transform: scale(1.10); filter: blur(0px); }
      82%  { opacity: 1; filter: blur(0px); }
      100% { opacity: 0; transform: scale(1.0); filter: blur(5px); }
    }
    @keyframes plateLast {
      0%   { opacity: 0; transform: scale(1.10); filter: blur(7px); }
      24%  { opacity: 1; filter: blur(0px); }
      100% { opacity: 1; transform: scale(1.0); filter: blur(0px); }
    }

    .copy-before { animation: copySwapOut linear both; animation-timeline: --xform; animation-range: contain 38% contain 50%; }
    @keyframes copySwapOut { to { opacity: 0; transform: translateY(-1.5rem); } }
    .copy-after { animation: copySwapIn linear both; animation-timeline: --xform; animation-range: contain 50% contain 64%; }
    @keyframes copySwapIn { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
  }
}

/* fallback when animation-timeline is unsupported: everything visible, plates stacked */
@supports not (animation-timeline: view()) {
  .top { background-color: #131010; border-bottom-color: rgba(245,239,234,0.10); }
  .stage-frame + .stage-frame { display: none; }
  .copy-after { display: none; }
  .transform-scope { height: auto; }
  .stage { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .top { background-color: #131010; border-bottom-color: rgba(245,239,234,0.10); }
  .stage-frame + .stage-frame { display: none; }
  .copy-after { display: none; }
  .transform-scope { height: auto; }
  .stage { position: relative; }
}

/* ---------- responsive ----------
   Spans are re-stated per breakpoint so every row still sums to the column count.
   This is the whole fix: a span set that does not divide evenly is what leaves holes. */
@media (max-width: 900px) {
  /* rows: arch3+wide3 | col3+col3 | sq2+sq2+sq2 | wide3+arch3 | sq2+sq2+sq2 */
  .work figure.w-wide { grid-column: span 3; }
  .work figure.w-arch { grid-column: span 3; border-radius: 8rem 8rem 1rem 1rem; }
  .work figure.w-col  { grid-column: span 3; }
  .work figure.w-sq   { grid-column: span 2; }
  .work { grid-auto-rows: clamp(190px, 30vw, 300px); }
}
@media (max-width: 620px) {
  /* one column: holes are impossible */
  .work { grid-template-columns: 1fr; grid-auto-rows: clamp(230px, 62vw, 340px); }
  .work figure.w-wide, .work figure.w-arch, .work figure.w-col, .work figure.w-sq { grid-column: span 1; }
  .work figure.w-arch { border-radius: 9rem 9rem 1rem 1rem; }
  .transform-scope { height: 260svh; }
  .top .mark { font-size: 1rem; }
}