/* Yacht Graphics
   Palette: hull white, gelcoat, logo navy, night, steel, red ensign.
   Type: Archivo only. Expanded for headings and labels (hull lettering), normal width for reading. */

/* Archivo, served with the site (latin and latin-ext; variable weight 300-800, width 100-125%) */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 800; font-stretch: 100% 125%; font-display: swap;
  src: url(assets/fonts/archivo-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: "Archivo"; font-style: normal; font-weight: 300 800; font-stretch: 100% 125%; font-display: swap;
  src: url(assets/fonts/archivo-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; }

:root {
  --hull: #f4f6f7;
  --gelcoat: #e4e9ec;
  --navy: #13305a;
  --night: #0b1a2c;
  --night-2: #12243a;
  --steel: #7d8b99;
  --steel-text: #5a6878;   /* steel for small text: passes 4.5:1 on hull and gelcoat */
  --ensign: #c8102e;

  --ink: var(--navy);
  --ink-soft: #4b5f78;
  --mist: #a9b8c7;
  --rule: rgba(19, 48, 90, 0.16);
  --rule-light: rgba(244, 246, 247, 0.16);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --steel-fill: linear-gradient(100deg, #24364f 0%, #8e9cab 22%, #f6f8f9 38%, #a9b4bf 50%, #3b4d66 66%, #c9d1d8 82%, #2a3c55 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--hull); color: var(--ink);
  font-family: var(--body); font-weight: 300; font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--navy); color: var(--hull); }
:focus-visible { outline: 2px solid var(--ensign); outline-offset: 3px; }
[hidden] { display: none !important; }

.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--navy); color: var(--hull); padding: .6rem 1rem; }
.skip:focus { top: 1rem; }

/* ---------- labels and titles ---------- */
.label {
  display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem;
  font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.label a { text-decoration: none; }
.label a:hover { color: var(--hull); }
.label--light { color: var(--mist); }
.ensign { width: .9rem; height: .6rem; background: var(--ensign); display: inline-block; clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); }
.section-title { font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.05; letter-spacing: -.01em; max-width: 20ch; }

/* ---------- signature: outlined hull lettering that fills with polished steel ---------- */
.steel {
  display: inline-block; font-family: var(--display); font-stretch: 125%; font-weight: 300;
  text-transform: uppercase; letter-spacing: .02em; color: transparent;
  -webkit-text-stroke: 1.25px var(--navy);
  background-image: var(--steel-fill); background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
}
.steel--light { -webkit-text-stroke-color: #dfe6ec; }
.js .steel[data-steel] { background-size: 0% 100%; transition: background-size 1.8s var(--ease) var(--delay, .3s); }
.js .steel[data-steel].is-fitted { background-size: 100% 100%; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--navy); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn--lg { min-height: 3.6rem; padding: 0 2rem; font-size: .8rem; }
.btn--solid { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: var(--hull); }
.btn--solid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 25%, rgba(233, 239, 242, .42) 50%, transparent 75%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn--solid:hover::after { transform: translateX(120%); }
.btn--solid:hover { background: var(--night); }
.btn--light { background: var(--hull); color: var(--night); border-color: var(--hull); }
.btn--light:hover { background: #fff; }
.btn--ghost-light { background: transparent; color: var(--hull); border-color: rgba(244, 246, 247, .45); }
.btn--ghost-light:hover { background: var(--hull); color: var(--night); }
.btn--steel { position: relative; overflow: hidden; isolation: isolate; background: var(--hull); color: var(--night); border-color: var(--hull); }
.btn--steel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--steel-fill); opacity: .6; transform: translateX(-101%); transition: transform .9s var(--ease); }
.btn--steel:hover::after { transform: translateX(0); }

.link-arrow { display: inline-flex; gap: .6rem; align-items: center; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: .5rem 0; border-bottom: 1px solid currentColor; white-space: nowrap; }
.link-arrow span { transition: transform .4s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--ensign); cursor: pointer; }

