/* ==========================================================================
   KAYANTARAN – services.css
   Styles used only by services.html. Shared components live in site.css.

   .services-hero   hero spacing + .service-index (in-page links to the three)
   .service         one service band; --interiors, --architecture, --landscape
                    each lay the same parts out differently
   .deliverables    "What you get" list (rows; --grid two-up; --row four-up)
   .audience        "Who we work with": two offset columns, each with a photograph
   .run             "How a project runs": column counts for .process--columns
   .questions       heading + .faq (<details> accordion)
   ========================================================================== */


/* HERO + INDEX ============================================================= */

.services-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* <nav class="service-index"><ol class="service-index__list">
     <li><a class="service-index__link" href="#interiors">
       <span class="service-index__num">01</span>
       <span class="service-index__name">Interior design</span></a></li>
   </ol></nav> */
.service-index { grid-column: 1 / -1; min-width: 0; }
.service-index__list { display: grid; border-bottom: 1px solid var(--hairline-strong); }
.service-index__list > li { border-top: 1px solid var(--hairline-strong); }
.service-index__link {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: .5rem;
  padding-block: .95rem;
  text-decoration: none;
  transition: color .35s var(--ease);
}
.service-index__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.2;
  color: var(--accent-ink);
  font-variant-numeric: lining-nums;
}
.service-index__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}
.service-index__link::after {
  content: "";
  align-self: center;
  width: .75rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M6 0v18.5M1 13.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M6 0v18.5M1 13.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .45s var(--ease-out);
}
.service-index__link:hover { color: var(--accent-ink); }
.service-index__link:hover::after { transform: translateY(.3rem); }

@media (min-width: 720px) {
  .service-index__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    border-bottom: 0;
  }
  .service-index__link { padding-block: 1.1rem .5rem; }
}


/* SERVICE BANDS ============================================================ */

/* Parts shared by the three bands:
   <section class="section service service--…" id="…">
     .service__head   .service__num (large numeral) + h2.service__title (+ .lead)
     .service__for    h3.eyebrow + .service__for-text
     .service__get    h3.eyebrow + ul.deliverables
     .service__photo  figure > .media + .caption

   Landing position for #interiors, #architecture, #landscape: site.css
   already keeps anchors clear of the fixed header (html scroll-padding-top:
   header + 1rem). The margin below pulls the target up by the band's own top
   padding, so the numeral lands 2rem under the header rather than the band's
   empty padding. --pad-top is never less than header + 2rem, so the band
   itself always reaches the top of the screen. */
.service {
  --pad-top: max(var(--section-y), calc(var(--header-h) + 2rem));
  padding-top: var(--pad-top);
  scroll-margin-top: calc(1rem - var(--pad-top));
}

.service__num {
  display: block;
  margin-left: -.03em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 3.5rem + 11vw, 13rem);
  font-style: italic;
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
  -webkit-user-select: none;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .service__num--outline { color: transparent; -webkit-text-stroke: 1px var(--accent); }
}
.service__head > .service__title { margin-top: clamp(1rem, 2vw, 1.75rem); }
.service__head > .lead { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.service__for .eyebrow,
.service__get .eyebrow { margin-bottom: 1.1rem; }
.service__for-text {
  max-width: 33rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: pretty;
  text-wrap: balance;
}
.service__photo,
.service__second { margin: 0; }


/* "What you get" ----------------------------------------------------------- */

/* <ul class="deliverables" role="list"><li>…</li></ul>
   Default: hairline rows with a short accent dash.
   --grid: two columns from 600px. --row: two, then four from 1000px. */
.deliverables { border-bottom: 1px solid var(--hairline); }
.deliverables > li {
  position: relative;
  padding: .95rem 0 .95rem 2.25rem;
  border-top: 1px solid var(--hairline);
  text-wrap: pretty;
}
.deliverables > li::before {
  content: "";
  position: absolute;
  top: calc(.95rem + .82em);
  left: 0;
  width: 1.25rem;
  height: 1px;
  background: var(--accent);
}

.deliverables--grid,
.deliverables--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  border-bottom: 0;
}
.deliverables--grid > li,
.deliverables--row > li {
  padding: 1.15rem 0 clamp(1.5rem, 3vw, 2.5rem);
  border-top-color: var(--hairline-strong);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.4;
}
.deliverables--grid > li::before,
.deliverables--row > li::before {
  top: -1px;
  width: 2.5rem;
}
@media (min-width: 600px) {
  .deliverables--grid,
  .deliverables--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deliverables--grid > li,
  .deliverables--row > li { padding-right: 1rem; }
}
@media (min-width: 1000px) {
  .deliverables--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 01 Interior design: text beside two photographs --------------------------- */

.service--interiors { --pad-top: clamp(2.5rem, 6vw, 5rem); }

/* Narrow screens read head, first photograph, body, second photograph. The
   two column wrappers dissolve so their children can be ordered that way. */
.service__split { display: flex; flex-direction: column; gap: clamp(2.5rem, 7vw, 3.5rem); }
.service__col { display: contents; }
.service__split .service__head { order: 1; }
.service__split .service__photo { order: 2; width: min(86%, 24rem); }
.service__split .service__body { order: 3; }
.service__split .service__second { order: 4; width: min(100%, 32rem); margin-left: auto; }
.service__body { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }

@media (min-width: 900px) {
  .service__split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }
  .service__col { display: block; min-width: 0; grid-row: 1; }
  .service__col--text { grid-column: 7 / -1; }
  .service__col--media { grid-column: 1 / span 5; }
  .service__split .service__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .service__split .service__photo { width: 88%; }
  .service__split .service__second {
    width: 78%;
    margin-top: clamp(2rem, 4vw, 3.5rem);
  }
}


