/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7azYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7YjYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7aDYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7ZjYYiAzcPA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsK8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsD8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsL8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsE8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsI8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsJ8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/NGSwv5HMAFg6IuGlBNMjxLsH8ahuQ2e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/v6-IGZDIOVXH9xtmTZfRagunqBw5WC62QKcnL-mYF221gA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/v6-IGZDIOVXH9xtmTZfRagunqBw5WC62QKknL-mYF20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Fonts and tokens */


:root {
  --paper: #fafaf7;
  --ink: #171717;
  --muted: #62625d;
  --line: #d2d2cb;
  --cobalt: #1745ed;
  --cobalt-hover: #1036bb;
  --display: 'Inter Tight',Arial,sans-serif;
  --body: Inter,Arial,sans-serif;
  color-scheme: light
}

/* 2. Base and shared controls */
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}
img {
  display: block;
  max-width: 100%
}
a {
  color: inherit;
  text-underline-offset: 4px
}
button,input,textarea {
  font: inherit
}
button,a,input,textarea,summary {
  -webkit-tap-highlight-color: transparent
}
:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 5px
}
h1,h2,h3,p {
  margin: 0
}
h1,h2,h3 {
  font-family: var(--display);
  line-height: 1.04;
  letter-spacing: -.045em
}
h2 {
  font-size: clamp(32px,3.5vw,49px);
  font-weight: 800
}
h3 {
  font-weight: 750
}
.page-shell {
  width: min(1280px,calc(100% - 88px));
  margin: auto
}
.eyebrow {
  font-size: 10px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 48px;
  padding: 12px 19px;
  border: 0;
  border-radius: 9px;
  background: var(--cobalt);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .18s,transform .18s
}
.button:hover {
  background: var(--cobalt-hover);
  transform: translateY(-2px)
}
.button:disabled {
  opacity: .65;
  cursor: wait;
  transform: none
}
.button span {
  font-size: 22px;
  line-height: 1
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 10;
  padding: 10px 20px;
  background: var(--ink);
  color: #fff
}
.skip-link:focus {
  top: 12px
}
.section {
  scroll-margin-top: 24px
}

/* 3. Navigation and hero */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0
}
.wordmark {
  font-family: var(--display);
  font-size: 35px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  text-decoration: none;
  white-space: nowrap
}
.wordmark-dot {
  color: var(--cobalt)
}
nav {
  display: flex;
  align-items: center;
  gap: 32px
}
nav>a:not(.button) {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500
}
nav>a:not(.button):hover {
  text-decoration: underline
}
.nav-cta {
  gap: 13px
}
/* Compact before-and-after hero with the introduction as the primary heading. */
.hero {
  padding: 24px 0 0;
  border-bottom: 1px solid var(--line)
}
.hero-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 10px
}
.hero .eyebrow {
  color: var(--muted)
}
.hero-edition {
  font-size: 11px;
  color: var(--muted)
}
.hero-body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: clamp(40px,7vw,100px);
  padding: 12px 25px 22px 0
}
/* Real PDF captures; both remain visible side by side when JavaScript is unavailable. */
.hero-comparison { margin: 0; min-width: 0; width: 100%; max-width: 540px }
.comparison-labels { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; font-weight: 600 }
.concept-tag { margin-left: 6px; font-weight: 400; color: var(--muted); font-size: 10px }
.comparison-stage { position: relative; display: flex; flex-direction: row-reverse; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; isolation: isolate }
.comparison-stage img { width: 50%; height: auto; object-fit: cover; object-position: top }
.comparison-divider { display: none }
.hero-comparison[data-ready] .comparison-stage { display: block; aspect-ratio: 16 / 10 }
.hero-comparison[data-ready] .comparison-stage img { position: absolute; inset: 0; width: 100%; height: 100% }
.hero-comparison[data-ready] .comparison-before { clip-path: inset(0 calc(100% - var(--comparison-position,50%)) 0 0) }
.hero-comparison[data-ready] .comparison-divider { display: block; position: absolute; top: 0; bottom: 0; left: clamp(0px,var(--comparison-position,50%),calc(100% - 2px)); width: 2px; background: var(--cobalt); pointer-events: none }
.comparison-controls:not([hidden]) { display: flex; align-items: center; gap: 12px; min-height: 44px }
.comparison-controls button { border: 0; background: transparent; padding: 10px 0; font-size: 11px; cursor: pointer; color: var(--muted); min-height: 44px }
.comparison-controls button:hover { color: var(--cobalt) }
.comparison-controls input { width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--cobalt); cursor: ew-resize; touch-action: pan-y }
.hero-comparison figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px; padding-top: 4px; font-size: 10px; line-height: 1.5; color: var(--muted) }
.hero-comparison figcaption strong { font-weight: 600; color: var(--ink) }
.comparison-hint { display: none }
.hero-comparison[data-ready] .comparison-hint { display: inline }
.hero-copy {
  max-width: 420px;
  padding-top: 6px
}
.hero-intro {
  font-family: var(--display);
  font-size: clamp(23px,2.3vw,31px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em
}
.hero-description {
  margin: 17px 0 24px;
  font-size: 15px;
  line-height: 1.75;
  color: #565650;
  max-width: 37ch
}
.hero-cta {
  min-width: 190px;
  justify-content: space-between;
  min-height: 52px
}
.hero-services {
  font-size: 10px;
  color: var(--muted);
  margin-top: 18px
}
.hero-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted)
}
.hero-work-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 32px;
  color: var(--ink);
  font-size: 12px;
  text-decoration: none
}
.hero-work-link:hover {
  text-decoration: underline
}

/* 4. Project folders */
.work {
  padding: 35px 0 40px
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-bottom: 36px
}
.section-heading h2 {
  flex-shrink: 0
}
.section-heading .eyebrow {
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--muted)
}
.heading-rule {
  height: 1px;
  background: var(--line);
  flex: 1;
  min-width: 20px
}
/* One horizontal archive and a stable workspace for the selected project. */
.work-instruction { display: flex; justify-content: space-between; gap: 15px; margin: -12px 0 4px; font-size: 11px; color: var(--muted) }
.work-instruction > span { font-size: 10px }
.folder-rail { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; padding: 27px 3px 19px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b5b5ab transparent; overscroll-behavior-x: contain }
.project-folder { position: relative; display: flex; flex-direction: column; flex: 0 0 230px; min-width: 0; padding: 16px 16px 10px; border-radius: 0 10px 10px 10px; background: var(--folder-bg); color: var(--folder-ink); text-decoration: none; scroll-snap-align: start; border: 2px solid transparent; transition: border-color .18s; isolation: isolate }
.folder-tab { position: absolute; bottom: calc(100% + 1px); left: -2px; background: var(--folder-bg); padding: 5px 19px 3px; border-radius: 9px 14px 0 0; font-size: 10px; font-variant-numeric: tabular-nums }
.folder-name { font-family: var(--display); font-size: 23px; font-weight: 750; line-height: 1.1; letter-spacing: -.035em }
#picnic-folder .folder-name { font-size: 19px; line-height: calc(23 / 19 * 1.1); white-space: nowrap }
.folder-category { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; margin: 6px 0 12px }
.folder-thumbnail { display: block; margin-top: auto; overflow: hidden; border: 1px solid #0002; border-radius: 4px; background: #fff }
.folder-thumbnail img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover }
.folder-selected { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; min-height: 16px; visibility: hidden; font-size: 9px }
.folder-selected > span { font-size: 15px }
.project-folder[aria-selected="true"] { border-color: var(--folder-ink) }
.project-folder[aria-selected="true"] .folder-selected { visibility: visible }
.project-folder:hover { border-color: var(--folder-ink) }
.project-panels { margin-top: 16px }


.folder-thumbnail img { aspect-ratio: 16 / 7.5 !important; object-position: top }
.folder-rail { padding-bottom: 14px }
/* 4b. Case workspace: folders on top, one fixed-size panel below.
   Preview on the left, story on the right; every project fills the same
   slots, and rail plus panel fit one screen so switching never scrolls. */
