/* Lissa Barquero — site stylesheet
   Palette and type modeled on the original Squarespace design:
   white ground, near-black ink, letterspaced caps labels, black rectangular buttons.
   Original typeface: Halyard Display (Adobe). Stand-in: Figtree (Google). */

/* Self-hosted Figtree and Playfair Display (SIL Open Font License), latin and
   latin-ext subsets of the Google Fonts variable files. Served from our own
   origin so the first paint does not wait on two third party connections. */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #272727;
  --ink-soft: #3e3e3e;
  --ground: #ffffff;
  --ground-alt: #f6f6f6;
  --line: #e3e3e3;
  --font: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--ground);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* a <picture> only chooses the file; the img inside stays the layout box, so
   grid and flex rules written for the img keep applying */
picture { display: contents; }
/* with the picture gone from layout its <source> would become a grid item of
   its own and push the img into a second row */
picture > source { display: none; }

a { color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }

/* ---------- header ---------- */

.site-header { padding: 28px 0 18px; border-bottom: 1px solid var(--line); }

.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo cta" "nav cta";
  align-items: center;
  row-gap: 14px;
}

.wordmark {
  grid-area: logo;
  justify-self: center;
  grid-column: 1 / -1;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav { grid-area: nav; grid-column: 1 / -1; justify-self: center; display: flex; gap: 34px; }

.site-nav a {
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 30px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s ease;
}

.btn:hover { opacity: 0.78; }

.header-cta { position: absolute; top: 24px; right: 4vw; }

@media (max-width: 860px) {
  .header-cta { display: none; }
  .site-header .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .site-nav { flex-wrap: wrap; justify-content: center; gap: 12px 22px; width: 100%; }
  .site-nav a { font-size: 13px; }
  .wordmark { font-size: 17px; letter-spacing: 0.2em; }
}

/* ---------- hero (homepage) ---------- */

/* Height is deliberately fixed on desktop so the photo and the booking CTA both
   sit above the fold. Without it the portrait photo's aspect ratio sets the row
   height and pushes the CTA off screen. The image crops via object-fit instead. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 861px) {
  .hero {
    height: calc(100svh - 120px);
    min-height: 560px;
    max-height: 860px;
    /* pin the row to the container, otherwise the portrait photo's intrinsic
       ratio sizes the row and the text column overflows past the fold */
    grid-template-rows: 100%;
  }
  .hero-left, .hero-img { min-height: 0; }
}

.hero-left { display: flex; flex-direction: column; }

.hero-intro { padding: clamp(28px, 5vh, 64px) clamp(28px, 5vw, 72px); }

.hero-band { background: var(--ground-alt); padding: clamp(26px, 4vh, 48px) clamp(28px, 5vw, 72px); flex: 1; display: flex; flex-direction: column; justify-content: center; }

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

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-img { order: -1; max-height: 70vh; }
}

/* ---------- sections ---------- */