.arrow { width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--navy); background: transparent; color: var(--navy); font-size: 1.1rem; cursor: pointer; transition: background .3s, color .3s; }
.arrow:hover { background: var(--navy); color: var(--hull); }
.arrow--light { border-color: var(--rule-light); color: var(--hull); }
.arrow--light:hover { background: var(--hull); color: var(--night); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 2rem;
  height: 4.75rem; padding: 0 var(--gutter); background: rgba(244, 246, 247, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .4s, transform .5s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; margin-right: auto; }
.nav__brand img { width: auto; height: 2.4rem; }
.nav__brand span { font-family: var(--display); font-stretch: 125%; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a { font-size: .92rem; text-decoration: none; color: var(--ink-soft); position: relative; padding: .3rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav__links a:hover { color: var(--navy); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__menu { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule); background: transparent; cursor: pointer; position: relative; }
.nav__menu i { position: absolute; left: .75rem; right: .75rem; height: 1px; background: var(--navy); transition: transform .3s var(--ease); }
.nav__menu i:first-of-type { top: 1.1rem; }
.nav__menu i:last-of-type { top: 1.6rem; }
.nav__menu[aria-expanded="true"] i:first-of-type { transform: translateY(.25rem) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-.25rem) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 4.75rem 0 auto 0; z-index: 49; background: var(--hull); border-bottom: 1px solid var(--rule); padding: 1rem var(--gutter) 2rem; display: grid; }
.mobile-menu a { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .04em; text-decoration: none; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
}

/* ---------- 1. hero ---------- */
.hero {
  min-height: min(100svh, 940px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: 7rem var(--gutter) 3.5rem;
}
.hero__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.4rem, 4.7vw, 4.7rem); line-height: 1.04; letter-spacing: -.015em; margin-bottom: 1.6rem; max-width: 15ch; }
.hero__title .steel { -webkit-text-stroke-width: 1.4px; }
.hero__lede { max-width: 44ch; color: var(--ink-soft); font-size: 1.15rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.hero__phone { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--ink-soft); font-size: .98rem; border-bottom: 1px solid var(--rule); }
.hero__phone:hover { color: var(--navy); border-bottom-color: var(--ensign); }
.hero__phone span { color: var(--navy); border-bottom: 1px solid var(--rule); transition: border-color .3s; }
.hero__phone:hover span { border-color: var(--ensign); }
.trusted { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; }
.trusted__label { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-text); }
.trusted__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-family: var(--display); font-stretch: 125%; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.hero__media { margin: 0; }
.hero__caption span { color: var(--ink-soft); }
.hero__slides { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--gelcoat); }
.hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease), transform 7s linear; }
.hero__slides img.is-active { opacity: 1; transform: scale(1); }
.hero__caption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hero__count { color: var(--navy); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 6.5rem; }
  .hero__title { font-size: clamp(2.1rem, 8.6vw, 3.6rem); }
  .trusted { margin-top: 2.25rem; }
}

/* ---------- peter ---------- */
.peter-chip { display: flex; align-items: center; gap: .9rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.peter-chip p { display: grid; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.peter-chip strong { font-weight: 500; color: var(--navy); }
.peter-chip__avatar, .peter-card__avatar {
  flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  width: 3rem; height: 3rem; border: 1px solid var(--navy); color: var(--navy);
  font-family: var(--display); font-stretch: 125%; font-size: .8rem; letter-spacing: .08em;
}
.peter-chip__avatar img, .peter-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.peter-card { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.peter-card__avatar { width: 3.6rem; height: 3.6rem; border-color: rgba(244, 246, 247, .5); color: var(--hull); }
.peter-card__name { font-weight: 500; color: var(--hull); }
.peter-card__role { color: var(--mist); font-size: .92rem; }

/* ---------- hero single image ---------- */
.hero__frame { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--gelcoat); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; animation: hero-settle 2.4s var(--ease) both; }
@keyframes hero-settle { from { transform: scale(1.06); } }

/* ---------- 2. what we make ---------- */
.make { padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); border-top: 1px solid var(--rule); }
.make__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.make__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem); }
.make__item { display: grid; align-content: start; gap: .7rem; }
.make__media { aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--gelcoat); margin-bottom: .5rem; }
.make__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.make__item:hover .make__media img { transform: scale(1.05); }
.make__item h3 { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: 1rem; letter-spacing: .08em; }
.make__item p { color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 1000px) { .make__grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } }
@media (max-width: 560px) {
  .make__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .make__item { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem; }
  .make__media { grid-row: span 2; aspect-ratio: 1; margin: 0; }
}

