/* Punchlist Studio — shared styles.
   Layout per page lives in css/<page>.css (the grid copied from the Squarespace build).
   Sizes follow Squarespace's own formulas so the pages match at every window width. */
/* Fonts are served from the site itself (assets/fonts/, open-license Google Fonts: Epilogue, Space Grotesk, Raleway).
   Latin and Latin Extended only; each family is one variable file per style. */
@font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/epilogue-italic-latin-ext.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; }
@font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/epilogue-italic-latin.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; }
@font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/epilogue-italic-latin-ext.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; }
@font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/epilogue-italic-latin.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin-ext.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin-ext.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin-ext.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin-ext.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; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/epilogue-normal-latin.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; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/raleway-normal-latin-ext.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; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/raleway-normal-latin.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; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/space-grotesk-normal-latin-ext.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; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/space-grotesk-normal-latin.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; }

:root {
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: 2000px;
  /* Text stops growing at a 2000px window, as on Squarespace (--u is a capped 1vw).
     Scaled headings follow the content width, which caps at 2000px (92vw), so --su caps later. */
  --u: min(1vw, 20px);
  --su: min(1vw, 21.9px);
  --accent: #ff5e1a;
  --grey: #dad9d9;
}

* { box-sizing: border-box; }
/* Pin the base size like Squarespace does, so a browser's "font size" setting doesn't enlarge the text */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 400 16px/1.5 'Epilogue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }

/* Text size scale: --v is the Squarespace size value (h1 3.5, h2 2.5, h3 2, h4 1.5, body 1.3, small 1).
   Desktop scales with window width; phones scale with window height, as Squarespace does. */
/* Above 2000px wide Squarespace stops growing text (capped vw), but text smaller than 1rem keeps shrinking
   (uncapped vw); the smaller of the two formulas gives both behaviours. */
[style*="--v"] { font-size: var(--fs, min(calc((var(--v) - 1) * 1.2 * var(--u) + 1rem), calc((var(--v) - 1) * 1.2vw + 1rem))); }
/* --fs, when present, is a size measured from the original at two window widths (custom text sizes) */
@media (max-width: 767px) {
  [style*="--v"] { font-size: var(--fs, calc((var(--v) - 1) * 1.2 * min(1vh, 9px) + 1rem)); }
}
/* Paragraph letter-spacing is 2% of the standard body text size (not of the paragraph's own size) */
:root { --ls-p: calc(-0.02 * (.36 * var(--u) + 1rem)); }
@media (max-width: 767px) { :root { --ls-p: calc(-0.02 * (.36 * min(1vh, 9px) + 1rem)); } }

/* Text blocks */
/* Squarespace text spacing: paragraphs 1rem apart, headings 2rem; list items 8px; lists indent 40px */
.sqs-html-content > * { margin: 1rem 0; }
.sqs-html-content > :is(h1, h2, h3, h4) { margin: 2rem 0; }
.sqs-html-content > :first-child { margin-top: 0; }
.sqs-html-content > :last-child { margin-bottom: 0; }
.sqs-html-content :is(h1, h2, h3, h4, p) { white-space: pre-wrap; }
.sqs-html-content ul, .sqs-html-content ol { padding-left: 40px; }
.sqs-html-content li > p { margin: 8px 0; }
/* Bullets drawn separately (like Squarespace) so they don't add height to each item */
.sqs-html-content ul > li { list-style: none; position: relative; }
.sqs-html-content ul > li::before { content: "•"; position: absolute; left: -1em; top: 0; line-height: 24px; }
.sqs-html-content a { text-decoration: underline; text-underline-offset: .15em; }
/* "Code" formatted text (the small role labels on the home page) */
.sqs-html-content pre { margin: 0; font-size: calc(.36 * var(--u) + 16px); line-height: 1.5; letter-spacing: -.02em; white-space: pre-wrap; }
.sqs-html-content code { font: 500 .8rem/1 'Raleway', sans-serif; letter-spacing: normal; }

