/* ==========================================================================
   VIDA HOLDING PAGE
   Loads AFTER assets/css/site.css and only adds what the holding pages need.
   Prefix hold-, a fourth page system alongside cond-, tx- and tp-.
   Nothing in here is used by the main site build. Delete this folder to
   remove the holding page and nothing else has to be unpicked.
   ========================================================================== */

/* SECTION BLOCKS
   A fourth page system, alongside cond-, tx- and tp-. It exists because the
   holding page has to say three things the homepage has no shape for: the
   six areas as plain reading rather than a routing track, the credentials,
   and what happens at a first visit. Everything else on this page is the
   site's own system, unchanged. Delete this block with the folder.
   ========================================================================== */

.hold-notice{
  grid-column: 9 / 13;
  margin-block-start: 26px;
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--dry-grass-t);
}

.hold-tel{
  grid-column: 1 / 8;
  margin-block-start: 22px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--dry-grass-t);
}
.hold-tel a{ color: inherit; text-decoration: none; transition: color 220ms ease; }
.hold-tel a:hover{ color: var(--copper); }

/* The six areas. Two columns on desktop, hairline between rows. */
.hold-areas{
  margin-block-start: 76px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 96px;
  list-style: none;
  margin-block-end: 0;
  padding-block: 0;
}
.hold-area{
  padding-block: 30px;
  border-block-start: 1px solid var(--hair-soft);
}
.hold-area__name{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.18;
  color: var(--canyon-sage);
}
.hold-area__note{
  margin-block-start: 12px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--dry-grass-t);
}

/* THE TWO PICTURE SECTIONS · one system, not two.
   Rebecca, 19 September: the photograph and the text beside it have to look
   like they belong together.

   Matching the two pictures by ASPECT RATIO did not do that, because the
   column of text next to each one is a different height again. The fix is
   to stop setting a ratio at all and let the photograph take the height of
   the row. Both columns then start on the same line and finish on the same
   line, whatever the text does and whatever the window is. The picture is
   sized by its neighbour, not by a number picked in advance.

   Five columns of photograph, six of text, and they SIT NEXT TO EACH OTHER.
   Rebecca, 19 September: with an empty column between them they read as two
   separate things rather than one. The empty column moved to the outside.

   BOTH SECTIONS THEN RUN COLUMN 2 TO COLUMN 12, on the same two edges.
   The first visit photograph starts exactly where "One practitioner
   throughout your care" starts above it, and the first visit reading ends
   exactly where Vida's photograph ends. The photograph swaps sides between
   the two, so the page still zigzags, but the block itself never moves.
   Nothing in this block changes the main site. */
.vida{ align-items: stretch; }
.vida__text{ grid-column: 2 / 8; }
.vida__figure{
  grid-column: 8 / 13;
  position: relative;
  margin-block-start: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bone);
}
.vida__figure img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 22%;
}
.vida__h2{
  margin-block-start: 26px;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.1;
}
.vida__lead{ font-size: 20px; line-height: 1.58; max-width: 40ch; }
.vida__body{ font-size: 17.5px; max-width: 58ch; }

/* FONTS · local fallback, so the page never shows Georgia's figures.
   Rebecca, 19 September: the phone number looked crooked. It was Georgia,
   the fallback, which sets oldstyle figures where 4, 5, 7 and 9 drop below
   the baseline and 6 and 8 rise above it. Spectral's figures are lining and
   even, so the number is only ever crooked in the moment before the webfont
   arrives, or on a connection that cannot reach Google Fonts at all.
   Georgia has no lining set to switch to, so CSS cannot correct it.
   These are the subset files the first holding page shipped with, already in
   this folder, declared under their own names and slotted in AHEAD of
   Georgia. They are same origin, so they are there immediately. Google's
   Spectral and Newsreader still load and still win once they arrive. */