.project { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; padding: 16px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0 }
.work[data-ready] .project-panels { display: grid }
.work[data-ready] .project { grid-area: 1 / 1; margin-bottom: 0 }
.work[data-ready] .project[hidden] { display: grid !important; visibility: hidden; pointer-events: none }
.project-visual { display: flex; min-width: 0 }
.site-preview { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--folder-bg) }
.site-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 48px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--line); background: #f5f5f0; color: var(--muted); font-size: 11px }
.preview-mode { display: flex; align-items: center; gap: 7px }
.project[data-live] .preview-mode::before { content: ''; width: 5px; height: 5px; background: #248744; border-radius: 50% }
.preview-hint { display: none }
.preview-controls { display: flex; align-items: center; gap: 14px; margin-left: auto }
.preview-switch { border: 0; padding: 6px 0; background: transparent; color: var(--cobalt); font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.site-preview[data-view="compare"] .preview-mode, .site-preview[data-view="compare"] .preview-switch { display: none }
.site-preview[data-view="compare"] .preview-hint { display: block }
.view-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: #e6e6df }
.view-tabs button { min-height: 30px; padding: 4px 13px; border: 0; border-radius: 5px; background: transparent; color: #55524c; font-size: 11px; font-weight: 500; cursor: pointer }
.view-tabs button:hover { color: var(--ink) }
.view-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px #0003 }
.site-stage { flex: 1; display: grid; place-items: center; padding: 18px }
.site-preview-window { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #0002, 0 18px 36px -18px #0007 }
.compare-pair[hidden], .site-preview-window[hidden], .view-tabs[hidden], .preview-switch[hidden] { display: none }
.site-preview-window > img { width: 100%; height: 100%; object-fit: cover }
.live-frame-host { display: none; position: absolute; inset: 0; overflow: hidden; background: #fff }
.project[data-live] .live-frame-host { display: block }
/* Live pages fill the stage rather than sitting in a centered screenshot slot. */
.project[data-live-layout] .site-stage { place-items: stretch; min-height: 0 }
.project[data-live-layout] .site-preview-window { aspect-ratio: auto; height: 100%; min-height: 0; align-self: stretch }
.live-frame-host iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; background: #fff }
.compare-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; width: 100% }
.compare-item { margin: 0; min-width: 0 }
.compare-label { display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 8px; color: var(--folder-ink); font-size: 11px; font-weight: 500 }
.compare-tag { padding: 2px 9px; border-radius: 99px; background: var(--folder-ink); color: var(--folder-bg); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.compare-frame { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #0002, 0 14px 28px -16px #0008; cursor: zoom-in; transition: transform .2s, box-shadow .2s }
.compare-frame img { width: 100%; height: 100%; object-fit: cover }
.compare-frame:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #0003, 0 24px 38px -18px #000a }
.compare-arrow { position: absolute; left: 50%; top: calc(15px + 50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--folder-ink); color: var(--folder-bg); font-size: 15px; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 4px var(--folder-bg) }
.project-side { display: flex; flex-direction: column; min-width: 0; padding: 12px 4px 0 0 }
.project-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line) }
.project-heading .eyebrow { margin-bottom: 14px; color: var(--muted); font-size: 9px; line-height: 1.65 }
.project-heading h3 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -.025em }
.project-summary { margin-top: 8px; font-family: var(--display); font-size: 16px; line-height: 1.6; letter-spacing: 0; color: #55554e }
.project-story { display: grid; flex: 1; align-content: center; gap: 20px; padding: 24px 0; text-align: left }
.case-step { display: grid; grid-template-columns: 22px 1fr; gap: 10px }
.case-step > span { padding-top: 2px; color: var(--cobalt); font-size: 10.5px; font-variant-numeric: tabular-nums }
.case-step h4 { margin: 0 0 5px; font-size: 13px; font-weight: 600 }
.case-step p { font-size: 14px; line-height: 1.6; color: #55554e }
.project-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px }
.project-visit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; line-height: 1.5 }
.project-visit a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--ink); font-size: 12px; font-weight: 500; text-decoration: none }
.project-visit a:hover { text-decoration: underline }
.next-project { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .18s, color .18s, border-color .18s }
.next-project:hover { border-color: var(--ink); background: var(--ink); color: var(--paper) }
@media(max-width:900px) {
  .project { grid-template-columns: 1fr; gap: 24px }
  .project-side { padding: 12px 6px 0 }
  .project-story { flex: none; align-content: start }
}
@media(max-width:800px) {
  .project { grid-template-columns: 1fr; gap: 18px; padding: 16px }
  .site-stage { padding: 14px }
  .compare-pair { grid-template-columns: 1fr; gap: 18px }
  .compare-arrow { display: none }
  .view-tabs button { min-height: 36px; padding: 6px 14px }
  .next-project { min-height: 44px }
}
@media(max-width:1024px) {
  .project[data-live-layout] .site-stage { min-height: clamp(360px, 65svh, 680px) }
}

/* Before -> After grid: column labels once, then one row per page. Fits the stage. */
.site-stage { position: relative }
.compare-pair { position: absolute; inset: 18px 26px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); grid-template-rows: auto repeat(var(--rows), minmax(0, 1fr)); gap: 14px 6px; align-items: center; width: auto }
.compare-pair[hidden] { display: none }
.compare-pair .chapter { display: contents }
.ba-col { justify-self: center; padding: 3px 12px; border-radius: 99px; background: var(--folder-ink); color: var(--folder-bg); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.compare-pair .compare-frame { position: relative; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: zoom-in }
.compare-pair .compare-frame:hover { box-shadow: none; transform: translateY(-3px) }
.compare-pair .compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center }
/* One pair only: keep labels tight to the frames and center the group. */
.compare-pair--single { grid-template-rows: auto auto; align-content: center }
.compare-pair--single .compare-frame { height: auto; aspect-ratio: 16 / 9 }
.compare-pair--single .compare-frame img { border-radius: 6px; box-shadow: 0 0 0 1px #ffffff1a, 0 16px 30px -18px #000c }
.ba-arrow { justify-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--folder-ink); color: var(--folder-bg); font-size: 15px }
@media(max-width:800px) {
  .compare-pair { position: static; inset: auto; grid-template-rows: auto; gap: 12px 4px }
  .compare-pair .compare-frame { height: auto; aspect-ratio: 3 / 2 }
  .ba-arrow { width: 26px; height: 26px; font-size: 13px }
}

/* Enlarged before/after viewer */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: #0d0d0df2 }
.lightbox[hidden] { display: none }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; width: min(1280px, 100%) }
.lightbox .view-tabs { background: #ffffff26 }
.lightbox .view-tabs button { min-height: 36px; padding: 6px 16px; color: #d6d6d0 }
.lightbox .view-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink) }
.lightbox-close { min-height: 36px; padding: 6px 14px; border: 1px solid #ffffff59; border-radius: 7px; background: transparent; color: #fff; font-size: 12px; cursor: pointer }
.lightbox-close:hover { background: #ffffff1f }
.lightbox-img { width: auto; max-width: min(1280px, 100%); max-height: calc(100vh - 150px); border-radius: 8px; background: #fff; object-fit: contain }
.lightbox-caption { color: #d6d6d0; font-size: 12px }

/* 3b. Hero: the one-job headline beside a single showcase frame that changes
   in step with it. Sized to its content so the work section peeks in below. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.hero { padding-top: 16px; border-bottom: 0 }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(32px, 5vw, 76px); padding: 14px 0 38px }
/* Left column spans exactly the showcase frame: headline top meets its top edge,
   buttons' bottom meets its bottom edge (the caption row sits below both). */
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-bottom: 0 !important }
.hero-copy { min-width: 0; max-width: none; padding: 0 }
.hero-title { margin-top: -.09em; font-size: clamp(38px, 6.25vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -.025em }
.hero-lead { display: block; text-wrap: balance }
.job-line { position: relative; display: block; height: 1.12em; margin-top: .05em; color: var(--cobalt) }
.job-word { position: absolute; left: 0; bottom: .06em; white-space: nowrap; opacity: 0; transform: translateY(.45em); transition: opacity .45s ease, transform .65s cubic-bezier(.2,.7,.2,1) }
.job-word.is-active { opacity: 1; transform: none }
.job-word.is-leaving { opacity: 0; transform: translateY(-.45em) }
.hero-lede { max-width: 36ch; margin: 24px 0 30px; font-size: 17px; line-height: 1.65; color: #4f4f4a }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px }
.hero-actions .button { min-width: 230px; min-height: 60px; padding-inline: 22px; justify-content: space-between; font-size: 16px }
.hero-actions .hero-work-link { font-size: 14px; font-weight: 500 }
.hero-visual { min-width: 0 }
.show-wrap { position: relative; border-radius: 16px; background: var(--show-bg); color: var(--show-ink); transition: background-color .8s ease, color .8s ease }
.showcase { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9.4; padding: 0; overflow: visible; border: 0; border-radius: 16px; background: transparent; cursor: pointer }
.show-item { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1) }
.show-item.is-active { opacity: 1; transform: none }
.show-window { position: absolute; left: 10%; right: 10%; top: 8%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #0000001f, 0 14px 30px -12px #00000038; transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.showcase:hover .show-window { transform: translateY(-6px) }
.show-bar { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-bottom: 1px solid #e4e4dd; background: #f4f4ef }
.show-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d7d7d0 }
.show-window img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover }
/* Caption and dots sit inside the colored frame, along its bottom edge. */
.show-meta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 14px 12px 22px; pointer-events: none }
.show-dots { pointer-events: auto }
.show-caption { display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 13px; line-height: 1.35; transition: opacity .35s }
.show-caption[data-fading] { opacity: 0 }
.show-n { opacity: .65; font-size: 10px; font-variant-numeric: tabular-nums }
.show-name { font-weight: 600 }
.show-who { grid-column: 2; opacity: .7; font-size: 12px }
.show-dots { display: flex; flex-shrink: 0; gap: 2px }
.show-dot { position: relative; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer }
.show-dot::after { content: ''; position: absolute; left: 6px; right: 6px; top: 14px; height: 2px; border-radius: 2px; background: currentColor; opacity: .25; transition: opacity .3s }
.show-dot[aria-pressed="true"]::after { opacity: 1 }
.show-dot:hover::after { opacity: .6 }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px }
  .hero-copy { padding-bottom: 0 !important; justify-content: flex-start }
}
@media (max-width: 680px) {
  .hero-grid { padding: 8px 0 30px }
  .hero-title { font-size: clamp(34px, 10vw, 52px) }
  .hero-lede { margin: 18px 0 24px; font-size: 16px }
  .hero-actions .button { width: 100% }
  .show-bar { height: 16px; gap: 4px; padding: 0 8px }
  .show-bar i { width: 5px; height: 5px }
  .show-meta { min-height: 48px; padding: 0 6px 8px 14px; gap: 8px }
  .show-caption { font-size: 12px }
  .show-who { display: none }
}
@media (prefers-reduced-motion: reduce) {
  .job-word, .show-item, .show-window, .show-wrap { transition: none !important }
}

/* 4c. The five-second audit, after the work */
:root { --pen: #d9442c; --pen-wash: #fbeee9 }
.audit-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(32px, 6vw, 96px); padding: 44px 0 52px; border-top: 1px solid var(--line) }
.audit-intro { display: grid; gap: 14px; min-width: 0 }
.audit-intro .eyebrow { color: var(--muted) }
.audit-intro > p:last-child { max-width: 40ch; font-size: 16px; line-height: 1.7; color: #45453f }
.audit { min-width: 0; padding: 10px 26px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 34px 60px -46px #0006 }
.audit-list { margin: 0; padding: 0; list-style: none }
.audit-list li { border-bottom: 1px solid var(--line) }
.audit-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 10px 8px 10px 4px; border: 0; border-radius: 6px; background: transparent; color: #45453f; font-size: 15px; line-height: 1.4; text-align: left; cursor: pointer; transition: background .2s, color .2s }
.audit-item:hover { color: var(--ink) }
.audit-n { color: #a5a59d; font-size: 10px; font-variant-numeric: tabular-nums }
.audit-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid #c9c9c1; border-radius: 50%; transition: border-color .2s }
.audit-item:hover .audit-mark { border-color: var(--ink) }
.audit-mark svg { width: 22px; height: 22px; overflow: visible }
.audit-mark path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .22s ease-out }
.audit-mark path + path { transition-delay: .12s }
.audit-item[aria-pressed="true"] { background: var(--pen-wash); color: var(--ink) }
.audit-item[aria-pressed="true"] .audit-mark { border-color: transparent }
.audit-item[aria-pressed="true"] .audit-mark path { stroke-dashoffset: 0 }
.audit-item[aria-pressed="true"] .audit-n { color: var(--pen) }
.audit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 18px }
.audit-tally { font-size: 13px; color: var(--muted) }
.audit-tally strong { color: var(--pen); font-weight: 600 }
.audit-cta { gap: 18px }
.audit-cta .audit-cta-label { font-size: 15px; line-height: 1.4 }
@media (max-width: 900px) { .audit-section { grid-template-columns: 1fr; gap: 26px } }
@media (max-width: 680px) {
  .audit-section { padding: 30px 0 34px }
  .audit { padding: 6px 14px 16px }
  .audit-item { gap: 10px; font-size: 14px }
  .audit-cta { width: 100% }
}
@media (prefers-reduced-motion: reduce) { .audit-mark path { transition: none !important } }

/* 5. Process and about */
.process {
  padding: 10px 0 36px
}
.process .section-heading {
  margin-bottom: 26px
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  list-style: none;
  padding: 0;
  margin: 0
}
.process-grid li {
  display: flex;
  align-items: start;
  gap: 17px;
  padding: 4px 28px 8px;
  border-left: 1px solid var(--line)
}
.process-grid li:first-child {
  padding-left: 0;
  border: 0
}
.process-grid li:last-child {
  padding-right: 0
}
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 12px
}
.process-grid h3 {
  font-size: 21px;
  margin: 6px 0 12px;
  letter-spacing: -.03em
}
.process-grid p {
  font-size: 13px;
  line-height: 1.6;
  max-width: 28ch;
  color: #45453f
}
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  border-top: 1px solid var(--line);
  padding: 37px 0
}
.about .eyebrow {
  color: var(--muted);
  margin-bottom: 14px
}
.about h2 {
  font-size: 36px;
  line-height: 1.1
}
.about>p {
  align-self: center;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.75;
  color: #45453f
}