section { padding: 90px 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

h1, h2 { font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; }

h1 { font-size: clamp(34px, 4.5vw, 52px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 24px; font-weight: 400; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7vw;
  align-items: center;
}

.two-col.flip > .col-img { order: -1; }

@media (max-width: 860px) {
  .two-col, .two-col.flip { grid-template-columns: 1fr; gap: 44px; }
  .two-col.flip > .col-img { order: 0; }
}

.stack > * + * { margin-top: 22px; }

.center { text-align: center; }

.band { background: var(--ground-alt); }

.band-dark { background: #000; color: #fff; }

/* ---------- brand logos ---------- */

/* The source logos are screenshots with different canvases and padding, so they
   are trimmed to their ink (assets/images/logos, transparent PNGs) and each is
   given an identical box here. object-fit keeps every mark inside the same
   optical area whether it is a stacked lockup or a long wordmark. */
.logo-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 42px 40px;
  align-items: center;
  justify-items: center;
  margin-top: 54px;
}

.logo-row img {
  opacity: .62;
  height: 38px;
  width: 100%;
  max-width: 148px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 780px) {
  .logo-row { grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
  .logo-row img { height: 30px; }
}

/* ---------- testimonials ---------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
  margin-top: 54px;
}

.testimonial p { font-size: 16px; }

.testimonial .who { margin-top: 18px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; line-height: 1.7; }

/* ---------- services ---------- */

.service { padding: 80px 0; border-top: 1px solid var(--line); }
.service:first-of-type { border-top: none; }

.service .whats-included { margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.whats-included summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.whats-included summary::after { content: "+"; font-size: 20px; font-weight: 300; }
.whats-included[open] summary::after { content: "\2212"; }

.whats-included ul { padding: 0 0 20px 20px; }
.whats-included li { margin-bottom: 8px; }

/* Group heading above a run of services. The service below it carries its own
   top rule, so this only needs the space. */
.service-group { padding: 76px 0 0; }

.service-group h2 { margin-bottom: 4px; }

/* Prices are public now, so every service states one. Sized between the body
   and the heading, in the page's own face, so it reads without shouting. */
.service .price { font-size: 21px; margin-top: 20px; }

.service .fine { font-size: 15px; color: var(--ink-soft); margin-top: 20px; }

.service .btn { margin-top: 26px; }

/* ---------- testimonial carousel ---------- */

.quote-carousel { max-width: 780px; margin: 0 auto; text-align: center; }

.qc-slides { display: grid; }

.qc-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.qc-slide.is-active { opacity: 1; pointer-events: auto; }

.qc-slide img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 26px;
}

.qc-quote { font-size: 19px; line-height: 1.7; }

.qc-slide .who { margin-top: 22px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; line-height: 1.7; }

.qc-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 38px; }

.qc-nav button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink);
  padding: 6px 10px;
  line-height: 1;
}

.qc-dots { display: flex; gap: 10px; }

.qc-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background .3s;
}

.qc-dots span.is-active { background: var(--ink); }

/* ---------- scroll reveal (Squarespace-style section fade) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.revealed { opacity: 1; transform: none; }
}

/* ---------- instagram ---------- */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 44px;
}

.ig-grid a { display: block; overflow: hidden; }

.ig-grid img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform .3s ease; }

.ig-grid a:hover img { transform: scale(1.04); }

@media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 70px 0 40px; font-size: 15px; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
}

@media (max-width: 780px) { .footer-cols { grid-template-columns: 1fr; } }

.footer-cols .footer-h { font-size: 15px; font-weight: 500; margin-bottom: 12px; }

.newsletter-form { display: flex; gap: 10px; margin-top: 16px; max-width: 440px; }

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  font-family: var(--font);
  font-size: 15px;
}

.newsletter-form .btn { padding: 14px 24px; }