@font-face{
  font-family: "Spectral Local";
  src: url("/assets/fonts/spectral-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Spectral Local";
  src: url("/assets/fonts/spectral-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Newsreader Local";
  src: url("/assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 500; font-style: normal; font-display: swap;
}
:root{
  --serif-display: "Newsreader", "Newsreader Local", Georgia, "Times New Roman", serif;
  --serif-text:    "Spectral", "Spectral Local", Georgia, "Times New Roman", serif;
}
.hold-tel, .hold-foot, .hold-enquiry__tel{
  font-variant-numeric: lining-nums;
}

/* Credentials, left aligned in Vida's own column, beside her photograph. */
.hold-creds{
  margin-block-start: 38px;
  padding-block-start: 30px;
  border-block-start: 1px solid var(--hair-soft);
}
.hold-creds__label{
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}
.hold-creds__body{ margin-block-start: 22px; }
.hold-creds__body p{
  font-size: 16px;
  line-height: 1.66;
  color: var(--canyon-sage);
  max-width: 46ch;
  text-wrap: pretty;
}
.hold-creds__body p + p{ margin-block-start: 12px; }
.hold-creds__body ul{
  margin-block-start: 14px;
  padding-inline-start: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.hold-creds__body li{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dry-grass-t);
  padding-inline-start: 20px;
  position: relative;
}
.hold-creds__body li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  width: 9px;
  height: 1px;
  background: var(--copper);
}

/* The conditions intro sits UNDER its heading, not away in column 8.
   Rebecca, 19 September: the two lines were splitting across a narrow
   right hand column and reading as three fragments. */
.routes__head{ align-items: start; }
.routes__intro{
  grid-column: 1 / 7;
  margin-block-start: 20px;
  font-size: 17px;
}

/* The close is one centred column. Heading, one line, then the link
   directly beneath it. No second column to leave a hole in the middle. */
.close{
  margin-block-start: 120px;
  justify-items: center;
  text-align: center;
}
.close__h2{ grid-column: 1 / 13; }
.close__body{
  grid-column: 1 / 13;
  align-self: auto;
  margin-block-start: 20px;
  max-width: 44ch;
}
.close__actions{
  grid-column: 1 / 13;
  margin-block-start: 30px;
  justify-content: center;
}
/* site.css gives the close action 22px of side margin, for pages where two
   buttons sit beside each other. There is one button here, so that margin
   pushes it 22px left of the heading above it. Zero it. */
.close__actions .cta{ margin-inline: 0; }

/* What happens at a first visit. The exact mirror of the personal section:
   five column photograph on the left, six columns of reading beside it, top
   aligned and sitting against each other. */
.hold-visit{
  margin-block-start: 132px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: stretch;
}
.hold-visit__figure{
  grid-column: 2 / 7;
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bone);
}
.hold-visit__figure img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 45%;
}
/* The reading is pushed half an inch off the photograph. Rebecca,
   19 September. It is padding, not a column change, so the right hand edge
   stays locked to where Vida's photograph ends in the section above. */
.hold-visit__text{
  grid-column: 7 / 13;
  padding-inline-start: 48px;
}
.hold-visit__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.1;
  color: var(--canyon-sage);
  text-wrap: balance;
}
.hold-visit__list{
  margin-block-start: 34px;
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  gap: 24px;
}
.hold-visit__list li{
  font-size: 17.5px;
  line-height: 1.64;
  color: var(--canyon-sage);
  max-width: 60ch;
  text-wrap: pretty;
  padding-inline-start: 24px;
  position: relative;
}
.hold-visit__list li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--copper);
}