/* 6. Contact and footer */
.contact {
  border-top: 1px solid var(--line);
  padding: 37px 0 40px
}
.contact-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 35px
}
.contact h2 {
  font-size: clamp(32px,3.8vw,52px)
}
.starting-price {
  margin-top: 11px;
  font-size: 17px;
  letter-spacing: -.025em
}
.contact-intro {
  font-size: 14px;
  max-width: 31ch;
  color: var(--muted);
  padding-top: 8px
}
.email-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px
}
.contact-form {
  max-width: 780px;
  margin-top: 31px
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}
.field {
  margin-bottom: 21px
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px
}
.optional {
  font-weight: 400;
  color: var(--muted)
}
.field input,.field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid #bcbcB5;
  border-radius: 5px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5
}
.field textarea {
  resize: vertical;
  min-height: 125px
}
.field input:hover,.field textarea:hover {
  border-color: var(--ink)
}
.form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px
}
.form-bottom p {
  font-size: 11px;
  color: var(--muted);
  max-width: 30ch
}
.form-status {
  font-size: 13px;
  line-height: 1.6
}
.form-status:not(:empty) {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 5px
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 23px 0 28px;
  font-size: 11px;
  color: var(--muted)
}
.site-footer a {
  text-decoration: none
}
.site-footer a:hover {
  text-decoration: underline
}
.confirmation {
  min-height: 70vh;
  padding: 100px 0
}
.confirmation h1 {
  font-size: clamp(40px,6vw,75px);
  max-width: 800px
}
.confirmation p {
  margin: 24px 0;
  max-width: 50ch;
  font-size: 19px
}

