/* ==========================================================================
   Foley – Services (photo + auto-advancing accordion)
   Built from a screenshot; geometry assumes a 1440 frame (72 padding, 750 photo, 90 gap, 456 list)
   ========================================================================== */

:root {
  --ink: #111117;
  --ink-muted: #70707d;
  --body-ink: #1a3946;
  --rule: #c8d1dc;
  --section-bg: #f8fafb;
  --page-bg: #ffffff;
  --btn: #2a4c5a;
  --btn-hover: #1a3946;
  --green: #81e014;

  --font: "Inter", system-ui, -apple-system, sans-serif;

  /* motion */
  --slow: 1;
  --dwell: 8000ms;                                  /* time per item; JS keeps it in sync */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-wipe: cubic-bezier(.77, 0, .18, 1);
  --t-swap: calc(640ms * var(--slow));             /* accordion height + title */
  --t-wipe: calc(1000ms * var(--slow));            /* photo reveal */
  --t-fade: calc(360ms * var(--slow));
  --t-rise: calc(620ms * var(--slow));
  --lead: calc(200ms * var(--slow));
  --stagger: calc(70ms * var(--slow));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-variation-settings: "opsz" 32;               /* Inter Display cut of the variable font */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.page { padding: 48px 48px 104px; }   /* room for the A/B switch */

/* ==========================================================================
   Layout
   ========================================================================== */
.svc {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px;
  display: grid;
  grid-template-columns: minmax(0, 750fr) minmax(0, 456fr);
  column-gap: clamp(40px, 6.25vw, 90px);
  background: var(--section-bg);
}

.svc-mark {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--green);
}

/* ==========================================================================
   Photo stack
   ========================================================================== */
.svc-media {
  position: relative;
  overflow: hidden;
  background: #e9edf1;
}
.svc-media::before {                                /* 750 × 631 minimum; stretches if the list is taller */
  content: "";
  display: block;
  padding-top: calc(631 / 750 * 100%);
}

.ph {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  clip-path: inset(0);
  transition:
    clip-path var(--t-wipe) var(--ease-wipe),
    opacity var(--t-wipe) var(--ease-io);
}
.ph.is-prev   { visibility: visible; z-index: 1; }
.ph.is-active { visibility: visible; z-index: 2; }

.ph-zoom { width: 100%; height: 100%; }
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform calc(1400ms * var(--slow)) var(--ease-out);
}

/* entering start state (JS adds .is-entering, forces a frame, then removes it) */
.ph.is-entering { transition: none; }
.ph.is-entering img { transform: scale(1.12); transition: none; }
.svc-root[data-fx="wipe"] .ph.is-entering[data-from="below"] { clip-path: inset(100% 0 0 0); }
.svc-root[data-fx="wipe"] .ph.is-entering[data-from="above"] { clip-path: inset(0 0 100% 0); }
.svc-root[data-fx="wipe"] .ph.is-entering[data-from="right"] { clip-path: inset(0 0 0 100%); }
.svc-root[data-fx="wipe"] .ph.is-entering[data-from="left"]  { clip-path: inset(0 100% 0 0); }
.svc-root[data-fx="fade"] .ph.is-entering { opacity: 0; }
.svc-root[data-fx="fade"] .ph.is-entering img { transform: scale(1.04); }

/* slow push-in while an item is on screen; frozen together with the progress bar */
.ph.is-active .ph-zoom,
.ph.is-prev .ph-zoom { animation: kenburns var(--dwell) linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ==========================================================================
   Accordion
   ========================================================================== */
.svc-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.svc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  transition:
    flex-grow var(--t-swap) var(--ease-io),
    margin-top var(--t-swap) var(--ease-io);
}
.svc-item.is-active { flex-grow: 1; }
.svc-item.is-active:not(:first-child) { margin-top: 26px; }   /* air above the open item, as in the mock */

.svc-rule {
  position: relative;
  display: block;
  height: 1px;
  background: var(--rule);
}
.svc-progress {
  position: absolute;
  left: 0;
  top: -0.5px;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity calc(200ms * var(--slow)) var(--ease-io);
}
.svc-item.is-active .svc-progress,
.svcb-tab.is-active .svc-progress { animation: progress var(--dwell) linear forwards; }   /* B: the active tab's slot of the rule */
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.svc-root.is-paused .svc-progress,
.svc-root.is-paused .ph-zoom { animation-play-state: paused; }
.svc-root.no-autoplay .is-active .svc-progress { animation: none; transform: scaleX(1); }
/* B (tap on touch) / autoplay off: the line becomes a static "selected" marker, finishing its fill */
.svc-root.no-autoplay .svc-progress {
  transition:
    transform calc(420ms * var(--slow)) var(--ease-out),
    opacity calc(200ms * var(--slow)) var(--ease-io);
}
/* A, hover: the running line fades out (after a short hold so crossing the edge does not blink)
   and comes back from the same point when the cursor leaves */