/* Hand-drawn underline: one pen stroke with a slight wobble and a second pass, same orange and weight as the circle */
.ul {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 30 11, 62 9, 98 10 C 134 11, 168 9, 197 6' fill='none' stroke='%23ff5e1a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22 19 C 70 15, 128 14, 186 13' fill='none' stroke='%23ff5e1a' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% .32em no-repeat;
  padding-bottom: .14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Hand-drawn circle highlight */
.hl {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M28 12 C 80 2, 180 4, 194 26 C 204 46, 120 58, 60 55 C 10 52, 2 34, 12 22 C 22 12, 60 6, 96 7' fill='none' stroke='%23ff5e1a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  padding: .02em .12em .06em;
  margin: 0 -.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Header ----------
   Stays at the top of every page so the logo (home) and Book now are always one tap away. It starts full size over
   the first section, like Squarespace, and slims down once the page scrolls (main.js adds .is-scrolled).
   main.js keeps --hdr-now at the header's current height, for the jump bar, phone menu and anchor offsets. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: #fff; transition: box-shadow .25s ease; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; padding: 1.6vw var(--sqs-site-gutter); transition: padding .25s ease; }
.logo img { height: 57px; width: auto; transition: height .25s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
.site-header.is-scrolled .bar { padding-top: 12px; padding-bottom: 12px; }
.site-header.is-scrolled .logo img { height: 40px; }
.site-header.is-scrolled .nav > a.book { padding-top: 15px; padding-bottom: 15px; }
html { scroll-padding-top: calc(var(--hdr-now, 0px) + 56px); }
.nav { display: flex; align-items: center; gap: 1.2vw; }
.nav > a, .nav .dd > button {
  font: 400 calc(.24 * var(--u) + 1rem) 'Epilogue', sans-serif; /* Squarespace's header-link size */
  letter-spacing: -.01em;
  line-height: 1.2; text-decoration: none; background: none; border: 0; padding: .1em 0; margin: 0 .25vw; color: inherit; cursor: pointer;
}
.nav > a[aria-current="page"], .nav .dd > button.current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav > a:hover, .nav .dd > button:hover { opacity: .6; }
.nav > a.book {
  margin: 0 0 0 .95vw; background: var(--accent); color: #fff; /* 2.4vw from Contact, flush with the gutter */
  font: 400 16px/1 'Raleway', sans-serif; letter-spacing: 0;
  padding: 20.4px 32px; border-radius: 300px;
}
.nav > a.book:hover { opacity: .85; }
.dd { position: relative; }
/* Squarespace folder menu: hangs from the bottom of "Services", right-aligned, links at header-link size */
.dd-menu {
  position: absolute; top: 100%; right: calc(-1em + .25vw); z-index: 10;
  font: 400 calc(.24 * var(--u) + 1rem) 'Epilogue', sans-serif; letter-spacing: -.01em;
  box-sizing: content-box; background: #fff; padding: .5em 1em; min-width: 200px; display: none;
  flex-direction: column; align-items: flex-end; text-align: right;
}
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: flex; }
.dd-menu a { text-decoration: none; line-height: 1.3; padding: .1em 0; white-space: nowrap; }
.dd-menu a:hover { opacity: .6; }
.menu-toggle { display: none; background: none; border: 0; font: 400 18px 'Epilogue', sans-serif; cursor: pointer; }

/* ---------- Sections ---------- */
.page-section { position: relative; display: flex; flex-direction: column; justify-content: center; }
/* Inset sections keep a site-gutter border around their content */
.page-section.background-width--inset { padding: var(--sqs-site-gutter); }
/* The header overlays the page, so the first section starts below it */
main > .page-section:first-child { padding-top: var(--header-h); }
:root { --header-h: calc(3.2vw + 57px); }
.page-section.vertical-alignment--top { justify-content: flex-start; }
.page-section.vertical-alignment--bottom { justify-content: flex-end; }
.section-background { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.section-background > img { width: 100%; height: 100%; object-fit: cover; }
.section-background-overlay { position: absolute; inset: 0; }
.content-wrapper { position: relative; z-index: 1; width: 100%; padding-top: var(--pt, 0); padding-bottom: var(--pb, 0); }
@media (max-width: 767px) {
  .content-wrapper { padding-top: var(--ptm, var(--pt, 0)); padding-bottom: var(--pbm, var(--pb, 0)); }
}
.content { width: 100%; }

/* Grid blocks */
.fe-block { position: relative; min-width: 0; }
.fe-block > .sqs-block { height: 100%; width: 100%; display: flex; flex-direction: column; }
.sqs-block-content { width: 100%; }
.image-block .sqs-block-content, .image-block .sqs-block-content > a,
.shape-block .sqs-block-content, .map-block .sqs-block-content { height: 100%; display: block; }
/* Images are pinned inside their cell so they never stretch the grid rows (as on Squarespace) */
.image-block .sqs-block-content { position: relative; }
.image-block img, .image-block video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Circle-masked images: a square as tall as the block, centered, like Squarespace's circle shape */
.image-block.shape-circle img { inset: 0 auto; left: 50%; width: auto; max-width: none; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; object-fit: cover; }
.shape-block .sqs-block-content { position: relative; }
.shape-block svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-block iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.hr-block hr { border: 0; margin: 0; width: 100%; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; transition: opacity .15s ease;
}
.btn:hover { opacity: .85; }
.btn-wrap.stretched, .button-block .sqs-block-content:has(.stretched) { height: 100%; }
.btn-wrap.stretched .btn { width: 100%; height: 100%; }

/* Accordion */
.acc details { border-bottom: var(--divider-h, 1px) solid var(--divider, currentColor); }
.acc details:first-child { border-top: var(--divider-h, 1px) solid var(--divider, currentColor); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--title-pt, 10px) 0 var(--title-pb, 10px); line-height: normal; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: 0 0 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center/14px 1px no-repeat, linear-gradient(currentColor, currentColor) center/1px 14px no-repeat;
}
.acc details[open] summary::after { background: linear-gradient(currentColor, currentColor) center/14px 1px no-repeat; }
.acc-desc { max-width: 70%; padding: 0 0 var(--title-pb, 16px); }
@media (max-width: 767px) { .acc-desc { max-width: calc(100% - 29px); } }
.acc-desc[style*="--v"] p { font-size: inherit; }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; padding: .44vw 0; }
.marquee-track { display: inline-flex; animation: marquee var(--dur, 30s) linear infinite; }
.marquee-track span { padding-right: .35em; }
.marquee[data-dir="right"] .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Forms */
.form { color: var(--label-color, inherit); letter-spacing: -.02em; }
/* Each field: label at the font's natural line height, control right below, 20px after (as on Squarespace) */
.form .field { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.form .label { display: block; padding: 0 0 4px; margin: 0; font-size: calc(.36 * var(--u) + 16px); line-height: 1.5; }
/* Label text and "(required)" are separate pieces; "(required)" drops to its own line when it doesn't fit */
/* Squarespace: ~11px before "(required)", whose box is 76px wide at 16px */
.form .lab-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 11px; }
.form .lab-row .req, .form .sub .req { min-width: 76px; }
/* letter-spacing has to be set where the size is set, so it scales with each piece's own text size */
.form :is(.label, .sub, .req, input, textarea) { letter-spacing: -.02em; }
.form .req { font-size: 16px; line-height: 24px; opacity: .7; }
.form .sub { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 11px; font-size: 16px; line-height: 24px; margin: 4px 0 0; padding-bottom: 2px; }
.form .sub .req { line-height: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form :is(input[type=text], input[type=email], input[type=tel], input[type=date], textarea) {
  width: 100%; height: auto; background: var(--fill); color: var(--field-color);
  border: 1px solid transparent; border-radius: 30px; padding: 10px 20px; font: 400 calc(.36 * var(--u) + 16px)/1.5 'Epilogue', sans-serif;
}
.form .field input[type=date] { width: auto; padding-top: 11px; padding-bottom: 11px; }
.form .field textarea { display: block; height: var(--ta-h, 100px); resize: vertical; }
.form :is(input, textarea):focus { outline: none; border-color: currentColor; }
.form ::placeholder { color: currentColor; opacity: .45; }
.chips { display: flex; flex-wrap: wrap; gap: 16px 10px; margin-top: 6px; }
/* Option pills: 16px text, 1px/10px padding, 4px gutter after each (Squarespace's sizes) */
.chips label { position: relative; cursor: pointer; border: 1px solid currentColor; border-radius: 17px; padding: 1px 10px; margin-right: 4px; font-size: 16px; line-height: 1.5; letter-spacing: -.02em; background: var(--fill); }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.form .btn { margin-top: 0; }

/* Card list sections (Squarespace "list" section, used on Websites) */
.list-section { padding: var(--title-top) var(--sqs-site-gutter) var(--bottom); }
.list-title { text-align: center; padding-bottom: 30px; }
/* Squarespace sizes each card as (row width - gaps - 38px) / cards, sitting left with a fixed gap */
.list-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), calc((100% - (var(--cols) - 1) * var(--gap) - 38px) / var(--cols))); gap: var(--gap); }
.list-items img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 4%; }
.list-items h2 { margin-bottom: 5px; }
@media (max-width: 767px) {
  .list-section { padding-top: var(--title-top-m); padding-bottom: var(--bottom-m); }
  .list-items h2 { margin-bottom: 3px; }
}

/* Swipe marks: the site's one indicator for anything that scrolls sideways (main.js, [data-dots]).
   Short, slightly uneven strokes; the one for what's in view stretches out in orange. Each layout decides when to show them. */
.list-items { position: relative; }
.swipe-dots { display: none; gap: 7px; align-items: center; margin-top: 20px; }
.swipe-dots i { width: 14px; height: 4px; background: rgba(0, 0, 0, .22); border-radius: 2px 4px 2px 3px; transform: rotate(-1.5deg); cursor: pointer; transition: width .35s ease, background-color .35s ease; }
.swipe-dots i:nth-child(even) { transform: rotate(1deg); }
.swipe-dots i.on { width: 34px; background: var(--accent); }
[data-theme="black"] .swipe-dots i:not(.on) { background: rgba(255, 255, 255, .3); }
@media (max-width: 767px) {
  .list-section .swipe-dots, .an-dots { display: flex; }
  .an-dots { margin-top: 14px; }
}
.list-items p { line-height: 1.5 !important; }
.form-note { font-size: 14px; margin-top: 12px; }
.form-note:empty { display: none; }

/* Blog list */
/* Blog list heading */
.blog-title { max-width: var(--sqs-site-max-width); margin: 0 auto; padding: var(--sqs-site-gutter) var(--sqs-site-gutter) 0; text-align: center; }
/* Blog list (Squarespace's blog grid): 3 columns 50px apart, rows 85px apart, 3:2 images, text inset 10% */
.blog-grid { max-width: var(--sqs-site-max-width); margin: 0 auto; padding: var(--sqs-site-gutter) var(--sqs-site-gutter) calc(var(--sqs-site-gutter) + 16px); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 50px; row-gap: 85px; }
.post { text-align: center; }
.post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post time { display: block; font-size: 12px; line-height: 12px; margin: 30px 0; }
.post h2 { padding: 0 10%; margin-bottom: 25px; }
.post h2 a { color: inherit; text-decoration: none; }
.post h2 a:hover { color: var(--accent); }
.post > a:first-child { display: block; overflow: hidden; }
.post > a:first-child img { transition: transform .5s ease; }
.post > a:first-child:hover img { transform: scale(1.03); }
.post .ex { padding: 0 10%; margin: 0; font-size: 16px; line-height: 24px; letter-spacing: -.02em; }
.post .more { display: inline-block; color: var(--accent); font-size: 16px; line-height: 24px; letter-spacing: -.02em; text-decoration: none; padding-bottom: 21px; }
.post .more:hover { text-decoration: underline; }