/* 7. Responsive and motion preferences */
@media(max-width:1000px) {
  .page-shell {
    width: calc(100% - 48px)
  }
  .site-header nav {
    gap: 22px
  }
  .wordmark {
    font-size: 30px
  }
  .hero { padding-top: 24px }
  .hero-body { gap: 35px; padding-right: 0 }
  .hero-edition { display: none }
  .section-heading {
    gap: 17px
  }
  .section-heading .eyebrow {
    display: none
  }
  .process-grid li {
    padding: 4px 17px 8px;
    gap: 12px
  }
  .about {
    gap: 35px
  }
  .about h2 {
    font-size: 32px
  }
}
@media(max-width:800px) {
  .project-folder { flex-basis: 208px }
}
@media(max-width:680px) {
  .page-shell {
    width: calc(100% - 36px)
  }
  .site-header {
    padding: 23px 0;
    gap: 12px;
    flex-wrap: wrap
  }
  .wordmark {
    font-size: 29px
  }
  .site-header nav {
    gap: 19px
  }
  .site-header nav>a {
    font-size: 12px
  }
  .nav-cta {
    display: none
  }
  .hero { padding-top: 20px }
  .hero-heading-row { margin-bottom: 10px }
  .hero .eyebrow { font-size: 9px; letter-spacing: .1em }
  .hero-body { grid-template-columns: 1fr; gap: 16px; padding: 12px 0 18px }
  .hero-copy { grid-row: 1; max-width: 440px; padding: 0 }
  .hero-intro { font-size: 24px }
  .hero-intro br { display: none }
  .hero-description { font-size: 15px; margin: 12px 0 19px; max-width: 40ch }
  .hero-services { margin-top: 13px }
  .hero-comparison { width: min(320px,100%); justify-self: center }
  .comparison-labels { margin-bottom: 8px }
  .hero-footnote > span { display: none }
  .hero-footnote { justify-content: flex-end; padding: 8px 0 }
  .work {
    padding: 30px 0 33px
  }
  .section-heading {
    margin-bottom: 31px;
    gap: 14px
  }
  .section-heading h2 {
    font-size: 34px
  }
  .process {
    padding: 0 0 28px
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }
  .process-grid li,.process-grid li:first-child,.process-grid li:last-child {
    padding: 0;
    border: 0;
    gap: 17px
  }
  .process-grid p {
    max-width: 38ch;
    font-size: 14px
  }
  .process-grid h3 {
    font-size: 22px;
    margin: 6px 0 7px
  }
  .about {
    grid-template-columns: 1fr;
    gap: 21px;
    padding: 28px 0
  }
  .about h2 {
    font-size: 32px
  }
  .about>p {
    font-size: 15px
  }
  .contact {
    padding: 29px 0
  }
  .contact-heading {
    flex-direction: column;
    gap: 13px
  }
  .contact h2 {
    font-size: 38px
  }
  .contact-intro {
    max-width: 40ch;
    padding: 0;
    font-size: 14px
  }
  .contact-form {
    margin-top: 24px
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }
  .field {
    margin-bottom: 19px
  }
  .field label {
    font-size: 13px
  }
  .field input,.field textarea {
    font-size: 16px
  }
  .form-bottom {
    align-items: start
  }
  .form-bottom p {
    max-width: 21ch
  }
  .form-bottom .button {
    gap: 14px;
    flex-shrink: 0
  }
  .site-footer {
    font-size: 10px;
    padding: 20px 0;
    gap: 12px
  }
  .confirmation {
    padding: 70px 0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,*::before,*::after {
    transition: none!important
  }
  .button:hover {
    transform: none
  }
}

/* ============ Theme: Websites with Ryan, pass 2 ============
   All light. Warm paper, soft ink, and one accent of Ryan's own: sunlight
   yellow, the photographer's raw material. Photography details carry the
   personality: contact-sheet frames, a signed print with crop marks. */
:root {
  --paper: #f5f3ef; --mat: #ebe7e0; --card: #fffefc; --ink: #161514; --muted: #6e6a64; --line: #dcd7ce;
  --sun: #ffc83d; --sun-soft: #ffe7a3; --sun-wash: #fff6dc; --sun-deep: #8a6100;
  --cobalt: var(--ink); --cobalt-hover: #000; --pen: var(--ink); --pen-wash: var(--sun-wash);
  --sig: 'Mrs Saint Delafield', 'Brush Script MT', cursive;
  color-scheme: light
}
body { background: var(--paper); color: var(--ink) }
::selection { background: var(--sun); color: var(--ink) }
:focus-visible { outline-color: var(--ink) }
.wordmark-dot { color: var(--sun); text-shadow: 0 0 0 var(--sun) }

/* Buttons: ink pills that catch the light on hover. */
.button { border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600 }
.button:hover { background: var(--sun); color: var(--ink) }
.nav-cta { padding-inline: 20px }

/* Hero: the job line gets a sunlight highlighter swipe that draws in. */
.job-line { color: var(--ink) }
.job-word { padding: 0 .04em; background: linear-gradient(var(--sun), var(--sun)) 0 86% / 0% .32em no-repeat; transition: opacity .45s ease, transform .65s cubic-bezier(.2,.7,.2,1), background-size .55s .3s cubic-bezier(.6,.1,.3,1) }
.job-word.is-active, .job-word.is-leaving { background-size: 100% .32em }
.show-wrap, .showcase { border-radius: 18px }

/* Selected work accents */
.case-step > span { color: var(--sun-deep) }
.preview-switch { color: var(--ink) }
.project { border-radius: 16px }

.section h2 { font-weight: 800; letter-spacing: -.05em; text-wrap: balance }
.section > .eyebrow, .section .eyebrow { color: var(--muted) }

/* Five-second audit: a warm, sunlit panel with a white checklist card. */
.audit-section { display: block; padding: clamp(40px, 6vw, 72px) 0 0; border-top: 0 }
.audit-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 6vw, 88px); padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: radial-gradient(120% 140% at 0% 0%, var(--sun-soft) 0%, var(--sun-wash) 38%, var(--mat) 100%) }
.audit-intro { display: grid; gap: 18px; min-width: 0 }
.audit-intro .eyebrow { color: var(--sun-deep) }
.audit-intro h2 { font-size: clamp(40px, 4.8vw, 68px); line-height: .98 }
.audit-intro > p:last-child { max-width: 38ch; color: #4b463f; font-size: 17px; line-height: 1.65 }
.audit { padding: 10px 26px 22px; border: 0; border-radius: 20px; background: var(--card); box-shadow: 0 1px 0 #0000000a, 0 40px 70px -48px #6b4a0066 }
.audit-list li { border-color: #ece7de }
.audit-mark { border-color: #cfc9bf }
.audit-mark path { stroke: var(--ink); stroke-width: 2.4 }
.audit-item[aria-pressed="true"] { background: var(--sun-wash) }
.audit-item[aria-pressed="true"] .audit-mark { border-color: var(--sun); background: var(--sun) }
.audit-item[aria-pressed="true"] .audit-n { color: var(--sun-deep) }
.audit-tally strong { color: var(--ink); background: linear-gradient(var(--sun-soft), var(--sun-soft)) 0 88% / 100% .45em no-repeat }

/* How it works: three frames from one contact sheet. */
.process { padding: clamp(72px, 9vw, 120px) 0 0 }
.contact-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none }
.frame { display: flex; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s }
.frame:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -36px #0000004d }
.frame-art { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--paper) }
.frame-art svg { width: 82%; height: auto; overflow: visible }
.ill-page { fill: #fff; stroke: var(--ink); stroke-width: 1.5 }
.ill-stroke { fill: none; stroke: var(--ink); stroke-width: 1.5 }
.ill-ink { fill: var(--ink) }
.ill-tone { fill: #d6d0c6 }
.ill-tone2 { fill: #ece8e1 }
.ill-sun { fill: var(--sun) }
.ill-sun-stroke { fill: none; stroke: var(--sun); stroke-width: 3.5; stroke-linecap: round }
.ill-dash { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 3 }
.ill-check { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.frame-copy { display: grid; gap: 8px; padding: 20px 12px 14px }
.frame-n { color: var(--sun-deep); font-size: 11px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums }
.frame h3 { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.045em }
.frame p { max-width: 32ch; color: #4b463f; font-size: 15px; line-height: 1.6 }

/* About: a signed print. Photo on a white mat with crop marks, then a sign-off. */
.about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(40px, 7vw, 112px); padding: clamp(80px, 10vw, 136px) 0 clamp(72px, 9vw, 120px); border-top: 0 }
.about-print { position: relative; margin: 0; padding: 26px }
.print-mat { position: relative; padding: 16px 16px 52px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px #0000001a, 0 34px 60px -34px #00000059; transform: rotate(-2deg); transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.about-print:hover .print-mat { transform: rotate(0deg) }
.print-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; background: radial-gradient(90% 70% at 70% 15%, #fff2c9 0%, #eadfca 45%, #d8cfc0 100%); color: #8f877b; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-align: center; text-transform: uppercase }
.print-photo img { width: 100%; height: 100%; object-fit: cover }
.crop { position: absolute; width: 22px; height: 22px; border: 0 solid var(--muted); opacity: .7 }
.crop-tl { top: -14px; left: -14px; border-top-width: 1px; border-left-width: 1px }
.crop-tr { top: -14px; right: -14px; border-top-width: 1px; border-right-width: 1px }
.crop-bl { bottom: -14px; left: -14px; border-bottom-width: 1px; border-left-width: 1px }
.crop-br { bottom: -14px; right: -14px; border-bottom-width: 1px; border-right-width: 1px }
.about-print figcaption { display: flex; justify-content: space-between; margin-top: 26px; padding: 0 4px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase }
.about-text { min-width: 0 }
.about .eyebrow { margin-bottom: 20px; color: var(--muted) }
.about .about-statement { margin-bottom: 30px; font-size: clamp(40px, 5vw, 74px); line-height: .98; letter-spacing: -.055em }
.about-statement span { display: block; color: var(--muted) }
.about-text > p:not(.eyebrow) { max-width: 560px; margin-top: 14px; color: #3f3b36; font-size: 17px; line-height: 1.7 }
.signature { display: grid; justify-items: end; gap: 10px; max-width: 560px; margin-top: 30px; text-align: right }
.sig-mark { position: relative; font-family: var(--sig); font-size: clamp(56px, 5.4vw, 76px); line-height: 1; color: var(--ink); transform: rotate(-4deg); transform-origin: right center }
.sig-mark::after { content: ''; position: absolute; left: 4%; right: 8%; bottom: 14%; z-index: -1; height: .2em; border-radius: 99px; background: var(--sun-soft) }
.sig-name { color: var(--muted); font-size: 12px; letter-spacing: .04em }

/* Contact: a light-washed panel with a white form card. */
.contact { display: block; padding: 0 0 clamp(40px, 6vw, 72px); border-top: 0 }
.contact-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: radial-gradient(90% 120% at 100% 0%, var(--sun-soft) 0%, var(--sun-wash) 30%, var(--mat) 80%) }
.contact-copy { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0 }
.contact-copy .eyebrow { color: var(--sun-deep) }
.contact h2 { font-size: clamp(44px, 5.2vw, 78px); line-height: .96 }
.contact .contact-intro { max-width: 34ch; padding: 0; color: #4b463f; font-size: 17px; line-height: 1.6 }
.contact .starting-price { display: grid; justify-items: start; gap: 6px; margin-top: auto; padding-top: 30px; font-size: inherit }
.starting-price span { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase }
.starting-price strong { padding: 0 .06em; font-family: var(--display); font-size: clamp(40px, 4vw, 58px); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(var(--sun), var(--sun)) 0 88% / 100% .3em no-repeat }
.contact-form { max-width: none; margin-top: 0; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--card); box-shadow: 0 40px 70px -50px #6b4a0059 }
.contact .form-row { gap: 18px }
.contact .field { margin-bottom: 18px }
.contact .field label { color: var(--ink); font-size: 12px; font-weight: 600 }
.contact .field input, .contact .field textarea { padding: 13px 15px; border: 1px solid transparent; border-radius: 12px; background: #f3f0ea; color: var(--ink); font-size: 16px }
.contact .field input:hover, .contact .field textarea:hover { border-color: var(--line) }
.contact .field input:focus, .contact .field textarea:focus { outline: 0; border-color: var(--ink); background: #fff }
.contact .field textarea { min-height: 120px }
.contact .form-bottom p { color: var(--muted) }

/* Footer: paper, closing on an oversized wordmark. */
.site-footer { display: block; padding: 0 0 4px; border-top: 0; color: var(--muted); font-size: 12px }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line) }
.footer-row a { color: var(--ink) }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px }
@media (max-width: 600px) { .footer-row { flex-direction: column; align-items: flex-start; gap: 12px } }
.footer-mark { overflow: hidden; color: var(--ink); font-family: var(--display); font-size: clamp(34px, 10.7vw, 154px); font-weight: 800; line-height: .9; letter-spacing: -.065em; white-space: nowrap; padding-bottom: .12em }
.footer-mark span { color: var(--sun) }

@media (max-width: 900px) {
  .audit-panel, .contact-panel { grid-template-columns: 1fr }
  .about { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px }
  .contact .starting-price { margin-top: 8px; padding-top: 12px }
}
@media (max-width: 700px) {
  .about { grid-template-columns: 1fr }
}
@media (max-width: 800px) {
  .contact-sheet { grid-template-columns: 1fr; gap: 12px }
  .frame { display: grid; grid-template-columns: clamp(112px, 26vw, 200px) minmax(0, 1fr); align-items: center; gap: clamp(14px, 3vw, 28px) }
}
@media (max-width: 600px) {
  .frame-art { aspect-ratio: 1; border-radius: 10px }
  .frame-art svg { width: 92% }
  .frame-copy { gap: 4px; padding: 4px 4px 4px 0 }
  .frame h3 { font-size: 24px }
  .frame p { font-size: 14px }
  .about-print { width: min(300px, 100%); margin-inline: auto }
}
@media (max-width: 680px) {
  .audit-panel, .contact-panel { padding: 22px 16px; border-radius: 22px }
  .audit { padding: 6px 12px 16px }
  .contact .form-row { gap: 0 }
  .about-print { padding: 18px }
  .about-text > p:not(.eyebrow) { font-size: 16px }
}
@media (prefers-reduced-motion: reduce) { .job-word, .print-mat, .frame { transition: none !important } }

/* Images fade in once decoded instead of painting in chunks. */
img[data-fade] { opacity: 0; transition: opacity .5s ease }
img[data-fade].is-in { opacity: 1 }
@media (prefers-reduced-motion: reduce) { img[data-fade] { transition: none } }

/* ============ Planner: the legal pad ============
   A warm tabletop. On the left, the menu with prices. On the right, a yellow
   legal pad where your picks get jotted down by hand, and a pencil beside it. */
:root { --pad: #fffbe3; --rule: #cddbe8; --margin-line: #eba7a2; --graphite: #2d2c31; --graphite-2: #6f6b76; --redpen: #c2412c; --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive }
.planner { padding: clamp(40px, 6vw, 72px) 0 0 }
.planner-panel { padding: clamp(22px, 4vw, 52px); border-radius: 28px; background: radial-gradient(70% 80% at 100% 0%, #fff0c4 0%, #fff0c400 60%), var(--mat) }
.planner-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px 48px; margin-bottom: clamp(24px, 3vw, 36px) }
.planner-head .eyebrow { margin-bottom: 14px; color: var(--sun-deep) }
.planner-head h2 { max-width: 12ch; font-size: clamp(38px, 4.6vw, 66px); line-height: .98 }
.planner-lede { max-width: 42ch; justify-self: end; color: #4b463f; font-size: 17px; line-height: 1.6 }
.planner-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); align-items: start; gap: clamp(20px, 3vw, 40px) }

/* Menu */
.menu { min-width: 0; padding: 18px; border-radius: 22px; background: var(--card); box-shadow: 0 30px 50px -44px #4a35194d }
.quick { margin-bottom: 0 }
.quick-label { margin: 0 2px 12px; color: var(--ink); font-size: 14px; font-weight: 600 }
.quick-pills .quick-pill { background: #fffefc }
/* Divider between the two ways in: a bundle, or your own build. */
.or-build { display: flex; align-items: center; gap: 18px; margin: clamp(22px, 3vw, 34px) 0; color: var(--muted); font-family: var(--hand); font-size: 24px; white-space: nowrap }
.or-build::before, .or-build::after { content: ''; flex: 1; height: 1px; background: #d8d1c5 }
.quick-label span { color: var(--sun-deep); font-weight: 600 }
.quick-pills { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px) }
@media (max-width: 1000px) { .quick-pills { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.pk-stamp circle { fill: #e9cf9f; fill-opacity: .55; stroke: #6d4a20; stroke-opacity: .7; stroke-width: 1 }
.pk-stamp .pk-ring { fill: none; stroke-dasharray: 1.6 1.4; stroke-opacity: .55 }
.pk-stamp g { fill: none; stroke: #5a3c17; stroke-opacity: .85; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.quick-pill { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; padding: 0 10px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); text-align: center; cursor: pointer; transition: border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s }
.quick-pill:hover { border-color: #cfc8bc; transform: translateY(-3px); box-shadow: 0 22px 34px -26px #4a351973 }
.qc-art { display: grid; place-items: center; align-self: stretch; height: 88px; margin: 0 -10px; padding: 10px 0 4px; background: transparent; transition: background .3s }
.qc-art.qc-art-image { height: 88px; padding: 2px 0; }
.qc-art.qc-art-image img { width: 96px; max-width: 86%; height: 84px; object-position: center; }
.qc-art svg { width: 58px; height: 58px; overflow: visible; transition: transform .25s ease }
.ink-icon .ink-accent { fill: var(--sun, #ffc83d); opacity: .7 }
.ink-icon .ink-lines { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.qc-art img { display: block; width: 94%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .45s cubic-bezier(.3,1.6,.5,1) }
.quick-pill:hover .qc-art img { transform: translateY(-4px) scale(1.03) }
.quick-pill:hover .qc-art svg { transform: translateY(-4px) }
.pb-seam { fill: none; stroke: #b48a57; stroke-width: .9; opacity: .7 }
.pb-edge { fill: none; stroke: #f1dcb4; stroke-width: .7; opacity: .8 }
.pb-tape-end { fill: none; stroke: #e2a51c; stroke-width: .8 }
.pb-label { fill: #fbf6ec; stroke: #c9b190; stroke-width: .5 }
.pb-label-ink { fill: none; stroke: #9a8668; stroke-width: 1; stroke-linecap: round }
.qc-text { flex: 1; display: grid; grid-template-rows: auto auto; align-items: center; gap: 2px; width: 100%; margin-top: 0; min-width: 0 }
.qc-text .qc-name { align-self: center }
.qc-name { font-family: var(--display); font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance }
.qc-price { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums }
.qc-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--sun); font-size: 12px; font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1) }
.quick-pill[aria-pressed="true"] { border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun), 0 22px 34px -26px #6b4a0080 }
.quick-pill[aria-pressed="true"] .qc-art { background: linear-gradient(180deg, #fff6d8 0%, #ffe9a6 100%) }
.quick-pill[aria-pressed="true"] .qc-price { color: var(--ink) }
.quick-pill[aria-pressed="true"] .qc-check { opacity: 1; transform: none }
/* A bigger bundle already includes the smaller ones: those fade back. */
.quick-pill[data-included] { opacity: .45; filter: saturate(.4) }
.quick-pill[data-included]:hover { opacity: .8; filter: none }
.project-scope { margin: 20px 0; color: #4b463f; font-size: 14px; line-height: 1.6 }
.project-scope summary { cursor: pointer; font-weight: 600 }
.project-scope p { max-width: 85ch; margin-top: 12px }
.recommend-plan { display: inline; text-decoration: underline; text-underline-offset: 3px }
/* Categories: one row of seven icon tiles, never wrapping. */
.menu { container-type: inline-size }
.menu-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
/* Narrow: two full-width rows, four then three, edges aligned. */
@container (max-width: 600px) {
  .menu-tabs { grid-template-columns: repeat(12, minmax(0, 1fr)) }
  .menu-tab { grid-column: span 3 }
  .menu-tab:nth-child(n+5) { grid-column: span 4 }
}
.menu-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; padding: 12px 4px 10px; border: 1px solid transparent; border-radius: 14px; background: #f5f2ec; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s }
.menu-tab:hover { color: var(--ink); background: #efebe3; transform: translateY(-2px) }
.mt-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; transition: background .25s, transform .3s cubic-bezier(.3,1.6,.5,1) }
.mt-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.menu-tab:hover .mt-icon { transform: rotate(-6deg) }
.mt-label { white-space: nowrap }
.menu-tab[aria-selected="true"] { border-color: var(--ink); background: #fff; color: var(--ink) }
.menu-tab[aria-selected="true"] .mt-icon { background: var(--sun) }
.menu-tab-count { position: absolute; top: 6px; right: 6px; min-width: 18px; padding: 1px 5px; border-radius: 99px; background: var(--ink); color: var(--sun); font-size: 10px; font-weight: 700; text-align: center }
.menu-tab-count:empty { display: none }
.menu-panels { display: grid; margin-top: 14px }
.menu-panel { grid-area: 1 / 1; min-width: 0 }
.menu-panels .menu-panel[hidden] { display: block !important; visibility: hidden; pointer-events: none }
.included { margin: 0 4px 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55 }
.included em { display: block; margin-top: 4px; color: var(--ink); font-style: normal; font-weight: 500 }
.included span { margin-right: 8px; color: var(--sun-deep); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
/* An odd last tile spans the full row so the grid stays even. */
.tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1 }
.tile { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; min-height: 112px; padding: 14px 44px 13px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .2s }
.tile:hover { border-color: var(--ink); box-shadow: 0 16px 26px -22px #0000005c }
.tile:active { transform: scale(.985) }
.tile-name { font-size: 15px; font-weight: 600; line-height: 1.25 }
.tile-desc { color: var(--muted); font-size: 12.5px; line-height: 1.4 }
.tp-from { color: var(--muted); font-family: var(--body); font-size: .8em; font-weight: 500; letter-spacing: 0 }
.tile-price { margin-top: 6px; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.tile-check { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #cfc9bf; border-radius: 50%; transition: background .15s, border-color .15s }
.tile-check::after { content: '+'; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1 }
.tile[aria-pressed="true"] { border-color: var(--sun); background: var(--sun-wash) }
.tile[aria-pressed="true"] .tile-check { border-color: var(--ink); background: var(--ink) }
.tile[aria-pressed="true"] .tile-check::after { content: '✓'; color: var(--sun); font-size: 12px }

/* The legal pad */
.notes-col { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; max-height: calc(100vh - 32px) }
.pad { position: relative; display: flex; flex-direction: column; flex: none; height: clamp(500px, calc(100vh - 150px), 660px) }
.pad::before, .pad::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -4px; height: 40px; z-index: -1; border-radius: 0 0 6px 6px; background: #f6efcf; box-shadow: 0 1px 2px #4a351933 }
.pad::after { left: 12px; right: 12px; bottom: -8px; z-index: -2; background: #efe6c0; box-shadow: 0 24px 40px -22px #4a35198c }
.pad-binding { flex: none; height: 26px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #7a2f26, #5e231c); box-shadow: inset 0 -2px 0 #00000033 }
.pad-pages { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }
.pad-sheet, .pad-under { --lh: 32px; display: flex; flex-direction: column; min-height: 0; background-color: var(--pad); background-image: linear-gradient(90deg, transparent 46px, var(--margin-line) 46px, var(--margin-line) 47px, transparent 47px, transparent 50px, var(--margin-line) 50px, var(--margin-line) 51px, transparent 51px); color: var(--graphite); font-family: var(--hand) }
.pad-sheet { position: relative; z-index: 2; flex: 1 1 auto; border-radius: 0 0 6px 6px; box-shadow: 0 1px 2px #4a351926 }
.pad-under { position: absolute; inset: 0; z-index: 1; align-items: flex-start; justify-content: center; gap: 6px; padding: 24px 24px 24px 68px; border-radius: 0 0 6px 6px; background-image: linear-gradient(90deg, transparent 46px, var(--margin-line) 46px, var(--margin-line) 47px, transparent 47px, transparent 50px, var(--margin-line) 50px, var(--margin-line) 51px, transparent 51px), repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px) }
.pad-sent { font-size: 26px; line-height: 1.2 }
.pad-back { padding: 2px 0; border: 0; background: none; color: var(--redpen); font-family: var(--hand); font-size: 22px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px }
.pad-head { display: flex; align-items: baseline; gap: 8px; padding: 18px 20px 6px 64px; border-bottom: 1px solid var(--rule) }
.pad-head label { flex: none; font-size: 24px }
.pad-head input { min-width: 0; flex: 1; padding: 0 2px; border: 0; border-bottom: 1.5px dashed #b9b0a0; background: transparent; color: var(--graphite); font-family: var(--hand); font-size: 26px; font-weight: 700 }
.pad-head input::placeholder { color: #b6ad9c; font-weight: 400 }
.pad-head input:focus { outline: 0; border-bottom-style: solid; border-color: var(--graphite) }
.pad-date { flex: none; color: var(--graphite-2); font-size: 20px }
.pad-notes-wrap { position: relative; display: flex; flex: 1 1 auto; min-height: 128px }
.pad-notes { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: hidden; padding: 0 20px 0 64px; background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); background-attachment: local; scrollbar-width: none }
.pad-notes::-webkit-scrollbar { display: none }
/* Only becomes its own scroll area once the list is longer than the page. */
.pad-notes[data-scrollable] { overflow-y: auto }
.pad-list { margin: 0; padding: 0; list-style: none }
.pad-list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 8px; line-height: var(--lh); font-size: 23px }
.pad-list li { max-height: 400px }
.pad-list li.is-pending { clip-path: inset(-8px 100% -8px -70px) }
.pad-list li.is-new { animation: write .9s cubic-bezier(.45,.05,.4,1) backwards }
.pad-list li.is-writing { animation: write var(--write, .75s) linear backwards }
@keyframes write { from { clip-path: inset(-8px 100% -8px -70px); opacity: .4 } to { clip-path: inset(-8px -8px -8px -70px); opacity: 1 } }
.pad-list li.pad-next { display: flex; align-items: center; height: var(--lh); animation: next-in .45s ease backwards }
@keyframes next-in { from { opacity: 0 } }
.next-caret { width: 2px; height: 20px; border-radius: 2px; background: var(--graphite-2); opacity: .55; animation: caret 1.1s steps(1) infinite }
@keyframes caret { 50% { opacity: 0 } }
.pad-list li.is-leaving { overflow: hidden; animation: fold .35s ease .35s forwards }
@keyframes fold { to { max-height: 0; opacity: 0 } }
.pad-list li::after { content: ''; position: absolute; left: -4px; top: 50%; height: 2px; width: 0; border-radius: 2px; background: var(--graphite); transform: rotate(-1.5deg); transition: width .3s ease }
.pad-list li.is-leaving::after { width: calc(100% + 8px) }
.pn-check { position: absolute; left: -36px; top: 7px; width: 22px; height: 18px; overflow: visible }
.pn-check path { fill: none; stroke: var(--graphite); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0 }
.pad-list li.is-new .pn-check path { animation: tick .45s ease .55s backwards }
.pad-list li.is-writing .pn-check path { animation: tick .4s ease var(--write, .75s) backwards }
@keyframes tick { from { stroke-dashoffset: 1 } }
.pn-name { min-width: 0; overflow-wrap: anywhere }
.pn-price { color: var(--graphite-2); font-size: 20px; white-space: nowrap }
.pn-x { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--graphite-2); font-family: var(--body); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s }
.pad-list li:hover .pn-x, .pn-x:focus-visible { opacity: 1 }
.pn-x:hover { color: var(--redpen) }
@media (hover: none) { .pn-x { opacity: .6 } }
.pn-bundle .pn-name { font-weight: 700 }
.pn-sub { grid-column: 1 / -1; color: var(--graphite-2); font-size: 18px; line-height: var(--lh) }
.pn-margin { position: absolute; left: -60px; top: 1px; color: var(--redpen); font-size: 19px; font-weight: 700; transform: rotate(-8deg) }
.pad-empty { position: relative; padding-top: 4px; color: var(--graphite-2); font-size: 23px; line-height: var(--lh) }
.pad-arrow { display: block; width: 92px; height: 46px; margin: 6px 0 0 -4px; overflow: visible }
.pad-arrow path { fill: none; stroke: var(--graphite-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.pad-more { position: absolute; left: 50%; z-index: 3; padding: 2px 12px; border: 0; border-radius: 99px; background: var(--graphite); color: var(--pad); font-family: var(--hand); font-size: 19px; transform: translateX(-50%) rotate(-2deg); cursor: pointer; box-shadow: 0 6px 12px -6px #0006 }
.pad-notes[data-fade-top] { -webkit-mask-image: linear-gradient(transparent 0, #000 44px); mask-image: linear-gradient(transparent 0, #000 44px) }
.pad-notes[data-fade-bottom] { -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent) }
.pad-notes[data-fade-top][data-fade-bottom] { -webkit-mask-image: linear-gradient(transparent 0, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(transparent 0, #000 44px, #000 calc(100% - 44px), transparent) }
.pad-more-down { bottom: 8px }
.pad-more-up { top: 8px }
.pad-total { flex: none; display: grid; gap: 0; padding: 10px 20px 18px 64px; border-top: 2px solid var(--graphite); border-image: none }
.pt-label { color: var(--graphite-2); font-size: 20px; line-height: 1.2 }
.pt-value { font-size: clamp(36px, 3.2vw, 44px); font-weight: 700; line-height: 1.05 }
.pt-hl { padding: 0 .12em; background: linear-gradient(transparent 52%, #ffd54acc 52%, #ffd54acc 88%, transparent 88%) }
.pt-monthly { font-size: 21px; line-height: 1.3 }
.pt-save { color: var(--redpen); font-size: 21px; line-height: 1.3; transform: rotate(-1.5deg); transform-origin: left }
.pencil-rig { position: absolute; left: calc(100% - 66px); top: calc(100% - 196px); z-index: 4; width: 0; height: 0; pointer-events: none; transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1) }
.pencil { position: absolute; left: 0; top: -9.5px; width: 190px; height: 19px; transform-origin: 0 50%; transform: rotate(-62deg); filter: drop-shadow(0 6px 5px #4a351940); transition: transform .45s ease }
.pad[data-writing] .pencil { transform: rotate(-38deg) }
.pc-body { fill: var(--sun) }
.pc-facet { fill: none; stroke: #e0aa1e; stroke-width: 1 }
.pc-tip { fill: #ecd1a8 }
.pc-lead { fill: #3b3a3f }
.pc-ferrule { fill: #c9c6be }
.pc-band { fill: none; stroke: #a8a49b; stroke-width: 1.2 }
.pc-eraser { fill: #f0a9a0 }
.pad-send { width: 100%; justify-content: space-between; min-height: 56px; flex: none }
.pad-send .pad-send-label { font-size: 16px; line-height: 1.4 }
.pad-note { flex: none; color: var(--muted); font-size: 12px; text-align: center }
.plan-note { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--sun-wash); font-size: 13px; line-height: 1.5 }

/* Tear off: the sheet rips away and flies off, leaving the next page. */
.pad[data-state="torn"] .pad-sheet { animation: tear-off 1s cubic-bezier(.5,0,.75,0) forwards; transform-origin: 8% 0 }
@keyframes tear-off { 0% { transform: none } 18% { transform: rotate(-3deg) translateY(4px) } 100% { transform: rotate(-14deg) translate(-30px, -120%); opacity: 0 } }
.pad[data-state="returning"] .pad-sheet { animation: put-back .5s cubic-bezier(.2,.8,.2,1) }
@keyframes put-back { from { transform: rotate(-6deg) translateY(-30%); opacity: 0 } }

.pkg-bar { display: none }
.where-narrow { display: none }
@media (max-width: 900px) { .where-wide, .pad-arrow { display: none } .where-narrow { display: inline } }
@media (max-width: 1000px) {
  .planner-head { grid-template-columns: 1fr }
  .planner-lede { justify-self: start }
}
@media (max-width: 900px) {
  .planner-work { grid-template-columns: minmax(0, 1fr) }
  .planner-work > * { min-width: 0 }
  .pad { height: auto }
  .notes-col { position: static; max-height: none; width: min(440px, 100%); justify-self: center }
  .pad-notes { max-height: none; overflow: visible }
  .pad-more { display: none !important }
  .pencil-rig { left: auto; right: 160px; top: -2px }
  .pencil { width: 150px; transform: rotate(3deg) }
  .pkg-bar { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px #0000000f, 0 20px 40px -18px #0000005e }
  .pkg-bar[data-empty] { display: none }
  .pkg-bar-count { font-size: 13px; font-weight: 700; white-space: nowrap }
  .pkg-bar-total { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums }
  .pkg-bar .button { min-height: 42px; padding-inline: 16px; font-size: 14px; white-space: nowrap }
}
@media (max-width: 680px) {
  .planner-panel { padding: 20px 12px; border-radius: 22px }
  .planner-head { padding: 0 6px }
  .menu { padding: 12px }
  .quick-pills { gap: 8px }
  .quick-pill { padding: 0 6px 12px; border-radius: 16px }
  .qc-art { height: 70px; margin: 0 -6px }
  .qc-art svg { width: 48px; height: 48px }
  .qc-name { font-size: 13.5px }
  .qc-price { font-size: 11px }
  .qc-check { top: 6px; right: 6px; width: 20px; height: 20px; font-size: 10px }
  .menu-tab { padding: 10px 4px 9px; font-size: 11px }
  .mt-icon { width: 34px; height: 34px }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .tile { min-height: 0; padding: 12px 34px 12px 12px; border-radius: 14px }
  .tile-name { font-size: 13.5px }
  .tile-desc { display: block; font-size: 11.5px; line-height: 1.35 }
  .tile-name { overflow-wrap: anywhere }
  .tile-price { margin-top: 4px; font-size: 13px }
  .tile-check { top: 10px; right: 10px; width: 20px; height: 20px }
  .pad { transform: none }
  .pad-head, .pad-notes, .pad-total { padding-right: 14px }
  .pad-list li { font-size: 21px }
  .pn-price { font-size: 18px }
}
@media (prefers-reduced-motion: reduce) {
  .pad, .pad-list li, .pad-list li::after { transition: none !important }
  .pad-list li.is-new, .pad-list li.is-writing, .pad-list li.is-new .pn-check path, .pad-list li.is-writing .pn-check path, .pad-list li.is-leaving, .next-caret, .pad[data-state="returning"] .pad-sheet { animation: none !important }
  .pad-list li.is-pending { clip-path: none }
  .pencil-rig { transition: none }
  .pad[data-state="torn"] .pad-sheet { animation: none; visibility: hidden }
}

/* Mobile header: centered branding above a full-width navigation row. */
@media (max-width: 680px) {
  .site-header { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 22px 0 10px; border-bottom: 1px solid var(--line) }
  .site-header .wordmark { font-size: clamp(22px, 6.6vw, 29px); max-width: 100%; text-align: center }
  .site-header nav { width: 100%; justify-content: space-between; gap: 6px }
  .site-header nav > a:not(.button) { display: flex; flex: 1; justify-content: center; align-items: center; min-height: 44px; font-size: 13px }
}
/* ---------- Desktop hero: more air above and below ---------- */
@media (min-width: 901px) {
  .hero { padding-top: clamp(28px, 3.6vw, 60px) }
  .hero-heading-row { margin-bottom: clamp(10px, 1.6vw, 22px) }
  .hero-grid { padding-bottom: clamp(44px, 5vw, 80px) }
}

/* ---------- How it works: what you get, and how payment works ---------- */
.frame-list { display: grid; gap: 7px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line, #dcd7ce); list-style: none }
.frame-list li { position: relative; padding-left: 20px; color: #3f3b36; font-size: 14px; line-height: 1.45 }
.frame-list li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--sun, #ffc83d); box-shadow: 0 0 0 2px #ffc83d40 }
.pay-strip { margin-top: clamp(18px, 2.4vw, 28px); padding: clamp(20px, 2.6vw, 30px); border: 1px dashed #cfc6b6; border-radius: 22px; background: #fffefc }
.pay-kicker { margin: 0 0 16px; color: var(--sun-deep, #7a5600); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase }
.pay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none }
.pay-steps li { display: grid; align-content: start; gap: 4px; padding: 0 clamp(16px, 2.4vw, 32px) }
.pay-steps li:first-child { padding-left: 0 }
.pay-steps li + li { border-left: 1px dashed #d8d0c2 }
.pay-n { font-family: var(--display, 'Inter Tight'), sans-serif; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.05em; line-height: 1 }
.pay-steps li:first-child .pay-n { background: linear-gradient(transparent 62%, #ffc83d 62%, #ffc83d 92%, transparent 92%); justify-self: start }
.pay-t { margin-top: 6px; font-size: 15px; font-weight: 700 }
.pay-d { color: var(--muted, #6b675f); font-size: 13.5px; line-height: 1.5 }
@media (max-width: 700px) {
  .pay-steps { grid-template-columns: 1fr; gap: 16px }
  .pay-steps li, .pay-steps li:first-child { grid-template-columns: 74px minmax(0, 1fr); column-gap: 14px; padding: 0 }
  .pay-steps li + li { padding-top: 16px; border-left: 0; border-top: 1px dashed #d8d0c2 }
  .pay-n { grid-row: span 2; align-self: start; justify-self: start; font-size: 30px }
  .pay-t { margin-top: 0 }
  .frame-list li { font-size: 13px }
}

/* ---------- Mobile pass ---------- */
@media (max-width: 680px) {
  .hero { padding-top: 6px }
  .hero-grid { gap: 30px; padding-bottom: 28px }
  .hero-title { font-size: clamp(40px, 11.6vw, 54px); line-height: 1.02; letter-spacing: -.02em }
  .hero-copy { gap: 26px }
  .hero-actions { flex-wrap: nowrap; gap: 20px }
  .hero-actions .button { width: auto; min-width: 0; min-height: 52px; padding-inline: 22px 18px; gap: 14px; font-size: 15px }
  .hero-actions .hero-work-link { white-space: nowrap }
}
@media (max-width: 900px) {
  /* Centered hero whenever it stacks above the showcase (phones and iPad) */
  .hero-heading-row { justify-content: center; text-align: center }
  .hero-heading-row .hero-edition { display: none }
  .hero-copy { align-items: center; text-align: center; justify-self: center; margin-inline: auto }
  .hero-title, .hero-lead { text-align: center }
  .hero-actions { justify-content: center }
  .job-word { left: 0; right: 0; width: max-content; margin-inline: auto }
}
@media (max-width: 360px) {
  .hero-actions { flex-wrap: wrap }
}

/* Before & after on phones: each pair stacks, full width, so the screenshots are readable. */
@media (max-width: 600px) {
  .compare-pair { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; padding: 4px 2px 6px }
  .compare-pair > .ba-col, .compare-pair > span:empty { display: none }
  .compare-pair .chapter { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 14px 0 }
  .compare-pair .chapter + .chapter { border-top: 1px dashed color-mix(in srgb, var(--folder-ink, #222) 28%, transparent) }
  .compare-pair .compare-frame { position: relative; width: 100%; height: auto; aspect-ratio: auto }
  .compare-pair .compare-frame img { position: static; display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px #0000001f, 0 14px 26px -18px #000a }
  .compare-pair .compare-frame::before { content: attr(data-tag); position: absolute; z-index: 1; top: 8px; left: 8px; padding: 3px 10px; border-radius: 99px; background: var(--folder-ink); color: var(--folder-bg); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
  .compare-pair .ba-arrow { width: 30px; height: 30px; transform: rotate(90deg) }
  .compare-pair--single .compare-frame { aspect-ratio: auto }
}

@media (max-width: 800px) { .frame { align-items: start } }
@media (max-width: 680px) {
  .pad-head label { font-size: 21px }
  .pad-head input { font-size: 21px }
  .pad-head input::placeholder { font-size: 19px }
}

/* Shared mobile case rows keep previews, story sections and Next in place. */
@media (max-width: 900px) {
  .work[data-ready] .project-panels { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto) }
  .work[data-ready] .project { grid-row: 1 / span 4; grid-template-rows: subgrid; row-gap: 0 }
  .work[data-ready] .project-visual { margin-bottom: 18px; align-self: stretch }
  .work[data-ready] .project-side { display: grid; grid-row: 2 / span 3; grid-template-rows: subgrid; row-gap: 0 }
  .work[data-ready] .site-stage { min-height: clamp(360px, 65svh, 680px) }
  .work[data-ready] .project-foot { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; margin-top: 0 }
  .work[data-ready] .next-project { width: min(100%, 220px); justify-self: end; justify-content: space-between; align-self: end }
}

/* About on phones: headline, then the portrait, then the story. */
@media (max-width: 700px) {
  .about { display: flex; flex-direction: column; align-items: stretch; gap: 0 }
  .about-text { display: contents }
  .about-text > .eyebrow { order: 1 }
  .about .about-statement { order: 2; margin-bottom: 12px }
  .about .about-print { order: 3; width: min(320px, 92%); margin: 6px auto 30px }
  .about-text > p:not(.eyebrow) { order: 4 }
  .about .sign-row { order: 5 }
  .about .signature { max-width: 100% }
  .sig-mark { max-width: 100%; margin-right: 22px; font-size: clamp(54px, 17vw, 72px) }
}

/* Back to top: a floating button whose ring fills as you scroll. */
.to-top { display: grid; place-items: center; border-radius: 50%; background: var(--ink, #161514); color: #fff; text-decoration: none }
.to-top > svg { grid-area: 1 / 1 }
.tt-ring { width: 100%; height: 100%; transform: rotate(-90deg) }
.tt-ring circle { fill: none; stroke-width: 3 }
.tt-track { stroke: #ffffff26 }
.tt-bar { stroke: var(--sun, #ffc83d); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)) }
.tt-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2,.7,.2,1) }
.to-top:hover .tt-arrow { transform: translateY(-2px) }
.to-top:focus-visible, .m-bar a:focus-visible { outline: 3px solid var(--sun, #ffc83d); outline-offset: 3px }
.tt-float { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 52px; height: 52px; box-shadow: 0 14px 30px -14px #000a; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1) }
.tt-float[data-hidden] { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none }
.tt-float:hover { transform: translateY(-3px) }
.m-bar { display: none }
@media (max-width: 900px) {
  .tt-float { width: 46px; height: 46px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)) }
  .tt-float[data-lift] { transform: translateY(-66px) }
  .tt-float[data-lift][data-hidden] { transform: translateY(-52px) scale(.9) }
}
/* Phones: one bar across the bottom with the two next steps and the progress ring. */
@media (max-width: 680px) {
  .tt-float { display: none }
  .m-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 44px; align-items: center; gap: 0; padding: 6px 6px 6px 8px; border-radius: 999px; background: #fffefcf2; box-shadow: 0 0 0 1px #0000000f, 0 18px 40px -16px #0000006b; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1) }
  .m-bar[data-hidden] { opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none }
  .tt-bar-btn { width: 44px; height: 44px }
  .tt-bar-btn .tt-arrow { width: 16px; height: 16px }
  .m-plan, .m-contact { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--ink, #161514); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap }
  .m-contact { position: relative; margin-right: 6px }
  .m-contact::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: #0000001f }
  .m-plan:active, .m-contact:active { background: #0000000a }
  .pkg-bar { bottom: calc(76px + env(safe-area-inset-bottom)) }
  .site-footer, footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)) }
}
@media (prefers-reduced-motion: reduce) { .tt-float, .m-bar, .tt-arrow { transition: none } }

/* Signature row: social icons on the left, the signed name on the right. */
.sign-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 560px; margin-top: 30px }
.sign-row .signature { margin-top: 0 }
.socials { display: flex; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink, #161514); box-shadow: inset 0 0 0 1px #d6cfc3; transition: background .2s, box-shadow .2s, transform .25s cubic-bezier(.2,.7,.2,1) }
.socials a:hover { background: var(--sun, #ffc83d); box-shadow: inset 0 0 0 1px var(--sun, #ffc83d); transform: translateY(-2px) }
.socials a:focus-visible { outline: 3px solid var(--ink, #161514); outline-offset: 3px }
.socials svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.socials svg .dot { fill: currentColor; stroke: none }
@media (max-width: 700px) { .sign-row { max-width: 100%; gap: 12px } .socials { gap: 8px } .socials a { width: 38px; height: 38px } .sign-row .sig-mark { white-space: nowrap; margin-right: 16px; font-size: clamp(42px, 12.8vw, 56px) } }

/* Phones: each category is only as tall as its own items (no empty space under short lists). */
@media (max-width: 680px) { .menu-panels .menu-panel[hidden] { display: none !important } }

/* Planner heading centered when it stacks (iPad and phones). */
@media (max-width: 1000px) {
  .planner-head { justify-items: center; text-align: center }
  .planner-head .planner-lede { justify-self: center; margin-inline: auto; max-width: 46ch }
  .quick-label { text-align: center }
}

/* Business name on the notepad: centered on its line. */
.pad-head input { text-align: center }

/* The waiting line on the notepad stays as a plain empty ruled line: no blinking caret. */
.pad-next .next-caret { display: none !important }

/* Switching Concept / Before & after changes the case's height a lot on phones.
   Don't let the browser's scroll anchoring yank the page to compensate. */
html, body { overflow-anchor: none }
/* Keep the typing code layer cheap to repaint while scrolling. */
.cv-code { contain: strict }

/* ---------- Designer's canvas ---------- */
.cv-host { position: relative; isolation: isolate }
.cv-code { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 92%, transparent 100%) }
.cv-code pre { margin: 0; padding: 0 0 26px; color: var(--ink, #161514); font: 500 11.5px/1.8 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; opacity: .1 }
.cv-code .cv-live { opacity: 1; color: #6b4c00 }
.cv-code .cv-live::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -.18em; background: #b07a00; opacity: .9 }
.cv-code pre.cv-dim { opacity: .065 }
@media (max-width: 700px) { .cv-code pre { font-size: 9.5px; opacity: .085 } }

/* Selection box: drawn once around a section's content when it first scrolls in */
.cv-sel { position: absolute; z-index: 30; pointer-events: none; border: 1.5px solid #0d99ff; border-radius: 3px; opacity: 0 }
.cv-sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid #0d99ff; border-radius: 1px }
.cv-sel i:nth-child(1) { left: -5px; top: -5px } .cv-sel i:nth-child(2) { right: -5px; top: -5px }
.cv-sel i:nth-child(3) { left: -5px; bottom: -5px } .cv-sel i:nth-child(4) { right: -5px; bottom: -5px }
.cv-sel b { position: absolute; left: -1.5px; top: -23px; padding: 3px 7px; border-radius: 4px 4px 4px 0; background: #0a6cc9; color: #fff;
  font: 600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap }
.cv-sel b span { opacity: .8; font-weight: 500 }
.cv-sel.is-on { animation: cv-draw 2.6s cubic-bezier(.4,0,.2,1) forwards }
@keyframes cv-draw {
  0% { opacity: 1; clip-path: inset(-30px 100% 100% -12px) }
  22% { opacity: 1; clip-path: inset(-30px -12px -12px -12px) }
  72% { opacity: 1; clip-path: inset(-30px -12px -12px -12px) }
  100% { opacity: 0; clip-path: inset(-30px -12px -12px -12px) }
}
@media (prefers-reduced-motion: reduce) { .cv-sel { display: none } }

/* ---------- X-ray mode: see how the site is built ---------- */
.xr-toggle { position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 41; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #fffefc66, #fffefc33); color: #16151466; box-shadow: inset 0 1px 0 #ffffff66, inset 0 -1px 0 #ffffff26, 0 0 0 1px #16151414, 0 10px 24px -18px #16151433; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: transform .3s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, opacity .3s }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .xr-toggle { background: linear-gradient(135deg, #fffefc33, #fffefc14); -webkit-backdrop-filter: blur(5px) saturate(120%); backdrop-filter: blur(5px) saturate(120%) }
}
.xr-toggle:hover, .xr-toggle:focus-visible { transform: translateY(-2px); background: linear-gradient(135deg, #fffefcdb, #fffefcb8); color: var(--ink, #161514); box-shadow: inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #ffffff66, 0 0 0 1px #16151424, 0 12px 28px -16px #16151466 }
.xr-toggle:focus-visible { outline: 3px solid #0d99ff; outline-offset: 3px }
.xr-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.xr-toggle[aria-pressed="true"] { background: linear-gradient(135deg, #0a5aa4eb, #074888db); color: #fff; box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #ffffff26, 0 0 0 1px #07488866, 0 12px 28px -16px #07488880 }
.xr-toggle[data-hidden] { opacity: 0; transform: translateY(14px); pointer-events: none }
@media (max-width: 680px) { .xr-toggle { display: none } .footer-links a[href="#top"] { display: none } }
.footer-links .xr-link { padding: 0; border: 0; background: none; color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: inherit; cursor: pointer }
.footer-links .xr-link:hover { text-decoration: underline; text-underline-offset: 4px }

/* Layout grid over everything */
.xr-grid { position: fixed; top: 0; bottom: 0; z-index: 35; display: none; pointer-events: none }
.xr-grid div { height: 100%; background: rgba(255, 64, 129, .05); box-shadow: inset 1px 0 rgba(255, 64, 129, .25), inset -1px 0 rgba(255, 64, 129, .25) }
.xray .xr-grid { display: grid }

/* Breakpoint outlines behind the hero */
.xr-bp { position: absolute; top: -6px; bottom: -6px; left: 50%; z-index: 0; display: none; pointer-events: none; transform: translateX(-50%); border: 1.5px dashed rgba(124, 58, 237, .55); border-radius: 6px }
.xr-bp b { position: absolute; top: 6px; right: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(124, 58, 237, .9); color: #fff; font: 600 10px/1.2 ui-monospace, Menlo, monospace; white-space: nowrap }
.xray .xr-bp { display: block }

/* Selection boxes stay on, code becomes readable */
.xray .cv-sel { opacity: 1 !important; animation: none !important; clip-path: none !important }
.xray .cv-code pre { opacity: .3 }
.xray .cv-code .cv-live { color: #0a6cc9 }
.xray .cv-code .cv-live::after { background: #0a6cc9 }

/* Spec card */
.xr-hud { position: fixed; top: 16px; right: 16px; z-index: 42; display: none; width: 268px; padding: 14px 16px 12px; border-radius: 14px; background: #161514f2; color: #f5f3ef; box-shadow: 0 20px 40px -18px #000c; font: 500 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace }
.xray .xr-hud { display: block }
.xr-hud h2 { margin: 0 0 8px; color: #fff; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0 }
.xr-hud dl { display: grid; grid-template-columns: 62px 1fr; gap: 4px 10px; margin: 0 }
.xr-hud dt { color: #a8a39a } .xr-hud dd { margin: 0 }
.xr-sw { display: flex; gap: 6px; margin-top: 2px }
.xr-sw i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px #ffffff33 }
.xr-hud p { margin: 10px 0 0; color: #a8a39a; font-size: 10.5px }
.xr-hud button { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: #ffffff14; color: #fff; font-size: 15px; cursor: pointer }
.xr-hud button:focus-visible { outline: 2px solid #0d99ff }
@media (max-width: 680px) {
  .xr-hud { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; padding: 12px 14px 10px }
  .xr-hud dl > :nth-child(n+5) { display: none }
  .xr-hud p { display: none }
}
@media (prefers-reduced-motion: reduce) { .xr-toggle { transition: none } }

.i-arrow { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }