/* ==========================================================================
   Rose Photography — booking page
   Palette: dusty blue + blush on warm cream.
   ========================================================================== */

:root {
  /* Blues — sampled from the RP monogram so the site and logo agree */
  --blue:       #84a8cc;   /* primary, straight off the logo */
  --blue-dk:    #5f88b0;   /* hover / links */
  --blue-deep:  #3d5c7c;   /* footer, deep accents */
  --blue-pale:  #dbe7f3;   /* washes */
  --blue-mist:  #f1f6fb;   /* faintest tint */

  /* Blush */
  --blush:      #e8c4c0;
  --blush-pale: #f9eeec;

  /* Neutrals */
  --cream:      #fbf9f7;
  --paper:      #ffffff;
  --ink:        #3a4552;
  --ink-soft:   #6e7987;
  --ink-faint:  #a0a8b3;
  --line:       #e9e4df;

  --shadow-sm:  0 2px 10px rgba(58, 69, 82, .05);
  --shadow-md:  0 14px 38px rgba(58, 69, 82, .10);
  --shadow-lg:  0 30px 80px rgba(58, 69, 82, .24);

  --display:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script:     'Alex Brush', 'Cormorant Garamond', cursive;
  --sans:       'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius:     2px;
  --wrap:       1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is not optional here. The logo carries width/height attributes
   so the browser can reserve space before it loads; without this, any rule
   that overrides the width leaves the attribute height in place and the
   image stretches. Anything that genuinely needs a fixed height sets one
   explicitly below, and those rules are more specific than this. */
img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Gentle reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px 24px 120px;
  background-color: var(--blue-deep);
  /* The photograph is set inline on the element, as an absolute URL. It used to
     arrive here through a --hero-image custom property, but a relative url()
     inside a custom property is resolved against THIS stylesheet rather than
     the page, so the browser looked for /assets/css/uploads/... and found
     nothing. The blue below stays as the fallback when no photo is set. */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* A cool blue scrim keeps type legible and ties the photo to the palette. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(41, 56, 74, .38) 0%,
      rgba(41, 56, 74, .14) 32%,
      rgba(41, 56, 74, .46) 74%,
      rgba(33, 46, 62, .68) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 6vw, 80px);
  text-align: left;
}

/* Without a portrait there is nothing to balance against, so the text keeps
   the left edge rather than drifting into the middle of the photograph. */
.hero__inner--solo { justify-content: flex-start; }

.hero__text {
  flex: 0 1 auto;
  max-width: 560px;
  min-width: 0;
}

.hero__avatar {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 20vw, 260px);
  height: clamp(150px, 20vw, 260px);
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 8px 34px rgba(28, 40, 55, .34);
  background: rgba(255, 255, 255, .1);
}

.hero__avatar::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
  pointer-events: none;
}

.hero__avatar img { width: 100%; height: 100%; object-fit: cover; }

.hero__avatar--empty { backdrop-filter: blur(2px); }

/* The RP monogram. It is light artwork on transparency, so it belongs on the
   dark hero and the deep-blue footer, never on the cream page. */
.hero__logo {
  width: min(300px, 62vw);
  margin: 0 0 26px;
  display: block;
  filter: drop-shadow(0 4px 22px rgba(20, 32, 46, .45));
}

/* When the logo carries the name, the text title becomes a screen-reader-only
   heading so the page still has a proper h1. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero__title {
  margin: 0 0 26px;
  font-family: var(--script);
  font-weight: 400;
  /* Alex Brush sets small for its point size — it needs roughly 1.5x
     what the serif took to hold the same presence. */
  font-size: clamp(3.8rem, 11vw, 7rem);
  line-height: 1.0;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 30px rgba(24, 34, 46, .42);
}

.hero__greeting,
.hero__intro {
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font-style: italic;
  font-weight: 300;
  text-shadow: 0 1px 18px rgba(24, 34, 46, .5);
}

.hero__greeting {
  font-family: var(--display);
  font-size: 1.3rem;
  margin-bottom: 20px;
  letter-spacing: .01em;
}

.hero__intro { font-size: .97rem; max-width: 560px; line-height: 1.85; }

.hero__chevron {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255, 255, 255, .85);
  animation: nudge 2.6s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__chevron { animation: none; }
  html { scroll-behavior: auto; }
  .card, .card__media, .reveal { transition: none; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Section headings — serif small caps between softly fading rules
   -------------------------------------------------------------------------- */

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 12px;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.section-title::before,
.section-title::after {
  content: '';
  width: 58px;
  height: 1px;
  flex: none;
}

.section-title::before { background: linear-gradient(to right, transparent, var(--blue)); }
.section-title::after  { background: linear-gradient(to left,  transparent, var(--blue)); }

.section-sub {
  margin: 0 0 56px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink-soft);
}