/* ---------- Article pages (blog posts) ----------
   Not a Squarespace layout: built from Gabe's type scale (Epilogue, --v sizes), orange accent, grey panels
   and 20px image corners so the long-form posts sit alongside his pages. */
:root { --t-body: calc(.36 * var(--u) + 1rem); }

/* Redesigned posts: a quiet byline line, then the jump links as a left-aligned, numbered text row */
.post-jumps { max-width: var(--sqs-site-max-width); margin: 0 auto; padding: 0 var(--sqs-site-gutter); }
.post-byline { font-size: 13px; line-height: 1.4; letter-spacing: 0; margin: 0; color: rgba(0, 0, 0, .55); }
.post-byline strong { font-weight: 500; color: #000; }
.post-byline a { white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .3); text-underline-offset: .2em; transition: color .15s, text-decoration-color .15s; }
.post-byline a:hover, .post-byline a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.post-byline i { font-style: normal; margin: 0 .5em; opacity: .6; }
.post-tag { font: 500 12px/1.4 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.jump-links a { font-size: 16px; line-height: 1.5; letter-spacing: -.02em; color: #000; text-decoration: none; transition: color .15s; }
.jump-links .jn { font: 500 11px/1 'Space Grotesk', sans-serif; color: var(--accent); margin-right: 6px; vertical-align: 2px; }
.jump-links a:hover, .jump-links a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.jump-bar .jn { display: none; }
.jump-links[hidden] { display: none; }
html { scroll-behavior: smooth; }
/* Slim sticky jump bar (appears after scrolling past the jump links) */
.jump-bar { position: fixed; top: var(--hdr-now, 0px); left: 0; right: 0; z-index: 70; background: rgba(255, 255, 255, .96); border-bottom: 1px solid rgba(0, 0, 0, .12); transform: translateY(-100%); transition: transform .25s ease; backdrop-filter: blur(6px); }
.jump-bar.show { transform: none; }
.jump-bar nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--sqs-site-gutter); justify-content: safe center; }
.jump-bar nav::-webkit-scrollbar { display: none; }
.jump-bar a { flex: none; font-size: 13px; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; padding: 6px 12px; border-radius: 300px; border: 1px solid transparent; color: rgba(0, 0, 0, .6); }
.jump-bar a:hover { color: #000; }
.jump-bar a.active { color: #fff; background: var(--accent); }
.jump-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }

.jump-bar { display: flex; align-items: center; }
/* Links that run past the edge fade out before the booking button instead of sliding under it */
.jump-bar nav { flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.jump-cta { flex: none; margin-left: 12px; margin-right: var(--sqs-site-gutter); background: var(--accent); color: #fff; text-decoration: none; border-radius: 300px; padding: 7px 16px; font: 500 12px/1.2 'Space Grotesk', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.jump-cta:hover { background: #000; }

/* Annotated screenshot */
.an-shot { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.an-canvas { position: relative; }
.an-shot img { display: block; width: 100%; height: auto; }
.an-pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; font-size: 14px; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .25); }
.an-shot:not(.an-wide) { max-width: 620px; }

/* Post FAQ: rows fit the questions instead of Gabe's fixed-height grid */
#questions .fluid-engine { grid-template-rows: none; grid-auto-rows: auto; }
#questions .fe-block-32d9e7472fa4aed45e81 { margin-top: 24px; }

/* ---------- Blog-post modules (pages/chapters.js): Gabe's vocabulary on warm cream and sand ---------- */
.gm-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--sqs-site-gutter); }
.gm h2, .gm h3, .gm p { margin: 0; }
.gm-list li, .gm-compare li, .gm-faq p, .gm-notes strong, .gm-photos strong, .gm-cards strong { font-size: 1rem; }
.gm-center { text-align: center; }
.gm-after { margin-top: 44px; }
.gm-btn { display: inline-block; align-self: flex-start; background: var(--accent); color: #fff; text-decoration: none; border-radius: 300px; padding: 13px 26px; font: 500 13px/1 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; transition: background .2s; }
.gm-btn:hover, .gm-btn:focus-visible { background: #000; }
.gm[data-theme="black"] .gm-btn:hover { background: #fff; color: #000; }

/* Collage hero: photo flush left, headline centre, portrait with an orange block behind */
.gm-hero { display: grid; grid-template-columns: 24% minmax(0, 1fr) 34%; align-items: center; min-height: min(640px, 72vh); }
.gm-hero-left { align-self: stretch; }
.gm-hero-left img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-hero-copy { padding: 4vw 4vw; display: grid; gap: 22px; justify-items: start; }
.gm-hero-right { position: relative; align-self: stretch; display: flex; align-items: center; }
.gm-block { position: absolute; top: 9%; bottom: 9%; right: 0; width: 48%; background: var(--accent); }
.gm-hero-right img { position: relative; width: 68%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* TL;DR band: numbered takeaways, each linking to its section */
.gm-tldr h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }
.gm-tldr ol { list-style: none; margin: 3vw 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-tldr li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 6px 2.2vw; border-left: 1px solid rgba(0, 0, 0, .14); }
.gm-tldr li:first-child { border-left: 0; padding-left: 0; }
.gm-tldr li:last-child { padding-right: 0; }
.gm-tldr-n { font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; color: var(--accent); }
.gm-tldr strong { font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.3; }
.gm-tldr p { font-size: .95rem; line-height: 1.5; opacity: .72; letter-spacing: var(--ls-p); }
.gm-tldr a { justify-self: start; font-size: .875rem; color: var(--accent); font-weight: 500; margin-top: 6px; text-decoration: underline; text-underline-offset: .2em; }
.gm-tldr a:hover { color: #000; }

/* Heading + intro side by side */
.gm-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw 6vw; align-items: start; }

/* Hairline-framed grid of points (Gabe Branding) */
.gm-framed { border-top: 1px solid rgba(0, 0, 0, .18); border-bottom: 1px solid rgba(0, 0, 0, .18); padding-top: 3.5vw; padding-bottom: 3.5vw; }
.gm-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 3.5vw; }
.gm-points > div { display: grid; gap: 10px; align-content: start; }
.gm-ask .gm-btn { margin-top: 6px; }

/* Photo flush to the page edge, copy beside it */
.gm-flush { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(640px, 80vh); }
.gm-flush-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-flush-copy { align-self: center; padding: 5vw 6vw 5vw 5vw; display: grid; gap: 18px; justify-items: start; max-width: 640px; }
.gm-flip .gm-flush-img { order: 2; }
.gm-flip .gm-flush-copy { justify-self: start; padding: 5vw 5vw 5vw calc(max(0px, (100vw - 1320px) / 2) + var(--sqs-site-gutter)); max-width: none; }
.gm-flip .gm-flush-copy > * { max-width: 520px; }
.gm-list { list-style: none; margin: 6px 0 4px; padding: 0; width: 100%; }
.gm-list li { display: grid; grid-template-columns: 36px 1fr; padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .12); line-height: 1.45; letter-spacing: var(--ls-p); }
.gm-list li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.gm-list span { font: 500 12px/1.9 'Space Grotesk', sans-serif; letter-spacing: .08em; color: var(--accent); }

/* Screenshot with markers beside its notes */
.gm-shotsplit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "shot copy" "shot notes"; grid-template-rows: auto 1fr; gap: 22px 4vw; align-items: start; }
.gm-shotsplit.gm-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy shot" "notes shot"; }
.gm-shot-col { grid-area: shot; align-self: center; }
.gm-shot-copy { grid-area: copy; align-self: end; }
.gm-shot-notes { grid-area: notes; display: grid; gap: 18px; justify-items: start; }
.gm-shot-col { min-width: 0; }
.gm-shot { border-radius: 16px; box-shadow: 0 20px 50px -24px rgba(60, 40, 20, .35); }
.gm-caption { font-size: 13px; opacity: .6; margin-top: 12px !important; line-height: 1.45; }
.gm-shot-copy { display: grid; gap: 18px; justify-items: start; }
.gm-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.gm-notes li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .1); }
.gm-notes .fa-n { width: 24px; height: 24px; font-size: 12px; }
.gm-notes strong { display: block; font-weight: 500; letter-spacing: -.02em; }
.gm-notes span:not(.fa-n) { display: block; font-size: .875rem; line-height: 1.45; opacity: .75; }