/* ---------- 3. continuity ---------- */
.continuity { background: var(--night); color: var(--hull); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); }
.continuity__media { aspect-ratio: 4 / 4.4; overflow: hidden; }
.continuity__media img { width: 100%; height: 100%; object-fit: cover; }
.continuity__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1.06; max-width: 14ch; margin-bottom: 2.25rem; }
.continuity__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-light); }
.continuity__list li { padding: 1.2rem 0; border-bottom: 1px solid var(--rule-light); color: #c3cdd7; line-height: 1.6; }
.continuity__list strong { display: block; font-weight: 500; color: var(--hull); }
@media (max-width: 900px) {
  .continuity { grid-template-columns: 1fr; }
  .continuity__media { aspect-ratio: 16 / 10; order: 2; }
}

/* ---------- 3. featured commissions ---------- */
.featured { background: var(--gelcoat); padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); }
.featured__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.featured__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); }
.feature__btn { width: 100%; display: grid; gap: .5rem; padding: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.feature__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hull); margin-bottom: .75rem; }
.feature:first-child .feature__media { aspect-ratio: 5 / 5.2; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feature__btn:hover .feature__media img { transform: scale(1.05); }
.feature__count { position: absolute; right: .75rem; bottom: .75rem; padding: .4rem .65rem; background: rgba(11, 26, 44, .82); color: var(--hull); font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.feature__type { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; color: var(--steel-text); }
.feature__name {
  font-family: var(--display); font-stretch: 125%; font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px var(--navy);
  background-image: var(--steel-fill); background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-background-clip: text; background-clip: text; transition: background-size .9s var(--ease);
}
.feature__btn:hover .feature__name, .feature__btn:focus-visible .feature__name { background-size: 100% 100%; }
.feature__work { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 900px) {
  .featured__grid { grid-template-columns: 1fr 1fr; }
  .feature:first-child { grid-column: 1 / -1; }
  .feature:first-child .feature__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .featured__grid { grid-template-columns: 1fr; }
  .feature__media, .feature:first-child .feature__media { aspect-ratio: 4 / 3; }
}

/* ---------- contact ---------- */
.contact { background: var(--night); color: var(--hull); padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "head form" "aside form"; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 1rem; align-items: start; }
.contact__head { grid-area: head; }
.contact__form { grid-area: form; }
.contact__aside { grid-area: aside; }
.contact__lede { color: var(--mist); max-width: 42ch; }
.contact__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1.06; max-width: 15ch; margin-bottom: 1.5rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.4rem; }
.steps li { position: relative; padding-left: 3rem; color: #c3cdd7; line-height: 1.6; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .1rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid rgba(244, 246, 247, .35); font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--hull); }
.steps strong { display: block; font-weight: 500; color: var(--hull); }
.direct { margin: 2rem 0 0; display: grid; }
.direct div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; border-top: 1px solid var(--rule-light); padding: .95rem 0; }
.direct dt { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8293a6; padding-top: .2rem; }
.direct dd { margin: 0; }
.direct a { text-decoration: none; }
.direct a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--ensign); }
.contact__form { background: var(--night-2); padding: clamp(1.5rem, 3.5vw, 2.75rem); align-self: start; }
.contact__alt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-light); color: var(--mist); font-size: .95rem; }
.contact__alt .link-button { color: var(--hull); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; grid-template-areas: "head" "form" "aside"; row-gap: 2rem; } }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.5rem; }
.field { display: grid; gap: .5rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.02rem; color: var(--hull); background: transparent;
  border: 0; border-bottom: 1px solid rgba(244, 246, 247, .35); border-radius: 0; padding: .65rem 0; transition: border-color .3s;
}
.field textarea { resize: vertical; }
.field textarea::placeholder { color: #6f8196; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--night); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--hull); }
.field__error { display: none; color: #ff9aa8; font-size: .85rem; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #ff9aa8; }
.more summary { cursor: pointer; list-style: none; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); display: inline-flex; gap: .6rem; align-items: center; padding: .3rem 0; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border: 1px solid rgba(244, 246, 247, .35); color: var(--hull); }
.more[open] summary::before { content: "\2212"; }
.more summary:hover { color: var(--hull); }
.more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.5rem; margin-top: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.chips label { position: relative; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .92rem; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1rem; border: 1px solid rgba(244, 246, 247, .3); color: #cdd6df; transition: all .25s; }
.chips input:checked + span { background: var(--hull); color: var(--night); border-color: var(--hull); }
.chips input:focus-visible + span { outline: 2px solid var(--ensign); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .25rem; }
.form__note { color: #8293a6; font-size: .88rem; max-width: 30ch; }
.form__note a { color: var(--hull); }
.form__status { min-height: 1.5rem; font-size: .95rem; color: #cdd6df; }
.form__status:empty { min-height: 0; }
.form__status.is-error { color: #ff9aa8; }
@media (max-width: 560px) { .form, .more__grid { grid-template-columns: 1fr; } }

/* ---------- work page: commissions register ---------- */
.page-work { background: var(--night); }
.register { position: relative; background: var(--night); color: var(--hull); padding: 8rem var(--gutter) clamp(4rem, 8vw, 6.5rem); min-height: 100svh; }
.register__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: 3rem; }
.register__head .label { grid-column: 1 / -1; margin-bottom: 0; }
.register__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; }
.register__aside { display: grid; gap: 1.25rem; justify-items: start; justify-self: end; max-width: 42ch; }
.register__note { color: var(--mist); }
.register__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-light); }
.entry { border-bottom: 1px solid var(--rule-light); }
.entry button { width: 100%; display: grid; grid-template-columns: 7rem minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.25rem 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.entry__type { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; color: #8293a6; }
.entry__name {
  font-family: var(--display); font-stretch: 125%; font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.25rem, 2.3vw, 2.1rem); line-height: 1.08; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px #dfe6ec;
  background-image: var(--steel-fill); background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-background-clip: text; background-clip: text; transition: background-size .9s var(--ease);
}
.entry__work { color: var(--mist); font-size: .95rem; }
.entry__count { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .1em; color: #8293a6; white-space: nowrap; transition: color .3s; }
.entry button:hover .entry__name, .entry button:focus-visible .entry__name { background-size: 100% 100%; }
.entry button:hover .entry__count { color: var(--hull); }
.entry__thumb { display: none; }
.register__preview { position: fixed; left: 0; top: 0; z-index: 40; width: 22rem; aspect-ratio: 4 / 3; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .35s var(--ease); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.register__preview img { width: 100%; height: 100%; object-fit: cover; }
.register__preview.is-on { opacity: 1; }
.register__cta { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--night-2); display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; align-items: center; justify-content: space-between; }
.register__cta p { font-family: var(--display); font-stretch: 112%; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; max-width: 32ch; }
@media (max-width: 900px) {
  .register { padding-top: 6.5rem; }
  .register__head { grid-template-columns: 1fr; }
  .register__aside { justify-self: start; }
  .entry button { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .35rem 1rem; }
  .entry__thumb { display: block; grid-row: span 3; width: 4.5rem; aspect-ratio: 1; object-fit: cover; }
  .entry__type, .entry__work, .entry__count { grid-column: 2; }
  .entry__type { order: -1; }
  .register__preview { display: none; }
}

/* ---------- footer ---------- */
.footer { padding: 4rem var(--gutter) 2.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem 4rem; align-items: start; background: var(--hull); }
.footer__mark { width: 3.5rem; height: auto; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; font-size: .92rem; color: var(--ink-soft); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--ensign); text-underline-offset: .25em; }
.footer__partners { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.footer__partners a { color: var(--navy); }
.footer__legal { grid-column: 1 / -1; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-text); }
@media (max-width: 700px) {
  .footer { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}

/* ---------- mobile action bar ---------- */
.actionbar { display: none; }
@media (max-width: 900px) {
  .actionbar {
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 45;
    display: flex; gap: .5rem; padding: .5rem; background: rgba(11, 26, 44, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transform: translateY(calc(100% + 1.5rem)); transition: transform .5s var(--ease);
  }
  .actionbar.is-on { transform: none; }
  .actionbar a { flex: 1; display: grid; place-items: center; min-height: 2.9rem; color: var(--hull); text-decoration: none; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(244, 246, 247, .25); text-align: center; }
  .actionbar .actionbar__primary { flex: 2.2; background: var(--hull); color: var(--night); border-color: var(--hull); }
  .footer { padding-bottom: 6.5rem; }
}

/* ---------- portfolio request sheet ---------- */
.sheet { border: 0; padding: 0; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; background: var(--night); color: var(--hull); }
.sheet::backdrop { background: rgba(8, 18, 31, .7); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-in .5s var(--ease); }
.sheet__inner { position: relative; display: grid; gap: 1.4rem; padding: clamp(1.75rem, 4vw, 2.75rem); }
.sheet__inner .label { margin-bottom: 0; }
.sheet__title { font-family: var(--display); font-stretch: 112%; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.05; }
.sheet__lede { color: var(--mist); font-size: .98rem; }
.sheet__inner .btn { justify-self: start; margin-top: .5rem; }
.sheet__close { position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--rule-light); color: var(--hull); font-size: 1.4rem; cursor: pointer; }
.sheet__close:hover { background: var(--hull); color: var(--night); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: var(--night); color: var(--hull); display: grid; grid-template-rows: auto 1fr auto; padding: 1.25rem var(--gutter) 1.5rem; }
.lightbox__bar { display: flex; align-items: center; gap: 1.5rem; }
.lightbox__bar h2 { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .08em; }
.lightbox__meta { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .12em; color: #8293a6; margin-right: auto; }
.lightbox__cta { min-height: 2.75rem; }
.lightbox__close { background: none; border: 1px solid var(--rule-light); color: var(--hull); font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; min-height: 2.75rem; padding: 0 1rem; cursor: pointer; }
.lightbox__close:hover { background: var(--hull); color: var(--night); }
.lightbox__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; min-height: 0; padding: 1.25rem 0; }
.lightbox__stage img { max-height: calc(100svh - 11rem); margin: 0 auto; object-fit: contain; animation: lb-in .6s var(--ease); }
.lightbox__caption { text-align: center; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } }
@media (max-width: 700px) {
  .lightbox__bar { flex-wrap: wrap; gap: .75rem 1rem; }
  .lightbox__cta { order: 5; width: 100%; }
  .lightbox__stage { grid-template-columns: 1fr 1fr; }
  .lightbox__stage img { grid-column: 1 / -1; grid-row: 1; }
  .lightbox__stage .arrow { grid-row: 2; justify-self: center; }
}

/* ---------- thank-you page ---------- */
.thanks { background: var(--night); color: var(--hull); }
.thanks__main { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 1.5rem; padding: 4rem var(--gutter); max-width: 60rem; }
.thanks__mark { width: 3.25rem; height: auto; margin-bottom: 1.5rem; }
.thanks .label { margin-bottom: 0; }
.thanks__title { font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.05; max-width: 20ch; }
.thanks__text { color: var(--mist); max-width: 48ch; }
.thanks__text a { color: var(--hull); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* ---------- funnel additions ---------- */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: flow; border-top: 1px solid var(--rule-light); }
.flow li { position: relative; padding: 1.05rem 0 1.05rem 2.6rem; border-bottom: 1px solid var(--rule-light); color: #c3cdd7; line-height: 1.55; counter-increment: flow; }
.flow li::before { content: counter(flow, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--ensign); letter-spacing: .1em; }
.flow strong { font-weight: 500; color: var(--hull); }

.swipe-hint { display: none; }
@media (max-width: 900px) {
  .featured { padding-right: 0; }
  .featured__head { padding-right: var(--gutter); }
  .featured__grid { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter); scrollbar-width: none; }
  .featured__grid::-webkit-scrollbar { display: none; }
  .feature, .feature:first-child { grid-column: auto; scroll-snap-align: start; }
  .feature__media, .feature:first-child .feature__media { aspect-ratio: 4 / 3.6; }
  .swipe-hint { display: block; margin-top: 1rem; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-text); }
}

@media (max-width: 900px) {
  .hero { padding-top: 5.75rem; gap: 1.5rem; }
  .hero__media--single { order: -1; }
  .hero__frame { aspect-ratio: 16 / 7; }
  .hero__caption { display: none; }
  .peter-chip { margin-top: 1.75rem; }
  .make__grid { gap: 1.25rem; }
}
@media (max-width: 560px) {
  .continuity__media { display: none; }
}

.more__note { margin-top: 1rem; }
.share-line { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-light); color: var(--mist); font-size: .92rem; }
.share-line a { color: var(--hull); text-underline-offset: .25em; text-decoration-color: var(--ensign); }