/* ---- THREE MOBILE FIXES · Rebecca, 19 September -------------------------

   1 · THE SEND BUTTON WENT BLUE ON AN IPHONE. .cta sets background:none and
   border:0 but never resets the control's own appearance, so iOS painted its
   system button behind the word. Every other .cta on the site is an <a>, so
   this only ever showed on the one <button> on the site, the enquiry form's
   Send. Reset appearance outright and pin the colours.

   2 · THE CLOSE ACTION SAT LEFT INSIDE A CENTRED SECTION. site.css turns
   every .cta into display:block at max-content width on a phone, which left
   aligns it. The site already solves this the same way on the thanks page:
   margin-inline auto. Same fix here.

   3 · NO MENU BUTTON. The holding page's nav is one link. A "Menu" that
   opens a panel holding a single item is not a menu, so the link itself
   shows at every width and the toggle and its panel never appear.
   ------------------------------------------------------------------------ */

button.cta{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  background-image: none;
  border-radius: 0;
  color: var(--canyon-sage);
  -webkit-tap-highlight-color: transparent;
}
button.cta:hover{ color: var(--copper); }

.nav{ display: flex; }
.nav__toggle{ display: none; }
.nav__panel{ display: none; }

/* ---- FOOTER · rebuilt for this page ------------------------------------
   The live footer is a 12 column row: lockup, practitioner line, menu. Take
   the menu out, as this page must, and the row collapses to a lockup stuck
   in the left three columns with a long pipe separated string underneath.
   That is what was cramped.
   So the holding footer is centred, under a centred close. The lockup takes
   its primary stacked form, wordmark over Copper rule over descriptor, the
   same shape as the entrance, instead of the horizontal one that only works
   with something beside it. The details break onto their own lines. */