/* Full-bleed photo band */
.gm-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw 6vw; align-items: end; }

/* ✕ / ✓ */
.gm-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; }
.gm-label { font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 14px !important; }
.gm-do .gm-label { color: var(--accent); opacity: 1; }
.gm-compare ul { list-style: none; margin: 0; padding: 0; }
.gm-compare li { display: grid; grid-template-columns: 28px 1fr; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, .14); line-height: 1.45; letter-spacing: var(--ls-p); }
.gm-compare li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.gm-compare li span { font-weight: 500; }
.gm-compare > div:first-child li { color: rgba(0, 0, 0, .6); }
.gm-do li span { color: var(--accent); }

/* Black statement */
.gm-statement { max-width: 860px; text-align: center; display: grid; gap: 18px; justify-items: center; }

/* Photo grid with captions */
.gm-head { max-width: 640px; margin: 0 auto 3.5vw; display: grid; gap: 12px; justify-items: center; }
.gm-photos { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 32px 24px; }
.gm-photos[style*="--cols:3"] img { aspect-ratio: 4 / 3; }

/* Centred orange titles (Gabe Photo & Video) */
.gm-trio { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px; max-width: 1080px; margin: 0 auto; }
.gm-trio > div { display: grid; gap: 8px; align-content: start; }

/* Numbered stages on black */
.gm-stack { display: grid; gap: 22px; justify-items: start; }
.gm-stages { list-style: none; margin: 4vw 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.gm-stages li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); }
.gm-stages .gm-k { font: 500 13px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; color: var(--accent); }
.gm-stages h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.gm-stages p { font-size: .95rem; line-height: 1.55; opacity: .75; letter-spacing: var(--ls-p); }