.svc.is-hovering:not(.no-autoplay) .is-active .svc-progress {
  opacity: 0;
  transition: opacity calc(200ms * var(--slow)) var(--ease-io) calc(150ms * var(--slow));
}
/* A, picked by the reader: no line at all, the open item speaks for itself */
.svc.user-stopped .svc-progress { opacity: 0; transition: none; }   /* instantly: no fill-up flash on the click */

.svc-h { font: inherit; }

.svc-btn {
  display: block;
  width: 100%;
  padding: 5px 0 25px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: padding-bottom var(--t-swap) var(--ease-io);
}
.svc-item.is-active .svc-btn { cursor: default; }
.svc-item:last-child:not(.is-active) .svc-btn { padding-bottom: 0; }   /* last title sits on the photo's bottom edge */

/* title is laid out at the open size (36px) and scaled down when closed,
   so open/close is a transform instead of a font-size reflow */
.svc-title {
  display: block;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.6px;
  font-weight: 400;
  color: var(--ink-muted);
  --s: calc(23.5 / 36);                             /* closed scale */
  width: calc(100% / var(--s));                     /* wrap at the visible width, not the 36px one */
  transform: scale(var(--s));
  transform-origin: 0 0;
  margin-bottom: calc(1.15em * (var(--s) - 1));    /* give back the space the scale-down leaves empty */
  transition:
    transform var(--t-swap) var(--ease-io),
    width var(--t-swap) var(--ease-io),
    margin-bottom var(--t-swap) var(--ease-io),
    color var(--t-swap) var(--ease-io),
    font-weight var(--t-swap) var(--ease-io);
}
.svc-item.is-active .svc-title {
  --s: 1;
  color: var(--ink);
  font-weight: 500;
}
.svc-item:not(.is-active) .svc-btn:hover .svc-title { color: var(--ink); }

.svc-btn:focus-visible { outline: none; }
.svc-btn:focus-visible .svc-title {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* body: 0fr ⇄ 1fr height, content staggers in */
.svc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-swap) var(--ease-io);
}
.svc-item.is-active .svc-body { grid-template-rows: 1fr; }
.svc-body-in { min-height: 0; overflow: hidden; }

.svc-body p {
  max-width: 456px;
  font-size: 20px;
  line-height: 24.5px;
  color: var(--body-ink);
}
.svc-body p:first-child { margin-top: 3px; }
.svc-body p + p { margin-top: 9px; }

.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 2px;
  padding: 16px 28px 16px 27px;
  background: var(--btn);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.5px;
  transition: background-color calc(200ms * var(--slow)) var(--ease-io);
}
.svc-cta svg { width: 16.5px; height: 19.9px; transition: transform calc(260ms * var(--slow)) var(--ease-out); }
.svc-cta:hover { background: var(--btn-hover); }
.svc-cta:hover svg { transform: translateX(3px); }
.svc-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* stagger: leaving is quick and together, entering waits for the height to open */
.svc-body p,
.svc-cta {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity calc(140ms * var(--slow)) linear,
    transform calc(140ms * var(--slow)) var(--ease-io),
    background-color calc(200ms * var(--slow)) var(--ease-io);
}
.svc-body p:nth-child(1) { --i: 0; }
.svc-body p:nth-child(2) { --i: 1; }
.svc-cta { --i: 2; }
.svc-item.is-active .svc-body p,
.svc-item.is-active .svc-cta {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-fade) var(--ease-io) calc(var(--lead) + var(--i) * var(--stagger)),
    transform var(--t-rise) var(--ease-out) calc(var(--lead) + var(--i) * var(--stagger)),
    background-color calc(200ms * var(--slow)) var(--ease-io);
}

/* ==========================================================================
   Variant B – horizontal tabs (second screenshot; same type tokens as A)
   Frame: 44 side padding, content up to 1440, photo 897×566, gap 90, text 456
   ========================================================================== */