.foot{
  margin-block-start: 150px;
  display: block;
  text-align: center;
  padding-block-end: 76px;
}
.foot__lockup{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.foot__word{ font-size: 30px; line-height: 1; }
.foot__rule{
  display: block;
  width: 34px;
  height: 1px;
  background: var(--copper);
  margin: 15px auto 13px;
}
.foot__descriptor{
  font-size: 9px;
  letter-spacing: 0.28em;
  margin-inline-end: -0.28em;
  white-space: nowrap;
}

.hold-foot{
  margin-block-start: 44px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--hair-soft);
  max-width: 44ch;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.hold-foot p{
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--dry-grass-t);
}
.hold-foot span{ color: var(--sandstone); padding-inline: 8px; }
.hold-foot a{
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.hold-foot a:hover{ color: var(--copper); border-block-end-color: var(--copper); }
.hold-foot__continuity{ margin-block-start: 6px; }



/* ==========================================================================
   MOBILE · composed for the screen, not collapsed from the desktop grid
   ========================================================================== */

@media (max-width: 900px){

  /* The six areas run as one column. */
  .hold-areas{
    margin-block-start: 44px;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .hold-area{ padding-block: 24px; }
  .hold-area__note{ font-size: 15.5px; }

  .hold-notice, .hold-tel{ margin-block-start: 20px; }
  .routes__intro{ margin-block-start: 16px; font-size: 16.5px; }

  /* Stacked, so there is no neighbouring column to match. Both photographs
     go full width in the same 4 by 5 frame, so the pair still match. */
  .vida__figure,
  .hold-visit__figure{ position: static; }
  .vida__figure img,
  .hold-visit__figure img{ position: static; height: auto; aspect-ratio: 4 / 5; }

  .vida__figure{ margin-block-start: 34px; }
  .vida__h2{ font-size: clamp(28px, 8vw, 36px); margin-block-start: 20px; }
  .vida__lead{ font-size: 17.5px; max-width: none; }
  .vida__body{ font-size: 16.5px; max-width: none; }

  .hold-creds{ margin-block-start: 32px; padding-block-start: 26px; }
  .hold-creds__body{ margin-block-start: 20px; }
  .hold-creds__body p{ font-size: 16.5px; max-width: none; }

  /* Stacked, the source order would put the first visit photograph directly
     under the personal section's photograph, two pictures back to back with
     no reading between them. On a phone the text leads in BOTH sections, so
     the page alternates text, picture, text, picture all the way down.
     Rebecca, 19 September. */
  .hold-visit{
    margin-block-start: 76px;
    display: flex;
    flex-direction: column;
  }
  .hold-visit__text{ order: 1; margin-block-start: 0; padding-inline-start: 0; }
  .hold-visit__figure{ order: 2; margin-block-start: 34px; }
  .hold-visit__h2{ font-size: clamp(28px, 8vw, 36px); }
  .hold-visit__list{ margin-block-start: 26px; gap: 20px; }
  .hold-visit__list li{ font-size: 16.5px; max-width: none; }

  .close{ margin-block-start: 84px; }
  .close__body{ max-width: none; }
  .close__actions .cta{ margin-inline: auto; }

  /* The one link stays in the masthead at phone width. */
  .nav{ display: flex; }
  .nav__toggle, .nav__panel{ display: none; }

  .foot{ margin-block-start: 92px; padding-block-end: 64px; }
  .foot__word{ font-size: 26px; }
  .foot__descriptor{ font-size: 8px; letter-spacing: 0.22em; margin-inline-end: -0.22em; }
  .hold-foot{ margin-block-start: 36px; padding-block-start: 24px; max-width: none; gap: 11px; }
  .hold-foot p{ font-size: 13px; }
}

/* ---- CONTACT AND THANKS ------------------------------------------------
   The enquiry form, carried over from the first holding page unchanged in
   behaviour: same Netlify form name, same honeypot, same action. Only the
   surround is new, so the three pages agree. */

.hold-sheet{
  padding: calc(var(--strip) + 54px) var(--pad) 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
}

.hold-enquiry{ grid-column: 1 / 6; }

.hold-enquiry__h1{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}
.hold-enquiry__intro{
  margin-block-start: 26px;
  max-width: 38ch;
  font-size: 17.5px;
  line-height: 1.64;
  color: var(--canyon-sage);
}
.hold-enquiry__tel{
  margin-block-start: 22px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--dry-grass-t);
}
.hold-enquiry__tel a{ color: inherit; text-decoration: none; transition: color 220ms ease; }
.hold-enquiry__tel a:hover{ color: var(--copper); }

.hold-form{ grid-column: 8 / 13; }

.hold-field{ margin-block-end: 34px; }
.hold-field label{
  display: block;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
  margin-block-end: 10px;
}
.hold-field input,
.hold-field textarea{
  display: block;
  width: 100%;
  font-family: var(--serif-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--canyon-sage);
  background: none;
  border: 0;
  border-block-end: 1px solid var(--hair);
  border-radius: 0;
  padding: 6px 0 10px;
  transition: border-color 220ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.hold-field textarea{ resize: vertical; min-height: 118px; }
.hold-field input:hover,
.hold-field textarea:hover{ border-block-end-color: var(--sandstone); }
.hold-field input:focus,
.hold-field textarea:focus{ outline: none; border-block-end-color: var(--copper); }
.hold-field__opt{
  font-family: var(--serif-text);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.hold-hp{ position: absolute; left: -9999px; }
.hold-send{ margin-block-start: 6px; }

/* Thanks */
.hold-thanks{
  padding: calc(var(--strip) + 96px) var(--pad) 0;
  text-align: center;
}
.hold-thanks__h1{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}
.hold-thanks__body{
  margin-block-start: 24px;
  max-width: 40ch;
  margin-inline: auto;
  font-size: 17.5px;
  line-height: 1.64;
  color: var(--canyon-sage);
}
.hold-thanks .cta{ margin-block-start: 44px; }

@media (max-width: 900px){
  .hold-sheet{ display: block; padding-block-start: 128px; }
  .hold-enquiry__intro{ max-width: none; font-size: 16.5px; }
  .hold-form{ margin-block-start: 46px; }
  .hold-field{ margin-block-end: 28px; }
  .hold-field input,
  .hold-field textarea{ font-size: 16px; }

  .hold-thanks{ padding-block-start: 140px; }
  .hold-thanks__body{ max-width: none; font-size: 16.5px; }
}