.gm-compare-head { margin-bottom: 3.5vw; }
.gm-photos figure { margin: 0; }
.gm-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.gm-photos figcaption { margin-top: 14px; display: grid; gap: 2px; }
.gm-photos strong { font-weight: 500; letter-spacing: -.02em; }
.gm-photos span { font-size: .875rem; opacity: .7; line-height: 1.45; }

/* Checklist keepsake: copy + download on one side, a pinned paper sheet on the other */
.gm-check { align-items: center; }
.gm-check-copy { display: grid; gap: 20px; justify-items: start; align-content: center; }
.gm-check-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 6px; }
.gm-check-actions span { font-size: .875rem; opacity: .6; }
.gm-textlink { color: var(--accent); font-weight: 500; font-size: .95rem; text-decoration: underline; text-underline-offset: .2em; }
.gm-textlink:hover { color: #000; }
.gm-sheet { position: relative; display: block; justify-self: center; width: min(100%, 470px); aspect-ratio: 8.5 / 11; background: #fffdf9; color: #000; text-decoration: none; padding: 9% 9% 7%; transform: rotate(1.6deg); box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 24px 50px -22px rgba(60, 40, 20, .45); transition: transform .35s ease, box-shadow .35s ease; overflow: hidden; }
.gm-sheet::after { content: ""; position: absolute; top: 0; right: 0; width: 19%; height: 24%; background: var(--accent); }
.gm-sheet:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 34px 60px -24px rgba(60, 40, 20, .5); }
.gm-tape { position: absolute; z-index: 2; top: -6px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(226, 212, 186, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); transform: rotate(-3deg); }
.sh-logo { height: 20px; width: auto; display: block; }
.sh-title { display: block; margin-top: 11%; max-width: 76%; font-weight: 500; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.05; letter-spacing: -.04em; }
.sh-intro { display: block; margin-top: 10px; max-width: 80%; font-size: 11.5px; line-height: 1.5; color: rgba(0, 0, 0, .65); }
.sh-list { list-style: none; margin: 7% 0 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, .16); }
.sh-list li { display: grid; grid-template-columns: 13px 22px 1fr; align-items: center; gap: 0 8px; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .16); font-size: 11.5px; line-height: 1.35; }
.sh-box { width: 12px; height: 12px; border: 1.2px solid #000; border-radius: 2px; }
.sh-n { font: 500 9px/1 'Space Grotesk', sans-serif; letter-spacing: .06em; color: var(--accent); }
.sh-sign { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 6%; font-size: 9px; color: rgba(0, 0, 0, .55); }
.sh-sign span { border-bottom: 1px solid rgba(0, 0, 0, .35); padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .gm-sheet, .gm-sheet:hover { transition: none; transform: rotate(1.6deg); } }

/* Numbered FAQ rows (Gabe Branding) */
.gm-faq { list-style: none; margin: 0; padding: 0; }
.gm-faq li { display: grid; grid-template-columns: 6% minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 3vw; padding: 26px 0; border-top: 1px solid rgba(255, 94, 26, .45); }
.gm-faq li:last-child { border-bottom: 1px solid rgba(255, 94, 26, .45); }
.gm-faq-n { color: var(--accent); font-weight: 500; }
.gm-faq h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.4; }
.gm-faq p { line-height: 1.55; letter-spacing: var(--ls-p); opacity: .75; }

/* Inset CTA card over a photo */
.gm-inset { display: flex; justify-content: center; }
.gm-inset-card { background: rgb(250, 247, 242); padding: 44px 56px; text-align: center; display: grid; gap: 14px; justify-items: center; max-width: 620px; }
.gm-inset-card .gm-btn { margin-top: 8px; }

/* Related picture links */
.gm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 2.5vw; }
.gm-cards a { color: inherit; text-decoration: none; display: grid; gap: 6px; }
.gm-cards img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 10px; transition: opacity .2s; }
.gm-cards a:hover img { opacity: .85; }
.gm-cards strong { font-weight: 500; letter-spacing: -.02em; }
.gm-cards span { font-size: .875rem; opacity: .7; }
.gm-cards a:hover strong { color: var(--accent); }