.svcb {
  max-width: 1528px;
  margin: 0 auto;
  padding: 67px 44px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 456px);   /* text column keeps the mock's 456 wrap */
  column-gap: clamp(40px, 6.25vw, 90px);
  background: #fff;
}
.svc-root[hidden] { display: none; }
.page:has(> .svcb:not([hidden])) { padding: 0 0 104px; }   /* B is full-bleed white, its own 44px gutters */
.svc-root { animation: layout-in calc(420ms * var(--slow)) var(--ease-out); }
@keyframes layout-in { from { opacity: 0; transform: translateY(8px); } }

.svcb-tabbar {
  grid-column: 1 / -1;
  margin-bottom: 58px;
}
.svcb-rule {
  position: relative;
  display: block;
  height: 1px;
  background: var(--rule);
}
.svcb-tabs {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.svcb-tab {
  position: relative;
  flex: none;
  display: inline-grid;
  padding: 8px 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 18.5px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  font-weight: 400;
  color: var(--ink-muted);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--t-swap) var(--ease-io),
    font-weight var(--t-swap) var(--ease-io);
}
.svcb-tab-text,
.svcb-tab::after { grid-area: 1 / 1; }
.svcb-tab .svc-progress {                          /* the tab's slot of the rule: label + half of each neighbouring gap (JS) */
  top: -1.5px;
  left: calc(var(--ext-l, 0px) * -1);
  right: calc(var(--ext-r, 0px) * -1);
  width: auto;
}
.svcb-tab::after {                                  /* invisible bold copy keeps the width fixed */
  content: attr(data-text);
  font-weight: 500;
  visibility: hidden;
}
.svcb-tab:hover { color: var(--ink); }
.svcb-tab.is-active { color: var(--ink); font-weight: 500; cursor: default; }
.svcb-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.svcb-media {
  position: relative;
  overflow: hidden;
  background: #e9edf1;
}
.svcb-media::before {
  content: "";
  display: block;
  padding-top: calc(566 / 897 * 100%);
}

.svcb-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.svcb-panels { display: grid; }
.svcb-panel {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  transition: visibility 0s linear calc(300ms * var(--slow));
}
.svcb-panel.is-active,
.svcb-panel.is-leaving { visibility: visible; transition-delay: 0s; }
.svcb-panel.is-active { z-index: 1; }

.svcb-title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.6px;
  font-weight: 500;
  color: var(--ink);
}
.svcb-panel p {
  max-width: 456px;
  font-size: 20px;
  line-height: 24.5px;
  color: var(--body-ink);
}
.svcb-title + p { margin-top: 26px; }
.svcb-panel p + p { margin-top: 9px; }
.svcb-panel .svc-cta { margin-top: 27px; }

/* text travels with the tabs: comes in from the side you are heading to, leaves the other way */
.svcb { --dir: 1; }
.svcb[data-dir="prev"] { --dir: -1; }
.svcb-panel > * {
  opacity: 0;
  transform: translateX(calc(var(--dir) * 28px));
  transition:
    opacity calc(140ms * var(--slow)) linear,
    transform calc(140ms * var(--slow)) var(--ease-in),
    background-color calc(200ms * var(--slow)) var(--ease-io);
}
.svcb-panel.is-leaving > * {
  opacity: 0;
  transform: translateX(calc(var(--dir) * -20px));
  transition:
    opacity calc(160ms * var(--slow)) linear,
    transform calc(240ms * var(--slow)) var(--ease-in),
    background-color calc(200ms * var(--slow)) var(--ease-io);
}
.svcb-panel > :nth-child(1) { --i: 0; }
.svcb-panel > :nth-child(2) { --i: 1; }
.svcb-panel > :nth-child(3) { --i: 2; }
.svcb-panel > :nth-child(4) { --i: 3; }
.svcb-panel.is-active > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-fade) var(--ease-io) calc(var(--lead) * .6 + var(--i) * var(--stagger)),
    transform var(--t-rise) var(--ease-out) calc(var(--lead) * .6 + var(--i) * var(--stagger)),
    background-color calc(200ms * var(--slow)) var(--ease-io);
}