.testimonials { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.quote { margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--ensign); }
.quote blockquote { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 1.15rem; line-height: 1.4; color: var(--hull); }
.quote figcaption { margin-top: .5rem; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }

.faq { padding: clamp(4rem, 8vw, 6.5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 2rem 4rem; }
.faq__list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-size: 1.02rem; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; color: var(--ensign); flex: none; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); padding: 0 0 1.25rem; max-width: 60ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 1.5rem; } }

@media (max-width: 700px) {
  .lightbox { padding-left: 1rem; padding-right: 1rem; }
  .lightbox__stage img { max-height: 64svh; width: 100%; }
}

.thanks__steps { list-style: none; margin: .5rem 0 0; padding: 0; counter-reset: ts; display: grid; gap: .9rem; max-width: 48ch; }
.thanks__steps li { position: relative; padding-left: 2.4rem; color: #c3cdd7; counter-increment: ts; }
.thanks__steps li::before { content: counter(ts); position: absolute; left: 0; top: .1rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid rgba(244, 246, 247, .35); font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; }
.thanks__steps strong { font-weight: 500; color: var(--hull); }
.thanks__checklist { margin-top: 1.5rem; width: 100%; max-width: 44rem; background: var(--night-2); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 1.25rem; justify-items: start; }
.thanks__checklist .label { margin-bottom: .6rem; }
.thanks__checklist h2 { font-family: var(--display); font-stretch: 112%; font-size: 1.5rem; line-height: 1.15; margin-bottom: .6rem; }
.thanks__checklist p { color: var(--mist); }
.thanks__contact { color: var(--mist); font-size: .92rem; }
.thanks__contact a { color: var(--hull); }

/* ---------- printable checklist ---------- */
.sheet-page { background: var(--hull); }
.checklist { max-width: 60rem; margin: 0 auto; padding: 3rem var(--gutter) 4rem; }
.checklist__head { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--navy); }
.checklist__head img { width: 3rem; height: auto; }
.checklist__head .label { margin-bottom: .5rem; }
.checklist__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin-bottom: .75rem; }
.checklist__lede { color: var(--ink-soft); max-width: 60ch; }
.checklist__meta { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 1.5rem; margin: 1.5rem 0 2rem; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.checklist__line { display: block; border-bottom: 1px solid var(--rule); height: 1.6rem; }
.checklist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.checklist h2 { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: .9rem; letter-spacing: .08em; margin-bottom: .6rem; }
.checklist table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.checklist th { text-align: left; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-weight: 400; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-text); padding: .4rem 0; border-bottom: 1px solid var(--navy); }
.checklist th:not(:first-child), .checklist td:not(:first-child) { width: 3.4rem; text-align: center; }
.checklist th:last-child, .checklist td:last-child { width: 5.5rem; }
.checklist td { padding: .55rem 0; border-bottom: 1px solid var(--rule); color: var(--navy); }
.checklist td:nth-child(2)::after, .checklist td:nth-child(3)::after { content: ""; display: inline-block; width: .85rem; height: .85rem; border: 1px solid var(--steel); vertical-align: middle; }
.checklist__foot { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--navy); display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-soft); }
.checklist__foot strong { color: var(--navy); font-weight: 500; }
.checklist__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 700px) {
  .checklist__grid, .checklist__meta { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .checklist { padding: 0; max-width: none; }
  .checklist__actions { display: none; }
  .checklist__grid { grid-template-columns: 1fr 1fr; gap: 6mm 8mm; }
  .checklist__meta { grid-template-columns: 1.4fr 1.4fr 1fr; }
  .checklist section { break-inside: avoid; }
  body { font-size: 10pt; }
}


/* ---------- silver details ---------- */
.scroll-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--steel-fill); transform-origin: left center; transform: scaleX(0); pointer-events: none; }

.brand-mark {
  display: block; width: 2.26rem; height: 2.4rem;
  background: linear-gradient(110deg, var(--navy) 0%, var(--navy) 38%, #f4f7f9 47%, #a9b8c5 52%, var(--navy) 62%, var(--navy) 100%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-mask: url(assets/yg-mark-navy.png) center / contain no-repeat;
  mask: url(assets/yg-mark-navy.png) center / contain no-repeat;
  animation: glint 2.2s var(--ease) .5s both;
}
.nav__brand:hover .brand-mark { animation: glint-again 1.4s var(--ease); }
@keyframes glint { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes glint-again { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; inset: -10% -50%; pointer-events: none; z-index: 1; opacity: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .34) 48.5%, rgba(214, 226, 235, .16) 52%, transparent 58%);
  mix-blend-mode: screen; transform: translateX(-70%);
}
.sheen.is-sheen::after,
.sheen:hover::after,
.make__item:hover .sheen::after,
.feature__btn:hover .sheen::after { animation: sheen 1.5s var(--ease); }
@keyframes sheen { 0% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 1; transform: translateX(70%); } }
.feature__count { z-index: 2; }

.btn--steel.is-glint::after { animation: btn-glint 1.6s var(--ease); }
@keyframes btn-glint { 0% { transform: translateX(-101%); } 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }


/* ---------- paper, emboss, story, closing ---------- */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .19 0 0 0 0 .35 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body { background-image: var(--grain); }
.featured { background-image: var(--grain); }

.hero { position: relative; isolation: isolate; }
.hero__copy, .hero__media { position: relative; z-index: 1; }
.emboss {
  position: absolute; z-index: 0; left: -3vw; bottom: -4rem; width: min(34vw, 30rem); aspect-ratio: 294 / 312; pointer-events: none;
  filter: drop-shadow(-1.5px -1.5px 1px rgba(255, 255, 255, .95)) drop-shadow(1.5px 1.5px 1.5px rgba(19, 48, 90, .17));
  animation: press 1.8s var(--ease) .3s both;
}
.emboss span { display: block; width: 100%; height: 100%; background: #f5f7f8; -webkit-mask: url(assets/yg-mark-navy.png) center / contain no-repeat; mask: url(assets/yg-mark-navy.png) center / contain no-repeat; }
@keyframes press {
  from { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)) drop-shadow(0 0 0 rgba(19, 48, 90, 0)); transform: scale(1.015); }
  to { filter: drop-shadow(-1.5px -1.5px 1px rgba(255, 255, 255, .95)) drop-shadow(1.5px 1.5px 1.5px rgba(19, 48, 90, .17)); transform: none; }
}
@media (max-width: 900px) { .emboss { width: 70vw; left: auto; right: -18vw; bottom: 2rem; opacity: .9; } }