.gm p[style*="--v:1;"] + p[style*="--v:1;"] { margin-top: 1em; }

/* Gentle reveal as chapters scroll in */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* Before / after slider */
.ba-wrap { max-width: var(--sqs-site-max-width); margin: 0 auto; padding: 0 var(--sqs-site-gutter); }
.ba { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; max-height: 80vh; margin: 0 auto; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 500 18px/1 'Epilogue', sans-serif; letter-spacing: .1em; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-tag { position: absolute; top: 16px; padding: 6px 14px; border-radius: 300px; font: 500 13px/1.2 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.ba-tag-before { left: 16px; background: rgba(0, 0, 0, .65); color: #fff; }
.ba-tag-after { right: 16px; background: var(--accent); color: #fff; }
.ba-caption { font-size: 15px; letter-spacing: -.01em; opacity: .7; margin: 14px 0 0; }

/* Annotated example form */
.fa-wrap { max-width: var(--sqs-site-max-width); margin: 0 auto; padding: 0 var(--sqs-site-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.fa-copy h2 { margin: 0 0 1rem; }
.fa-copy > p { margin: 0 0 2rem; }
.fa-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fa-notes li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.fa-notes strong { display: block; font-weight: 500; font-size: var(--t-body); letter-spacing: -.02em; }
.fa-notes span:not(.fa-n) { font-size: 16px; line-height: 1.5; letter-spacing: -.02em; opacity: .75; }
.fa-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 500 13px/1 'Space Grotesk', sans-serif; }
.fa-card { background: #000; color: #fff; border-radius: 20px; padding: 32px; display: grid; gap: 18px; }
.fa-field { position: relative; display: grid; gap: 6px; }
.fa-field .fa-n { position: absolute; left: -45px; top: 26px; }
.fa-label { font-size: 15px; letter-spacing: -.02em; }
.fa-input { display: block; background: hsla(0, 0%, 15.69%, 1); border-radius: 30px; padding: 11px 20px; font-size: 15px; color: rgba(255, 255, 255, .55); letter-spacing: -.02em; }
.fa-input.fa-tall { border-radius: 18px; min-height: 84px; }
.fa-btn { justify-self: start; background: var(--accent); color: #fff; border-radius: 300px; padding: 14px 28px; font: 500 14px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Faint logo under a form's intro (like the home page) ----------
   Fills the blank column beside a tall form on wide screens. Sits just below the intro copy without taking
   up space, so it never moves the layout; hidden whenever the copy and form stack. */
.form-mark { display: none; }
@media (min-width: 1024px) {
  :has(> .form-mark) { position: relative; }
  .form-mark { display: block; position: absolute; left: 0; top: calc(100% + clamp(48px, 4vw, 96px)); width: min(100%, 640px); height: auto; pointer-events: none; user-select: none; }
  .form-mark--on-dark { opacity: .1; }
  .form-mark--on-light { opacity: .07; }
}

/* ---------- Footer (same on every page) ----------
   Logo left, links in the middle, copyright right; stacked and centred below 1024px so nothing runs together. */
.site-footer { background: var(--grey); color: #000; }
.sf-bar { max-width: var(--sqs-site-max-width); margin: 0 auto; padding: clamp(28px, 2.2vw, 44px) var(--sqs-site-gutter); display: flex; align-items: center; gap: 24px 4vw; }
.sf-logo { flex: none; display: block; }
.sf-logo img { display: block; height: clamp(34px, 1.7vw, 43px); width: auto; }
.sf-nav { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px clamp(28px, 4vw, 90px); }
.sf-nav a, .sf-copy { font-size: 16px; line-height: 1.5; letter-spacing: var(--ls-p); margin: 0; }
.sf-nav a { color: inherit; text-decoration: none; }
.sf-nav a:hover, .sf-nav a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; }
.sf-copy { flex: none; }
@media (max-width: 1023px) {
  .sf-bar { flex-direction: column; text-align: center; padding: 40px var(--sqs-mobile-site-gutter); gap: 20px; }
  .sf-nav { flex: none; gap: 8px 28px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  /* Phone header: 6vw top and bottom around a 37px logo (Squarespace's sizes) */
  :root { --header-h: calc(12vw + 37px); }
  .site-header .bar { padding: 6vw var(--sqs-mobile-site-gutter); }
  .site-header.is-scrolled .bar { padding-top: 10px; padding-bottom: 10px; }
  .site-header.is-scrolled .logo img { height: 30px; }
  .logo img { height: 37px; }
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--hdr-now, var(--header-h)) 0 0 0; z-index: 60; background: #fff;
    flex-direction: column; align-items: flex-start; gap: 18px;
    padding: 24px var(--sqs-mobile-site-gutter); display: none; overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav > a, .nav .dd > button { font-size: 28px; }
  .nav > a.book { margin-left: 0; font-size: 18px; }
  /* Blank spacer lines inside grid text blocks only add gaps on a phone */
  .sqs-html-content > p:has(> br:only-child) { display: none; }
  /* Grid buttons are one 24px row tall on phones; give them a comfortable tap height */
  .button-block .btn { min-height: 48px; padding-top: 12px !important; padding-bottom: 12px !important; }
  .dd-menu { position: static; display: flex; padding: 8px 0 0 14px; align-items: flex-start; text-align: left; font-size: 17px; min-width: 0; }
  /* Phone form text follows the phone size rule (window height) */
  .form .label, .form :is(input[type=text], input[type=email], input[type=tel], input[type=date], textarea) { font-size: calc(.36 * min(1vh, 9px) + 16px); }
  /* Card list becomes a sideways-swipe row, one full-width card at a time */
  .list-items { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .list-items::-webkit-scrollbar { display: none; }
  .list-items li { scroll-snap-align: start; }
  .blog-title { padding: 28px var(--sqs-mobile-site-gutter) 0; }
  .blog-grid { grid-template-columns: 1fr; row-gap: 30px; padding-left: var(--sqs-mobile-site-gutter); padding-right: var(--sqs-mobile-site-gutter); padding-bottom: calc(var(--sqs-site-gutter) + 46px); }
  .post time { margin: 15px 0; }
  .post .more { padding-bottom: 9px; }
  /* Articles: one column, sizes follow the phone rule (window height) */
  :root { --t-body: calc(.36 * min(1vh, 9px) + 1rem); }
  .post-jumps { padding: 0 var(--sqs-mobile-site-gutter); }
  .post-jumps { padding-top: 22px; padding-bottom: 28px; }
  .jump-cta { margin-right: var(--sqs-mobile-site-gutter); padding: 6px 12px; font-size: 11px; }
  .an-shot { border-radius: 12px; }
  .an-wide { overflow-x: auto; scrollbar-width: thin; }
  .an-wide .an-canvas { width: 760px; }
  .an-pin { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 2px #fff; }
  .gm-wrap { padding: 0 var(--sqs-mobile-site-gutter); }
  .gm-hero { grid-template-columns: 1fr 1fr; min-height: 0; }
  .gm-hero-copy { grid-column: 1 / -1; order: -1; padding: 40px var(--sqs-mobile-site-gutter) 28px; }
  .gm-hero-left img { aspect-ratio: 4 / 5; height: auto; }
  .gm-hero-right img { width: 78%; margin-left: 10%; }
  .gm-block { top: 6%; bottom: 6%; width: 55%; }
  .gm-tldr ol { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .gm-tldr li, .gm-tldr li:first-child { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .14); padding: 16px 0; grid-template-columns: 34px 1fr; grid-template-rows: auto; gap: 2px 0; }
  .gm-tldr li > :not(.gm-tldr-n) { grid-column: 2; }
  .gm-tldr-n { grid-row: 1 / span 3; padding-top: 5px; }
  .gm-tldr li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
  .gm-split2, .gm-band, .gm-compare { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gm-shotsplit, .gm-shotsplit.gm-flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "shot" "notes"; grid-template-rows: auto; gap: 20px; }
  .gm .gm-wrap { margin-top: 28px; margin-bottom: 28px; }
  .gm-framed { padding-top: 28px; padding-bottom: 28px; }
  .gm-points { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
  .gm-flush { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gm-flush-img img { aspect-ratio: 4 / 3; height: auto; }
  .gm-flip .gm-flush-img { order: 0; }
  .gm-flush-copy, .gm-flip .gm-flush-copy { padding: 36px var(--sqs-mobile-site-gutter) 44px; justify-self: stretch; }
  .gm-head { margin-bottom: 28px; }
  .gm-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .gm-trio { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .gm-stages { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
  .gm-compare-head { margin-bottom: 24px; }
  .gm-check { gap: 36px; }
  .gm-sheet { width: calc(100% - 16px); aspect-ratio: auto; transform: rotate(1deg); padding: 32px 22px 26px; }
  .gm-sheet::after { width: 22%; height: 110px; }
  .sh-sign { margin-top: 22px; }
  .sh-title { font-size: 20px; }
  .sh-list li { padding: 5px 0; font-size: 10.5px; }
  .sh-intro { font-size: 10.5px; }
  .gm-faq li { grid-template-columns: 28px minmax(0, 1fr); gap: 6px 10px; padding: 20px 0; }
  .gm-faq p { grid-column: 2; }
  .gm-inset-card { padding: 30px 22px; }
  .gm-cards { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 22px; }
  .gm-after { margin-top: 28px; }

  .jump-links { gap: 6px 18px; }
  .jump-links a { font-size: 15px; }
  .post-byline i { margin: 0 .35em; }
  .jump-bar nav { padding: 8px var(--sqs-mobile-site-gutter); justify-content: flex-start; }
  .ba-wrap, .fa-wrap { padding: 0 var(--sqs-mobile-site-gutter); }
  .ba { aspect-ratio: 4 / 3; }
  .fa-wrap { grid-template-columns: 1fr; }
  .fa-card { padding: 24px 20px 24px 52px; }
  .fa-field .fa-n { left: -38px; }
}