.svcb-arrows {
  display: flex;
  gap: 4px;
  margin: auto 0 0 -2px;
  padding-top: 24px;
}
.svcb-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color calc(200ms * var(--slow)) var(--ease-io);
}
.svcb-arrow svg { transition: transform calc(260ms * var(--slow)) var(--ease-out); }
.svcb-arrow[data-step="-1"] svg { transform: scaleX(-1); }
.svcb-arrow:hover { background: #eef2f5; }
.svcb-arrow[data-step="1"]:hover svg { transform: translateX(3px); }
.svcb-arrow[data-step="-1"]:hover svg { transform: scaleX(-1) translateX(3px); }
.svcb-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ==========================================================================
   A / B switch
   ========================================================================== */
.ab {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: rgba(17, 17, 23, .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #eef2f6;
  font: 600 13px/1 var(--font);
  box-shadow: 0 10px 30px rgba(17, 17, 23, .2);
  transform: translateX(-50%);
}
.ab-label {
  margin-right: 8px;
  color: rgba(238, 242, 246, .55);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ab button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color .2s var(--ease-io), color .2s var(--ease-io);
}
.ab button span { font-weight: 500; opacity: .65; }
.ab button:hover { background: rgba(238, 242, 246, .1); }
.ab button[aria-pressed="true"] { background: var(--green); color: var(--ink); }
.ab button[aria-pressed="true"] span { opacity: .75; }
.ab button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .svc { padding: 56px; }
  .svc-title { font-size: 32px; --s: calc(22 / 32); }
}

@media (max-width: 1099px) {
  /* tabs no longer fit in one row: scroll them, keep the rule on top */
  .svcb-rule { display: none; }
  .svcb-tabs {
    justify-content: flex-start;
    gap: 32px;
    margin-inline: -44px;
    padding: 2px 44px 0;
    background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat local;   /* rule scrolls with the tabs */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .svcb-tabs::-webkit-scrollbar { display: none; }
  .svcb-tab .svc-progress { top: -2px; }
}

@media (max-width: 859px) {
  .page { padding: 16px 16px 88px; }
  .svcb {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 20px 28px;
  }
  .svcb-tabbar { margin-bottom: 24px; }
  .svcb-tabs { margin-inline: -20px; padding-inline: 20px; gap: 24px; }
  .svcb-media::before { padding-top: 66.67%; }
  .svcb-side { margin-top: 24px; }
  .svcb-title { font-size: 28px; }
  .svcb-panel p { font-size: 18px; line-height: 23px; }
  .svcb-title + p { margin-top: 16px; }
  .svcb-panel .svc-cta { font-size: 18px; margin-top: 22px; }
  .svcb-arrows { padding-top: 12px; }
  .ab button span { display: none; }
  .svc {
    grid-template-columns: minmax(0, 1fr);
    padding: 40px 20px 28px;
  }
  .svc-media::before { padding-top: 75%; }
  .svc-list { margin-top: 28px; }
  .svc-item, .svc-item.is-active { flex: none; }
  .svc-item.is-active:not(:first-child) { margin-top: 12px; }
  .svc-title { font-size: 28px; --s: calc(20 / 28); }
  .svc-body p { font-size: 18px; line-height: 23px; }
  .svc-cta { font-size: 18px; }
  .svc-cta { margin-bottom: 20px; }
}

/* ==========================================================================
   Reduced motion: no autoplay (JS), fades only
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --t-rise: 1ms; --stagger: 0ms; --lead: 0ms; }
  .ph img, .ph.is-entering img { transform: none !important; }
  .svc-body p, .svc-cta, .svcb-panel > * { transform: none !important; }
  .svc-root { animation: none; }
  .ph-zoom { animation: none !important; }
}

/* screenshot mode: frozen, progress at 27% like the mock */
.shot *, .shot *::before, .shot *::after { transition: none !important; }
.shot .is-active .svc-progress {
  animation-delay: calc(var(--dwell) * -0.27) !important;
  animation-play-state: paused !important;
}
.shot .ph-zoom { animation: none !important; }
.shot .svc-root { animation: none; }

/* ==========================================================================
   Demo panel
   ========================================================================== */
.demo {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 50;
  width: 260px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(17, 17, 23, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #eef2f6;
  font: 500 12px/1.3 var(--font);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.demo[hidden] { display: none; }
.demo-label { margin: 0 0 6px; color: rgba(238, 242, 246, .6); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.demo-label ~ .demo-label { margin-top: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button {
  padding: 6px 9px;
  border: 1px solid rgba(238, 242, 246, .18);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--ink); }
.demo-hint { margin-top: 12px; color: rgba(238, 242, 246, .5); font-size: 11px; }
.demo kbd { padding: 1px 5px; border: 1px solid rgba(238, 242, 246, .25); border-radius: 4px; font: inherit; }