.empty { text-align: center; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Sessions
   -------------------------------------------------------------------------- */

.sessions { padding: 104px 0 96px; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1),
              box-shadow .5s cubic-bezier(.22, .61, .36, 1),
              border-color .5s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-pale);
}

.card__media {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--blue-pale);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.card:hover .card__media { transform: scale(1.045); }

/* No photo yet: a soft blue-to-blush wash with the session name. */
.card__media--empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(155deg,
      var(--blue-pale) 0%,
      var(--blue-mist) 42%,
      var(--blush-pale) 100%);
}

.card__placeholder {
  font-family: var(--display);
  font-size: 1.35rem;
  font-style: italic;
  letter-spacing: .1em;
  color: rgba(67, 95, 125, .48);
}

.card__body {
  padding: 22px 24px 26px;
  background: var(--paper);
  position: relative;
  z-index: 1;
}

.card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.card__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.42rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
}

.card__price {
  flex: none;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--blue-dk);
  white-space: nowrap;
}

.card__price em { font-style: italic; font-size: .86rem; color: var(--ink-faint); }

/* A hairline that grows from blush to blue as you hover the card. */
.card__body::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 0 14px;
  background: var(--blush);
  transition: width .5s cubic-bezier(.22, .61, .36, 1), background .5s ease;
}

.card:hover .card__body::before { width: 68px; background: var(--blue); }

.card__desc {
  display: block;
  margin: 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.75;
}

.card__cta {
  display: block;
  margin: 16px 0 0;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-dk);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}

.card:hover .card__cta,
.card:focus-visible .card__cta { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about {
  padding: 70px 0 104px;
  background: linear-gradient(to bottom, var(--cream) 0%, var(--blue-mist) 100%);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 68px;
  align-items: center;
}

/* Offset frame behind the portrait — quiet, editorial. */
.about__photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blue-pale);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-md);
}

.about__photo::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .42);
  pointer-events: none;
}

.about__photo img { width: 100%; height: 100%; object-fit: cover; }

.about__photo--empty {
  background:
    linear-gradient(155deg,
      var(--blue-pale) 0%,
      var(--blue-mist) 45%,
      var(--blush-pale) 100%);
}

.about__body .section-title { justify-content: flex-start; }
.about__body .section-title::before { display: none; }

.about__text {
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 2;
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.cta {
  padding: 96px 0 108px;
  text-align: center;
  background: var(--blue-mist);
}

.cta__copy {
  margin: 0 0 34px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.14rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 15px 42px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease,
              color .35s ease, box-shadow .35s ease;
}

.btn:hover:not(:disabled) {
  background: var(--blue-dk);
  border-color: var(--blue-dk);
  box-shadow: 0 8px 24px rgba(91, 122, 158, .28);
}

.btn:disabled { opacity: .36; cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  box-shadow: none;
}

.btn-quiet:hover:not(:disabled) {
  background: var(--blush-pale);
  border-color: var(--blush);
  color: var(--ink);
  box-shadow: none;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot {
  padding: 56px 24px 58px;
  background: var(--blue-deep);
  color: rgba(255, 255, 255, .8);
  text-align: center;
}

.site-foot__logo {
  width: 168px;
  margin: 0 auto 22px;
  opacity: .95;
}

.site-foot__brand {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}

/* Blush hairline under the wordmark. */
.site-foot__brand::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--blush);
}

.site-foot__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0 0 16px;
  font-size: .85rem;
}

.site-foot__links a {
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 196, 192, .4);
  padding-bottom: 2px;
}

.site-foot__links a:hover { color: #fff; border-color: var(--blush); }

.site-foot__meta { margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   Booking sheet
   -------------------------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sheet[hidden] { display: none; }

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(41, 56, 74, .55);
  backdrop-filter: blur(4px);
}

.sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: min(92vh, 880px);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rise .4s cubic-bezier(.22, .61, .36, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.sheet__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.sheet__close:hover { color: var(--ink); }

.sheet__head {
  padding: 28px 30px 0;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.sheet__eyebrow {
  margin: 0 0 4px;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-dk);
}

.sheet__title {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.95rem;
  line-height: 1.15;
}

.steps {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.steps li {
  flex: 1;
  padding: 0 0 11px;
  border-bottom: 2px solid var(--line);
  text-align: center;
  transition: color .3s ease, border-color .3s ease;
}

.steps li.is-active { color: var(--blue-dk); border-bottom-color: var(--blue); }
.steps li.is-done   { color: var(--ink-soft); border-bottom-color: var(--blush); }

.sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px;
  -webkit-overflow-scrolling: touch;
}

.sheet__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 30px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}

.sheet__foot .btn:only-child { margin-left: auto; }

.sheet__error {
  margin: 18px 0 0;
  padding: 12px 15px;
  border: 1px solid #dcb4ae;
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--blush-pale);
  color: #8d4438;
  font-size: .9rem;
}

