/* ==========================================================================
   HEKA — Services pages: index and single service (loaded after heka.css)
   Wrapper: <main class="sv-page">
   ========================================================================== */

.sv-page {
  --sv-paper:var(--hk-paper); --sv-ink:var(--hk-ink); --sv-muted:#68655f; --sv-accent:var(--hk-accent);
  --sv-line:rgba(12,12,12,.15); --sv-font:var(--hk-font-display);
  --sv-weight:600; --sv-em:normal; --sv-width:76rem;
  background:var(--sv-paper); color:var(--sv-ink); overflow:clip;
}
.sv-shell { width:100%; max-width:var(--sv-width); margin-inline:auto; padding-inline:clamp(1.25rem,4.5vw,4rem); }
.sv-display { font-family:var(--sv-font); font-weight:var(--sv-weight); letter-spacing:-.045em; line-height:1.03; }
.sv-accent,.sv-display em { color:var(--sv-accent); font-style:var(--sv-em); }
.sv-eyebrow { display:flex; align-items:center; gap:.65rem; font-size:.8rem; font-weight:500; letter-spacing:.01em; }
.sv-eyebrow::before { content:""; flex-shrink:0; width:.9rem; height:.28rem; background:var(--sv-accent); clip-path:polygon(0 0,92% 0,100% 100%,13% 100%); }
.sv-btn { display:inline-flex; align-items:center; justify-content:center; gap:2rem; border-radius:999px; padding:1rem 1.5rem; width:fit-content; font-size:.9rem; font-weight:500; transition:background .3s,color .3s; }
.sv-btn-dark { background:var(--sv-ink); color:white; }
.sv-btn-dark:hover { background:var(--sv-accent); }
.sv-btn span { transition:transform .3s; }
.sv-btn:hover span { transform:translate(3px,-3px); }
.sv-page :is(a,button,summary):focus-visible { outline:2px solid var(--sv-accent); outline-offset:5px; }
.sv-circle-arrow { display:grid; place-items:center; width:3rem; height:3rem; flex-shrink:0; border:1px solid var(--sv-line); border-radius:50%; font-size:1.15rem; transition:background .3s,color .3s,transform .3s; }
.sv-index-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; justify-content:space-between; gap:3rem; padding-top:10rem; padding-bottom:3.7rem; }
.sv-index-hero > :not(.sv-index-mesh) { position:relative; z-index:1; }
.sv-index-mesh { position:absolute; z-index:0; pointer-events:none; width:78%; height:27rem; right:5%; top:1rem; opacity:.8; mask-image:linear-gradient(to right,transparent,black 25%,black 78%,transparent); }
.sv-index-title { margin-top:1.6rem; font-size:clamp(4rem,7.9vw,7.6rem); }
.sv-index-intro { padding-bottom:.3rem; flex-shrink:0; max-width:26rem; }
.sv-index-intro > p { font-size:1rem; line-height:1.6; color:var(--sv-muted); }
.sv-scroll-link { display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; font-size:.78rem; }
.sv-scroll-link .sv-circle-arrow { width:2rem; height:2rem; font-size:.9rem; }
.sv-scroll-link:hover .sv-circle-arrow { background:var(--sv-ink); color:white; }
.sv-explorer { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; gap:clamp(2.5rem,5vw,5rem); padding-bottom:5.5rem; scroll-margin-top:6rem; }
.sv-explorer-visual { position:sticky; top:6.5rem; }
.sv-explorer-frame { position:relative; width:100%; aspect-ratio:1 / 1; border-radius:140px 18px 18px 18px; overflow:hidden; background:#dedbd5; isolation:isolate; }
.sv-explorer-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.07); transition:opacity .65s ease,transform 1.1s cubic-bezier(.16,1,.3,1); filter:saturate(.65); }
.sv-explorer-image.is-active { opacity:1; transform:scale(1); }
.sv-image-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.76)); pointer-events:none; }
.sv-image-caption { position:absolute; bottom:2rem; left:2rem; right:2rem; color:white; display:flex; flex-direction:column; gap:.85rem; }
.sv-image-index { font-size:3.7rem; font-family:var(--sv-font); line-height:1; letter-spacing:-.05em; }
.sv-image-index > span { font-family:var(--hk-font-text); letter-spacing:0; font-size:.75rem; opacity:.65; }
.sv-image-caption > span:last-child { max-width:24ch; font-size:.95rem; line-height:1.5; }
.sv-visual-foot { display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; font-size:.7rem; color:var(--sv-muted); }
.sv-list-label { display:flex; justify-content:space-between; color:var(--sv-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; padding:0 0 1.2rem; }
.sv-service-row { border-top:1px solid var(--sv-line); }
.sv-service-row:last-child { border-bottom:1px solid var(--sv-line); }
.sv-service-trigger { display:grid; grid-template-columns:1.8rem minmax(0,1fr) 1.6rem; align-items:center; gap:.9rem; padding:1.4rem 0; width:100%; text-align:left; cursor:pointer; }
.sv-row-number { font-size:.7rem; align-self:start; padding-top:.65rem; color:var(--sv-muted); }
.sv-service-trigger .sv-display { font-size:clamp(1.8rem,3.1vw,3rem); letter-spacing:-.035em; transition:color .3s,transform .3s; }
.sv-row-toggle { font-size:1.5rem; font-weight:300; text-align:right; color:var(--sv-muted); }
.sv-service-row.is-active .sv-display,.sv-service-row.is-active .sv-row-number,.sv-service-row.is-active .sv-row-toggle { color:var(--sv-accent); }
.sv-service-trigger:hover .sv-display { transform:translateX(4px); }
.sv-service-description { padding:0 2.4rem 1.8rem 2.7rem; }
.sv-service-description p { color:var(--sv-muted); font-size:.95rem; line-height:1.75; }
.sv-inline-link { display:inline-flex; align-items:center; gap:2rem; padding-bottom:.4rem; margin-top:1.3rem; border-bottom:1px solid var(--sv-ink); font-size:.8rem; font-weight:500; }
.sv-inline-link:hover { color:var(--sv-accent); border-color:var(--sv-accent); }
.sv-detail-hero { padding-top:8rem; }
.sv-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; font-size:.75rem; color:var(--sv-muted); }
.sv-breadcrumb a { color:var(--sv-ink); }
.sv-breadcrumb a:hover { color:var(--sv-accent); }
.sv-detail-composition { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(2rem,4.5vw,4.5rem); margin-top:3rem; padding-bottom:4rem; }
.sv-detail-copy { position:relative; z-index:1; padding-block:1rem; min-width:0; }
.sv-detail-title { font-size:clamp(2.5rem,4.2vw,4.4rem); margin-top:1.5rem; margin-bottom:1.8rem; overflow-wrap:break-word; }
.sv-detail-lead { max-width:35rem; font-size:1rem; line-height:1.85; color:var(--sv-muted); }
.sv-detail-copy .sv-btn { margin-top:2rem; }
.sv-detail-figure { position:relative; z-index:1; }
.sv-detail-photo { position:relative; width:100%; aspect-ratio:1 / 1; border-radius:18px 18px 140px 18px; overflow:hidden; background:#dedbd5; }
.sv-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.65); }
.sv-detail-figure figcaption { display:flex; align-items:center; gap:.7rem; margin-top:1.1rem; font-size:.75rem; color:var(--sv-muted); line-height:1.5; }
.sv-caption-line { flex-shrink:0; width:1.3rem; height:1px; background:var(--sv-accent); }
.sv-detail-ribbon { position:absolute; width:110%; height:30rem; top:0; right:-10%; pointer-events:none; opacity:.8; mask-image:linear-gradient(to right,transparent,black 20%,black 80%,transparent); }
.sv-overview { position:relative; display:grid; grid-template-columns:1fr 1.65fr; gap:clamp(2rem,7vw,7rem); padding-top:3.5rem; padding-bottom:5rem; }
.sv-overview::before { content:""; position:absolute; top:0; left:clamp(1.25rem,4.5vw,4rem); right:clamp(1.25rem,4.5vw,4rem); height:1px; background:var(--sv-line); }
.sv-overview-aside ul { margin-top:1.7rem; }
.sv-overview-aside li { font-family:var(--sv-font); font-size:clamp(1.3rem,2vw,1.8rem); letter-spacing:-.02em; padding:.55rem 0; }
.sv-overview-copy { display:flex; flex-direction:column; gap:1.5rem; }
.sv-overview-copy p { font-size:1.12rem; line-height:1.9; color:var(--sv-muted); }
.sv-contact { scroll-margin-top:6rem; padding-bottom:4rem; }
.sv-contact-panel { padding:clamp(1.6rem,4vw,3.5rem); border-radius:18px; background:#eeebe5; }
.sv-contact-top { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.sv-contact-top h2 { font-size:clamp(2.3rem,4.4vw,4.4rem); margin-top:1.3rem; line-height:1.08; }
.sv-contact-direct { display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; padding-bottom:.4rem; font-size:.95rem; }
.sv-contact-direct a:first-child { display:flex; gap:2rem; border-bottom:1px solid var(--sv-line); padding-bottom:.5rem; }
.sv-contact-direct a:last-child { font-size:.85rem; color:var(--sv-muted); }
.sv-contact-direct a:hover { color:var(--sv-accent); }
.sv-enquiry { border-top:1px solid var(--sv-line); margin-top:2.5rem; }
.sv-enquiry summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 0 0; cursor:pointer; list-style:none; font-size:.9rem; }
.sv-enquiry summary::-webkit-details-marker { display:none; }
.sv-enquiry-toggle { font-size:1.7rem; font-weight:300; transition:transform .3s; }
.sv-enquiry[open] .sv-enquiry-toggle { transform:rotate(45deg); }
.sv-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem 2rem; margin-top:2rem; padding-top:1rem; }
.sv-form label { font-size:.8rem; color:var(--sv-muted); }
.sv-form input,.sv-form textarea { display:block; width:100%; margin-top:.35rem; color:var(--sv-ink); background:transparent; border:0; border-bottom:1px solid rgba(12,12,12,.25); border-radius:0; padding:.8rem 0; outline:none; font:inherit; font-size:1rem; line-height:1.5; -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s; }
.sv-form input:focus,.sv-form textarea:focus { border-color:var(--sv-accent); box-shadow:0 1px 0 var(--sv-accent); }
.sv-form textarea { resize:vertical; }
.sv-form-wide { grid-column:1/-1; }
.sv-form-note { font-size:.75rem; color:var(--sv-muted); margin-top:.7rem; }
.sv-form-note:empty { display:none; }
.sv-next { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-top:0; padding-bottom:4rem; }
.sv-all-services { display:flex; align-items:center; gap:.8rem; font-size:.8rem; }
.sv-next-link { display:flex; align-items:center; gap:2rem; }
.sv-next-link > span:first-child { display:flex; flex-direction:column; gap:.6rem; }
.sv-next-label { font-size:.7rem; color:var(--sv-muted); }
.sv-next-link .sv-display { font-size:clamp(1.5rem,2.8vw,2.5rem); }
.sv-next-link:hover .sv-circle-arrow { background:var(--sv-accent); color:white; border-color:var(--sv-accent); transform:rotate(45deg); }
.sv-caption-in { animation:sv-caption-in .5s ease both; }
@keyframes sv-caption-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1050px) {
  .sv-index-title { font-size:clamp(3.5rem,7.8vw,6rem); }
  .sv-index-hero { gap:1.5rem; }
  .sv-explorer { gap:2rem; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .sv-service-trigger .sv-display { font-size:2rem; }
  .sv-detail-composition { gap:2.5rem; }
  .sv-detail-title { font-size:clamp(2.4rem, 4.5vw, 3.6rem); }
  .sv-contact-direct a:first-child { gap:.6rem; font-size:.85rem; }
}
@media (max-width:760px) {
  .sv-index-hero { display:block; padding-top:9rem; padding-bottom:2.5rem; }
  .sv-index-title { font-size:clamp(3.3rem,11.7vw,5.5rem); margin-top:1.2rem; }
  .sv-index-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top:1.8rem; }
  .sv-index-intro > p { font-size:.9rem; }
  .sv-scroll-link { font-size:0; margin:0; }
  .sv-scroll-link .sv-circle-arrow { width:2.5rem; height:2.5rem; }
  .sv-explorer { grid-template-columns:1fr; gap:2rem; padding-bottom:3rem; }
  .sv-explorer-visual { position:static; }
  .sv-explorer-frame { border-radius:90px 14px 14px 14px; }
  .sv-image-caption { bottom:1.5rem; left:1.5rem; gap:.5rem; }
  .sv-image-index { font-size:2.5rem; }
  .sv-image-caption > span:last-child { max-width:30ch; font-size:.85rem; }
  .sv-visual-foot { font-size:.65rem; }
  .sv-service-trigger { grid-template-columns:1.3rem minmax(0,1fr) 1rem; gap:.7rem; padding:1.2rem 0; }
  .sv-service-trigger .sv-display { font-size:clamp(1.65rem,6vw,2.5rem); }
  .sv-row-number { padding-top:.4rem; font-size:.65rem; }
  .sv-service-description { padding:0 1.7rem 1.5rem 2rem; }
  .sv-service-description p { font-size:.9rem; }
  .sv-detail-hero { padding-top:8.5rem; }
  .sv-breadcrumb { gap:.5rem; font-size:.7rem; }
  .sv-detail-composition { grid-template-columns:1fr; gap:2rem; margin-top:2.5rem; padding-bottom:3rem; }
  .sv-detail-copy { padding:0; }
  .sv-detail-title { font-size:clamp(2.65rem,10.4vw,5rem); margin-top:1.2rem; margin-bottom:1.4rem; }
  .sv-detail-lead { font-size:.95rem; line-height:1.8; }
  .sv-detail-copy .sv-btn { margin-top:1.5rem; }
  .sv-detail-photo { border-radius:14px 14px 90px 14px; }
  .sv-index-mesh { width:115%; right:-30%; top:2.5rem; height:22rem; opacity:.65; }
  .sv-detail-ribbon { width:130%; right:-35%; top:3rem; height:27rem; opacity:.65; }
  .sv-detail-figure figcaption { font-size:.7rem; }
  .sv-overview { grid-template-columns:1fr; gap:2rem; padding-top:2.5rem; padding-bottom:3rem; }
  .sv-overview-aside ul { display:flex; flex-wrap:wrap; column-gap:1.2rem; row-gap:.2rem; margin-top:1rem; }
  .sv-overview-aside li { font-family:var(--hk-font-text); font-size:.75rem; padding:.3rem 0; }
  .sv-overview-copy p { font-size:1rem; line-height:1.8; }
  .sv-contact { padding-bottom:3rem; }
  .sv-contact-top { flex-direction:column; align-items:flex-start; gap:2rem; }
  .sv-contact-top h2 { font-size:2.6rem; }
  .sv-contact-direct a:first-child { font-size:.8rem; gap:1rem; }
  .sv-enquiry { margin-top:1.8rem; }
  .sv-enquiry summary { font-size:.8rem; }
  .sv-form { grid-template-columns:1fr; }
  .sv-next { gap:1.5rem; align-items:flex-start; padding-bottom:3rem; }
  .sv-next-link { gap:1rem; }
  .sv-next-link .sv-display { font-size:1.35rem; max-width:12ch; }
  .sv-next-link .sv-circle-arrow { width:2rem; height:2rem; font-size:.9rem; }
  .sv-all-services { font-size:.7rem; white-space:nowrap; padding-top:1.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .sv-page *, .sv-page *::before, .sv-page *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* Accent word in the split titles */
.sv-page .hk-accent { color: var(--sv-accent); }
.sv-index-mesh .hk-ribbon, .sv-detail-ribbon .hk-ribbon { width:100%; height:100%; }