.story { padding: clamp(4.5rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--rule); }
.story__head { padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.story__head .label { grid-column: 1 / -1; margin-bottom: 0; }
.story__lede { color: var(--ink-soft); max-width: 40ch; justify-self: end; }
.story__window { position: relative; overflow: hidden; padding: 1.5rem 0 0; }
.story__line { position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--steel-fill); transform-origin: left center; transform: scaleX(0); }
.story__track { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; will-change: transform; }
.story__item { width: clamp(13rem, 17vw, 18rem); flex: none; }
.story__media { aspect-ratio: 4 / 4.6; background: var(--gelcoat); box-shadow: 0 18px 40px -22px rgba(11, 26, 44, .45); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__item p { display: flex; gap: .75rem; align-items: baseline; margin-top: 1rem; font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: .88rem; letter-spacing: .08em; color: var(--navy); }
.story__item p span { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .1em; color: var(--ensign); }
.story .swipe-hint { padding: 0 var(--gutter); }
@media (max-width: 900px) {
  .story__head { grid-template-columns: 1fr; }
  .story__lede { justify-self: start; }
  .story__window { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .story__window::-webkit-scrollbar { display: none; }
  .story__item { width: 70vw; scroll-snap-align: center; }
  .story__line { display: none; }
}

.closing { background: var(--night); color: var(--hull); padding: clamp(4.5rem, 10vw, 8rem) var(--gutter); display: grid; justify-items: start; gap: 2.25rem; }
.closing__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 1.02; max-width: 16ch; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.closing__mail { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--rule-light); }
.closing__mail:hover { color: var(--hull); border-bottom-color: var(--ensign); }
.closing + * { border-top: 0; }


/* ---------- What we make: cards open galleries ---------- */
.make__head { display: flex; justify-content: space-between; align-items: end; gap: 1.25rem 3rem; flex-wrap: wrap; }
.make__btn { width: 100%; display: grid; align-content: start; gap: .7rem; padding: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.make__btn .make__media { position: relative; display: block; }
.make__count { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; padding: .35rem .55rem; background: rgba(11, 26, 44, .82); color: var(--hull); font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.make__text { display: grid; gap: .5rem; }
.make__name { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: 1rem; letter-spacing: .08em; color: var(--navy); }
.make__name::after { content: " \2192"; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; color: var(--ensign); opacity: 0; transition: opacity .3s; }
.make__btn:hover .make__name::after, .make__btn:focus-visible .make__name::after { opacity: 1; }
.make__desc { color: var(--ink-soft); font-size: .96rem; }
.make__btn:hover .make__media img { transform: scale(1.05); }
.make__btn:hover .sheen::after { animation: sheen 1.5s var(--ease); }
@media (max-width: 560px) {
  .make__item { display: block; }
  .make__btn { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .make__btn .make__media { aspect-ratio: 1; margin: 0; }
  .make__count { right: .3rem; bottom: .3rem; font-size: .58rem; padding: .25rem .4rem; }
}

/* ---------- team ---------- */
.team__label { margin-top: 1rem; font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #8293a6; }
.peter-card--team { margin-top: .9rem; }
.peter-chip__avatar, .peter-card__avatar { background: var(--night-2); }


/* ---------- softer blue: light How it works, dark sections as inset panels ---------- */
.continuity { background: var(--gelcoat); background-image: var(--grain); color: var(--ink); }
.continuity__title { color: var(--navy); }
.flow { border-top-color: var(--rule); }
.flow li { color: var(--ink-soft); border-bottom-color: var(--rule); }
.flow strong { color: var(--navy); }
.continuity__media { box-shadow: 0 24px 50px -28px rgba(11, 26, 44, .45); }

.contact, .closing {
  margin: clamp(1rem, 3vw, 2.5rem) var(--gutter);
  padding-left: clamp(1.5rem, 4.5vw, 4.5rem); padding-right: clamp(1.5rem, 4.5vw, 4.5rem);
  box-shadow: 0 30px 60px -36px rgba(11, 26, 44, .55);
}
.closing { margin-bottom: clamp(2rem, 5vw, 4rem); }
@media (max-width: 700px) {
  .contact, .closing { margin-left: .75rem; margin-right: .75rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* keep the embossed mark inside the hero so phones never get a sideways scroll */
html { overflow-x: clip; }
.hero { overflow: hidden; }

/* ---------- the line from the G: the mark sits on the page's centre line (desktop) ----------
   In the mark, the G's right stroke is 2rem in from the left of a 2.26rem-wide mark,
   and ends 2.06rem down. The line carries on from there to the foot of the page. */
.g-line { display: none; }
@media (min-width: 1001px) {
  .nav__brand { position: absolute; right: calc(50% - .26rem); flex-direction: row-reverse; margin-right: 0; }
  .nav__brand::after {
    content: ""; position: absolute; right: calc(.26rem - .5px); top: 2.06rem; width: 1px;
    height: calc((4.75rem + 2.4rem) / 2 - 2.06rem); background: var(--g-line);
    transform-origin: top; animation: g-draw .5s var(--ease) .9s both;
  }
  .nav__links { margin-left: auto; }
  .g-line {
    display: block; position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px;
    z-index: 1; pointer-events: none; background: var(--g-line);
    transform-origin: top; animation: g-draw 1.8s var(--ease) 1.3s both;
  }
  /* dark panels and the footer pass over the line, as on the original site */
  .contact, .closing, .footer { position: relative; z-index: 2; }
  /* keep text clear of the line: columns meet on the centre */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(5rem, 8vw, 8rem); }
  .make__head > div { max-width: calc(50% - 3rem); }
  .continuity { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(5rem, 8vw, 8rem); }
  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(5rem, 8vw, 8rem); }
  /* work page: names left of the line, descriptions right of it; the line turns silver on navy */
  .page-work .g-line { background: rgba(223, 230, 236, .28); }
  .entry button { grid-template-columns: 6rem minmax(0, calc(50% - 10rem)) minmax(0, 1fr) auto; }
  .entry__work { padding-left: 3.5rem; }
}
:root { --g-line: rgba(19, 48, 90, .5); }
@keyframes g-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* hero photo: the sun deck is a tall shot, so the frame is taller on desktop */
@media (min-width: 901px) { .hero__frame { aspect-ratio: 4 / 4.6; } }
.hero__deck { object-position: 50% 62%; }
/* menu card hero: keep the whole card in frame, including the shorter phone crop */
.hero__menu { object-position: 50% 55%; }
@media (max-width: 900px) { .hero__frame:has(.hero__menu) { aspect-ratio: 16 / 9; } .hero__menu { object-position: 50% 66%; } }

/* ---------- everything we make (services.html) ---------- */
.make__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.register__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.register__all { color: var(--hull); text-decoration: none; border-bottom: 1px solid var(--rule-light); padding: .4rem 0; font-size: .95rem; }
.register__all:hover { border-bottom-color: var(--ensign); }

.offer-head {
  padding: 8.5rem var(--gutter) clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(5rem, 8vw, 8rem); row-gap: 1.25rem; align-items: end;
}
.offer-head .label { grid-column: 1 / -1; margin-bottom: 0; }
.offer-head .label a { color: inherit; text-decoration: none; }
.offer-head__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; color: var(--navy); max-width: 13ch; }
.offer-head__title .steel { -webkit-text-stroke-width: 1.3px; }
.offer-head__aside { display: grid; gap: 1.5rem; justify-items: start; max-width: 44ch; color: var(--ink-soft); font-size: 1.08rem; }

.offers { list-style: none; margin: 0; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); counter-reset: none; }
.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(5rem, 8vw, 8rem); row-gap: 2rem;
  padding: clamp(2.75rem, 5vw, 4rem) 0; border-top: 1px solid var(--rule); scroll-margin-top: 5rem;
}
.offer__num { font-family: var(--mono); font-stretch: 125%; font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .14em; color: var(--ensign); margin-bottom: .9rem; }
.offer__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(1.8rem, 3.1vw, 2.7rem); line-height: 1.05; color: var(--navy); margin-bottom: 1rem; }
.offer__desc { color: var(--ink-soft); max-width: 42ch; }
.offer__media { margin-top: 1.75rem; max-width: 24rem; aspect-ratio: 4 / 5; background: var(--gelcoat); }
.offer__media img { width: 100%; height: 100%; object-fit: cover; }
.offer__items { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; border-top: 1px solid var(--rule); }
.offer__items li { break-inside: avoid; padding: .8rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 1rem; line-height: 1.4; }
.offer__sub { margin: 1.75rem 0 .75rem; font-family: var(--mono); font-stretch: 125%; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-text); }
.offer__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.offer__chips li { border: 1px solid var(--rule); padding: .4rem .8rem; font-size: .9rem; color: var(--navy); background: rgba(255, 255, 255, .5); }
.offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.offer__see { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); padding: .4rem 0; font-size: .95rem; }
.offer__see:hover { color: var(--navy); border-bottom-color: var(--ensign); }
.page-services .closing { margin-top: 0; }
@media (max-width: 900px) {
  .offer-head { grid-template-columns: 1fr; padding-top: 7rem; }
  .offer { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .offer__media { max-width: none; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .offer__items { columns: 1; } }

/* forwarding line in the light How it works section */
.continuity .share-line { margin-top: 1.75rem; border-top-color: var(--rule); color: var(--ink-soft); }
.continuity .share-line a { color: var(--navy); }

.offer-head__lead { color: var(--navy); font-size: 1.22rem; line-height: 1.45; }
.offer-head__aside { gap: 1.1rem; }

/* narrow laptops: keep the links and button clear of the centred logo */
@media (min-width: 1001px) and (max-width: 1099px) {
  .nav { gap: 1.25rem; }
  .nav__links { gap: 1.25rem; }
  .nav__cta { padding-left: 1.1rem; padding-right: 1.1rem; letter-spacing: .1em; }
}

/* simple pages (privacy, not found): ordinary top bar, logo on the left, no centre line */
.nav--simple .nav__brand { position: static; flex-direction: row; margin-right: auto; }
.nav--simple .nav__brand::after { content: none; }
.nav--simple .nav__brand img { width: auto; height: 2.4rem; }

/* ---------- Peter's mockup (14 Oct): full logo in a white top bar, solid BESPOKE, wider headline ---------- */
@media (min-width: 1001px) {
  .nav { background: rgba(255, 255, 255, .96); }
  /* the full mark fills the bar: the Y's line runs up to the top edge, the G's line runs down into the centre line.
     In the artwork the G's line sits 97.08% across, so the mark's right edge goes 2.92% of its width past the centre. */
  .nav__brand { --mark-w: calc((4.75rem + 1px) * 2484 / 3306); top: 0; bottom: -1px; right: calc(50% - var(--mark-w) * 0.0292); align-items: center; gap: 1rem; }   /* -1px: reach past the bar's border so the line never breaks */   /* -1px: reach past the bar's border so the line never breaks */
  .nav__brand::after { content: none; }
  .nav__brand .brand-mark {
    align-self: stretch; height: auto; width: var(--mark-w);
    -webkit-mask-image: url(assets/yg-logo-full.png); mask-image: url(assets/yg-logo-full.png);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  }
  .nav__brand span { font-size: 1.12rem; font-weight: 300; font-stretch: 112%; letter-spacing: .14em; }
  .nav__links a { font-size: .8rem; }
}
@media (min-width: 901px) { .hero__title { font-size: clamp(2.4rem, 4.1vw, 4.4rem); max-width: 20ch; } }
/* every "steel" word is now solid bold, as Peter set BESPOKE: deep navy on light, white on the dark panels */
.steel, .hero__title .steel, .offer-head__title .steel {
  color: #0d1b4c; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0;
  background: none; font-weight: 800; letter-spacing: .01em;
}
.steel--light { color: var(--hull); }
/* Work page group names: solid bold white, softening to silver on hover */
.entry__name { color: var(--hull); -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; background: none; font-weight: 800; transition: color .3s var(--ease); }
.entry button:hover .entry__name, .entry button:focus-visible .entry__name { color: #c8d3dd; }

/* Flying Fox hero: keep the lettering in frame (it sits in the left half of a landscape shot) */
.hero__hull { object-position: 0% 50%; }
@media (max-width: 900px) { .hero__hull { object-position: 30% 30%; } }
.hero__season { margin-top: 1.25rem; font-size: .95rem; color: var(--ink-soft); }
/* "Required by" date on the request form */
.field--date input { max-width: 15rem; color-scheme: dark; }
.field__hint { margin-top: .4rem; font-size: .82rem; color: var(--mist); }

/* ---------- reveal: content is visible without JS; JS only adds the entrance ---------- */
.js .reveal { transform: translateY(24px); opacity: .001; transition: transform 1s var(--ease), opacity 1s var(--ease); }
.js .reveal.is-in { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { transform: none; opacity: 1; }
  .js .steel[data-steel] { background-size: 100% 100%; }
}

/* ---------- privacy notice ---------- */
.legal { max-width: 46rem; padding: 8rem var(--gutter) 4rem; }
.legal__title { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.05; margin-bottom: 2.5rem; }
.legal h2 { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: .95rem; letter-spacing: .08em; margin: 2.5rem 0 .8rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .6rem; }
.legal strong { font-weight: 500; color: var(--navy); }