.step__lead { margin: 0 0 20px; color: var(--ink-soft); font-size: .95rem; }

.step__includes {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blush);
  border-radius: var(--radius);
  background: var(--blue-mist);
}

.step__includes h4 {
  margin: 0 0 8px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.step__includes ul { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--ink-soft); }
.step__includes li { padding: 2px 0; }

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */

.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal__label {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.cal__nav {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.cal__nav:hover:not(:disabled) {
  background: var(--blue-mist);
  border-color: var(--blue-pale);
  color: var(--blue-dk);
}

.cal__nav:disabled { opacity: .3; cursor: not-allowed; }

.cal__dow,
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.cal__dow {
  margin-bottom: 8px;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: .95rem;
  cursor: default;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.cal__day--open {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.cal__day--open:hover { border-color: var(--blue); background: var(--blue-mist); }

.cal__day--sel { background: var(--blue); border-color: var(--blue); color: #fff; }

.cal__day--blank { visibility: hidden; }
.cal__day--loading { opacity: .35; }

.cal__hint {
  margin: 18px 0 0;
  font-size: .84rem;
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Time slots
   -------------------------------------------------------------------------- */

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 9px;
}

.slot {
  padding: 13px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

.slot:hover { border-color: var(--blue); background: var(--blue-mist); }

.slot--sel { background: var(--blue); border-color: var(--blue); color: #fff; }

.slot small { display: block; font-size: .74rem; opacity: .68; }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.fields .full { grid-column: 1 / -1; }

.fields label,
.sign {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fields input,
.fields textarea,
.sign input {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.fields input:focus,
.fields textarea:focus,
.sign input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 151, 184, .15);
}

.fields textarea { resize: vertical; }

.field-bad input,
.field-bad textarea { border-color: #cf9a90; background: var(--blush-pale); }

.req { color: var(--blush); }

/* --------------------------------------------------------------------------
   Contract
   -------------------------------------------------------------------------- */

.summary {
  margin-bottom: 26px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue-mist);
  font-size: .93rem;
}

.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; }
.summary dt { color: var(--ink-faint); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.summary dd { margin: 0; }

.contract__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: .04em;
}

.contract {
  max-height: 260px;
  overflow-y: auto;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 18px;
  font-size: .93rem;
  color: var(--ink);
  cursor: pointer;
}

.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--blue); flex: none; }

.sign input {
  font-family: var(--display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--blue-deep);
}

.sign__note { margin: 10px 0 0; font-size: .78rem; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Confirmation
   -------------------------------------------------------------------------- */

.done { text-align: center; padding: 20px 0 10px; }

.done__mark {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--blue);
  color: var(--blue-dk);
  background: var(--blue-mist);
}

.done__mark::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--blush);
}

.done h3 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: .03em;
}

.done p { margin: 0 0 14px; color: var(--ink-soft); }

.done__ref {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.done__ref strong { color: var(--ink); letter-spacing: .2em; }

.done__next { font-size: .92rem; font-style: italic; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: 38px; max-width: 480px; margin: 0 auto; }
  .about__body .section-title { justify-content: center; }
  .about__body .section-title::before { display: block; }
  .about__text { text-align: center; }
}

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; gap: 28px; max-width: 400px; }

  .sessions { padding: 74px 0 66px; }
  .about    { padding: 56px 0 76px; }
  .cta      { padding: 72px 0 80px; }

  .section-title { gap: 14px; letter-spacing: 0; }
  .section-title::before,
  .section-title::after { width: 28px; }

  .card__cta { opacity: 1; transform: none; }

  .sheet { padding: 0; align-items: flex-end; }

  .sheet__panel {
    max-width: none;
    max-height: 94svh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .sheet__head { padding: 24px 20px 0; }
  .sheet__body { padding: 22px 20px; }
  .sheet__foot { padding: 15px 20px; }

  .steps { font-size: .58rem; letter-spacing: .08em; }

  .fields { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Enquiry form
   -------------------------------------------------------------------------- */

.enquiry { max-width: 660px; margin: 0 auto; text-align: left; }

.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.enquiry__grid .full { grid-column: 1 / -1; }

.enquiry label {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.enquiry input,
.enquiry select,
.enquiry textarea {
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}

.enquiry textarea { resize: vertical; }

.enquiry input:focus,
.enquiry select:focus,
.enquiry textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(124, 151, 184, .15);
}

.enquiry label.is-bad input,
.enquiry label.is-bad textarea { border-color: #cf9a90; background: var(--blush-pale); }

/* The honeypot must be reachable by a bot but never by a person. */
.enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__msg {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--blue-mist);
  color: var(--ink-soft);
  font-size: .93rem;
}

.enquiry__msg.is-bad { background: var(--blush-pale); color: #8d4438; }

.enquiry__alt { margin: 22px 0 0; font-size: .88rem; color: var(--ink-faint); }
.enquiry__alt a { color: var(--blue-dk); }

@media (max-width: 600px) {
  .enquiry__grid { grid-template-columns: 1fr; }
}

/* Sign-in entry points ------------------------------------------------- */
.hero__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: flex-end;
  padding: 20px 26px;
}
.hero__login {
  font-family: var(--sans); font-size: .74rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: rgba(255, 255, 255, .82);
  padding: 9px 20px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(3px);
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.hero__login:hover, .hero__login:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
}
.site-foot__sep { opacity: .4; margin: 0 5px; }
.site-foot__quiet { color: rgba(255, 255, 255, .5); text-decoration: none; }
.site-foot__quiet:hover { color: rgba(255, 255, 255, .85); }
@media (max-width: 620px) { .hero__bar { padding: 14px 16px; } }

/* Site menu ------------------------------------------------------------
   Transparent over the hero photograph, solid once the page scrolls past it.
   The bar is fixed rather than sticky so the change of state happens without
   the layout shifting underneath it. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--paper); color: var(--blue-deep);
  padding: 12px 20px; font-family: var(--sans); font-size: .85rem;
}
.skip-link:focus { left: 8px; top: 8px; }

.sitenav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 18px 0;
}
.sitenav__wrap {
  max-width: var(--wrap); margin: 0 auto; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.sitenav__brand {
  font-family: var(--display); font-size: 1.18rem; font-weight: 400;
  letter-spacing: .04em; text-decoration: none; color: #fff;
  transition: color .3s ease; white-space: nowrap;
}
.sitenav__links { display: flex; align-items: center; gap: 30px; }
.sitenav__links a {
  font-family: var(--sans); font-size: .78rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: rgba(255, 255, 255, .86); transition: color .25s ease;
}
.sitenav__links a:hover { color: #fff; }

.sitenav__cta {
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 100px; padding: 9px 20px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.sitenav__cta:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }

/* Scrolled past the hero: ink on paper. */
.sitenav.is-solid {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(58, 69, 82, .06);
  padding: 12px 0;
}
.sitenav.is-solid .sitenav__brand { color: var(--blue-deep); }
.sitenav.is-solid .sitenav__links a { color: var(--ink-soft); }
.sitenav.is-solid .sitenav__links a:hover { color: var(--blue-dk); }
.sitenav.is-solid .sitenav__cta { border-color: var(--blue); color: var(--blue-dk); }
.sitenav.is-solid .sitenav__cta:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Hamburger — three lines that become a cross when open. */
.sitenav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 34px; padding: 8px; position: relative;
}
.sitenav__toggle span {
  display: block; height: 1.5px; width: 100%; background: #fff;
  margin: 4px 0; border-radius: 2px;
  transition: transform .28s ease, opacity .22s ease, background-color .3s ease;
}
.sitenav.is-solid .sitenav__toggle span { background: var(--ink); }
.sitenav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sitenav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sitenav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 780px) {
  .sitenav__toggle { display: block; }
  .sitenav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    box-shadow: 0 14px 38px rgba(58, 69, 82, .12);
    max-height: 0; overflow: hidden;
    transition: max-height .32s ease;
  }
  .sitenav__links.is-open { max-height: 340px; }
  .sitenav__links a {
    color: var(--ink) !important;
    padding: 17px 26px; border-bottom: 1px solid var(--line);
    letter-spacing: .1em;
  }
  .sitenav__cta {
    border: 0 !important; border-radius: 0 !important;
    color: var(--blue-dk) !important; padding: 17px 26px !important;
  }
  .sitenav, .sitenav.is-solid { padding: 12px 0; }
  .sitenav:not(.is-solid) { background: rgba(58, 69, 82, .28); }
}