/* 02 Architecture: type only, on the dark band ------------------------------ */

.service__statement {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
/* .service__note: a short aside under the statement.
   <div class="service__note"><h3 class="eyebrow eyebrow--rule">…</h3><p>…</p></div> */
.service__note { max-width: 37rem; margin-top: clamp(2rem, 4vw, 3.25rem); }
.service__note .eyebrow { margin-bottom: 1rem; color: var(--accent-ink); }
.service__note p {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.service__note abbr { text-decoration: none; }
.service__details {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  /* Sit the statement's first line level with the top of the numeral. */
  .service--architecture .service__intro { padding-top: .5rem; }
}


/* 03 Landscape: text, then a photograph on the right ----------------------- */

.service__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(2.5rem, 7vw, 3.5rem);
}
.service__layout > * { grid-column: 1 / -1; min-width: 0; }
.service--landscape .service__get { margin-top: clamp(3rem, 7vw, 5.5rem); }

@media (min-width: 900px) {
  .service__layout { row-gap: clamp(2.5rem, 4vw, 3.5rem); }
  .service__layout .service__head { grid-column: 1 / span 6; grid-row: 1; }
  .service__layout .service__for { grid-column: 1 / span 6; grid-row: 2; }
  .service__layout .service__photo { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: end; }
}


/* WHO WE WORK WITH ========================================================= */

/* <div class="audience__grid">
     <div class="audience__item">
       <div> h3.audience__title + p.audience__text + p.audience__more > a.link-arrow </div>
       <figure class="audience__figure"> .media + .caption </figure>
     </div>
   </div> */
.audience__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(3rem, 8vw, 4.5rem) var(--grid-gap);
  align-items: start;
}
.audience__item {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--hairline-strong);
}
.audience__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.audience__text {
  max-width: 34rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.audience__more { display: flex; margin-top: clamp(1.5rem, 3vw, 2rem); }
.audience__figure { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.audience__item:first-child .audience__figure { width: min(86%, 24rem); }

@media (min-width: 720px) {
  .audience__item { grid-column: span 6; }
  .audience__item:first-child .audience__figure { width: auto; }
}
@media (min-width: 900px) {
  .audience__item:first-child { grid-column: 1 / span 5; }
  .audience__item:first-child .audience__figure { width: 88%; }
  .audience__item + .audience__item { grid-column: 7 / -1; margin-top: clamp(3rem, 7vw, 7rem); }
}


/* HOW A PROJECT RUNS ======================================================= */

/* Five steps. .process--columns fits as many as it can per row, which would
   strand the fifth; these set three over two, then all five in a line. */
.run .process-step__title { font-variant-numeric: lining-nums; text-wrap: balance; }
@media (min-width: 720px) {
  .run .process--columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .run .process-step { grid-column: span 2; align-content: start; }
  .run .process-step:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1200px) {
  .run .process--columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .run .process-step,
  .run .process-step:nth-child(n + 4) { grid-column: auto; }
  .run .process-step__title { font-size: clamp(1.625rem, 1rem + .85vw, 1.875rem); }
}


/* QUESTIONS ================================================================ */

/* <div class="faq">
     <details class="faq__item">
       <summary class="faq__q">
         <h3 class="faq__q-text">Question?</h3>
         <span class="faq__icon" aria-hidden="true"></span>
       </summary>
       <div class="faq__a"><p>Answer.</p></div>
     </details>
   </div> */
@media (min-width: 900px) {
  .questions__title { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.faq { border-bottom: 1px solid var(--hairline-strong); }
.faq__item { border-top: 1px solid var(--hairline-strong); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  list-style: none;
  cursor: pointer;
  transition: color .35s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-ink); }
.faq__q-text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.faq__icon {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--fg);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .875rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease-out);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%); }
.faq__q:hover .faq__icon { border-color: var(--accent-ink); color: var(--accent-ink); }
.faq__item[open] .faq__icon,
.faq__item[open] .faq__q:hover .faq__icon { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.faq__a {
  max-width: 40rem;
  padding: 0 1rem clamp(1.5rem, 3vw, 2.25rem) 0;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.faq__a > * + * { margin-top: 1em; }
.faq__a a { color: var(--accent-ink); text-decoration: underline; transition: color .3s var(--ease); }
.faq__a a:hover { color: var(--fg); }

/* Opening and closing slide where the browser can animate to auto height.
   Elsewhere, and with reduced motion, the answer simply appears. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size .5s var(--ease-out), opacity .4s var(--ease), content-visibility .5s allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; opacity: 1; }
  }
}