.legal { margin-top: 54px; font-size: 12.5px; color: #757575; line-height: 1.7; }

/* ---------- about: the story ----------
   A magazine profile rather than a bio. Two faces and only two. Playfair carries
   the headline and the closing statement and nothing else on the page; Figtree
   carries everything in between, including the two emphasised lines and the
   three recognition lines. Someone who reads only the two serif moments still
   learns what she does and what is being offered, and that is the whole
   hierarchy. If a third size of serif ever shows up here, it is a bug. */

.about-open { padding: 84px 0 0; }

.about-open .wrap {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 68px;
  align-items: center;
}

/* a square portrait, not the full length frame the source is. The second
   photograph further down is the same woman in the same black blazer on the same
   pale stone, and at the same proportions the two read as one picture printed
   twice. Cropping the opening to the face and the seated torso makes the pair a
   portrait and then a look, which is the difference the page needs. */
.about-open-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* display moment one. The long sentence and its three word answer are one
   headline: no rule between them, no gap that would read as two headings, only
   a drop in size to about six tenths. Positive tracking, because Playfair at
   this size sets tight by default and the brief asks for air. */
.about-headline { letter-spacing: 0.008em; text-wrap: pretty; }

.about-headline .hl-lead,
.about-headline .hl-tail { display: block; }

/* the lead line takes the site's h1 size, which is the homepage headline's size,
   so the two pages open at the same pitch. It sets no font-size of its own on
   purpose: whatever h1 is, this is. */
.about-headline .hl-lead {
  line-height: 1.06;
}

.about-headline .hl-tail {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.18;
  margin-top: 0.4em;
}

.about-story { padding: 78px 0 104px; }

/* one reading column, the same one from the first line to the button. 63ch lands
   between the 55 and 75 the brief asks for at every width this page renders at */
.about-col { max-width: 63ch; margin: 0 auto; }

.about-col > p + p { margin-top: 26px; }

/* the only two emphasised lines in the body: the hook and the turn. Both stay in
   the body face and in the flow of their paragraph, because pulling either one
   out would break a paragraph the copy asks to keep whole. Real italics: the
   font request carries Figtree's italic axis so the browser never has to slant
   the roman itself. */
.about-col .about-mark {
  font-style: italic;
  font-weight: 500;
}

/* the turn. Held to the reading column exactly, so the photograph and the prose
   share an edge. The shift is carried by the change of shape and by the space
   above it rather than by stepping wider, which at this width reads as a
   misalignment rather than a move. */
.about-turn-img {
  max-width: 63ch;
  margin: 64px auto 60px;
}

/* held just off the source proportions rather than cropped to a band. This
   photograph is a full length look, blazer through ballet flats, so a band would
   cut the outfit in half and lose the point of it. 4:5 trims only stone off the
   top, and the narrower column keeps the height civil */
.about-turn-img img {
  width: 100%;
  /* height:auto is load bearing. Without it the img's own height attribute
     applies as a presentational hint and aspect-ratio never gets a say, which
     rendered this as a 3333px tall portrait */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center bottom;
}

/* the three recognition lines. They were three unmarked paragraphs, which read
   as a paragraph broken by accident rather than as a list of three doors. Each
   one now hangs off the same hairline the closing list on the homepage uses, so
   the shape is one the site already speaks, and the answer beneath them steps up
   in size and weight instead of sitting in the same voice. */
.about-recognise {
  list-style: none;
  margin-top: 58px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}

.about-recognise li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.about-recognise li:last-child { margin-bottom: 0; }

/* the hairline sits on the first line's optical centre rather than its top, so
   it reads as a marker and not as an underline that slipped */
.about-recognise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 18px;
  height: 1px;
  background: var(--ink-quiet);
}

/* Every rule below is scoped under .about-col on purpose. `.about-col > p + p`
   above scores 0,1,1, so a bare class rule at 0,1,0 loses to it and the margin
   silently reverts to 26px. That already happened once to the button. */
/* the answer to the three lines above it. It keeps the body face and the left
   edge of the text they hang from, and takes full ink and a step in size, which
   is the whole hierarchy: three conditions in grey, one reply in black. */
.about-col .about-been-there {
  margin-top: 30px;
  padding-left: 34px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* the close. The panel is the only shaded thing on the page, which is why it
   can be quiet: a change of ground is enough to mark an ending, and the column
   keeps its width so the page does not lurch sideways at the last moment. */
.about-col .about-close {
  margin-top: 66px;
  padding: 54px 40px 50px;
  background: var(--ground-alt);
  text-align: center;
}

/* display moment two, and the last one. Smaller than the headline, clearly
   larger than the body, same face. */
.about-col .about-final {
  margin: 0 auto;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.28;
  letter-spacing: 0.008em;
  max-width: 30ch;
}

.about-col .about-cta { margin-top: 32px; }

@media (max-width: 860px) {
  .about-open { padding-top: 40px; }
  .about-open .wrap { grid-template-columns: 1fr; gap: 34px; }
  /* the photograph leads on a phone, where the headline would otherwise open
     below the fold */
  .about-open-img { order: -1; }
  .about-story { padding: 54px 0 76px; }
  .about-turn-img { margin: 46px auto 42px; }
  /* the three lines wrap on a phone, so the gap between them has to grow or the
     rhythm reads as one block of text */
  .about-recognise li { margin-bottom: 22px; }
  .about-col .about-final { max-width: none; }
  .about-col .about-close { padding: 40px 24px 38px; }
}

/* ---------- misc ---------- */

.portrait { width: 100%; height: auto; }

.calendly-embed { min-height: 700px; margin-top: 40px; }