/* Anchored sections need clearance so the fixed bar does not cover
   their headings when jumped to. */
.sessions, .about, .cta { scroll-margin-top: 78px; }

@media (prefers-reduced-motion: reduce) {
  .sitenav, .sitenav__links, .sitenav__toggle span { transition: none; }
}

/* Portfolio strip on the front page ------------------------------------- */
.work { padding: 92px 0; background: var(--blue-mist); }
.work__strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px;
}
.work__cell {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); background: var(--blue-pale);
}
.work__cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.work__cell:hover img { transform: scale(1.05); }
.work__more { text-align: center; margin-top: 34px; }

@media (max-width: 860px) { .work__strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .work__strip { grid-template-columns: repeat(2, 1fr); } .work { padding: 64px 0; } }

/* Sub-pages (portfolio, shop) ------------------------------------------- */
.subpage { background: var(--cream); }
.subpage__main { padding: 122px 0 90px; min-height: 70vh; }
.subpage__head { text-align: center; margin-bottom: 44px; }
.subpage__foot { text-align: center; margin-top: 64px; }
.subpage__foot .cta__copy { margin-bottom: 18px; }
.subpage__foot .btn-quiet { margin-left: 10px; }

/* Portfolio page -------------------------------------------------------- */
.pf-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 44px;
}
.pf-filter a {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding: 9px 19px; border: 1px solid var(--line); border-radius: 100px;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.pf-filter a:hover { border-color: var(--blue); color: var(--blue-dk); }
.pf-filter a.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.pf-wall { columns: 3; column-gap: 16px; }
.pf-cell { break-inside: avoid; margin: 0 0 16px; }
.pf-cell img {
  width: 100%; display: block; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pf-cell figcaption {
  font-family: var(--sans); font-size: .8rem; color: var(--ink-soft);
  margin-top: 8px; text-align: center;
}
@media (max-width: 900px) { .pf-wall { columns: 2; } }
@media (max-width: 560px) { .pf-wall { columns: 1; } .subpage__main { padding: 96px 0 64px; } }

/* Shop ------------------------------------------------------------------ */
.shop__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}
.shop__item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 8px;
}
.shop__item h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem;
  color: var(--blue-deep); margin: 0;
}
.shop__desc { font-size: .87rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.shop__price {
  font-family: var(--display); font-size: 1.45rem; color: var(--ink); margin: 4px 0 0;
}
.shop__pick { font-size: .8rem; color: var(--ink-soft); display: block; margin-top: 6px; }
.shop__pick select { width: 100%; margin-top: 5px; }
.shop__pick select[aria-invalid="true"] { border-color: var(--blush); }
.shop__add { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.shop__add input { width: 70px; }
.shop__add .btn-quiet { flex: 1; }

.shop__hint, .shop__ref { font-size: .87rem; color: var(--ink-soft); margin-top: 22px; text-align: center; }

.shop__basket, .shop__you {
  margin-top: 44px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px;
}
.shop__basket h2, .shop__you h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.35rem;
  color: var(--blue-deep); margin: 0 0 16px;
}
.shop__lines { list-style: none; margin: 0; padding: 0; }
.shop__lines li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.shop__lines li:last-child { border-bottom: 0; }
.shop__remove {
  background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  font-size: 1.1rem; line-height: 1; padding: 0 0 0 10px;
}
.shop__remove:hover { color: var(--blush); }
.shop__total {
  display: flex; justify-content: space-between;
  font-family: var(--display); font-size: 1.3rem; color: var(--ink);
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.shop__error {
  background: var(--blush-pale); border-left: 3px solid var(--blush);
  padding: 14px 18px; margin-bottom: 26px; font-size: .9rem; color: var(--ink);
}
.hp { position: absolute; left: -9999px; }


/* Hero layout on small screens ------------------------------------------
   Side by side needs width. Below this the two columns stack and centre,
   with the portrait above the logo — a face is a better first thing to
   meet than a wordmark. */
@media (max-width: 820px) {
  .hero__inner,
  .hero__inner--solo {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 30px;
  }
  .hero__text { max-width: 100%; }
  .hero__logo { margin-left: auto; margin-right: auto; }
  .hero__intro { margin-left: auto; margin-right: auto; }
  .hero__avatar { order: -1; width: clamp(120px, 34vw, 170px); height: clamp(120px, 34vw, 170px); }
}