/* RestorFX Sri Lanka — middle of the page: about, services, before/after gallery, process + paint layers.
   Pacing: about (airy) → services (dense row on a raised band) → gallery (one huge object) → process (structured). */


/* ================================ ABOUT ================================ */
.about { padding-block: var(--section); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.about__media { position: relative; padding-bottom: 16%; }
.about__block { /* echo of the hero's yellow block, peeking from behind the photos */
  position: absolute; left: 7%; bottom: 0; z-index: 0;
  width: 30%; height: 52%;
  background: var(--yellow);
}
.about__ph { position: relative; z-index: 1; overflow: hidden; border-radius: var(--r); background: var(--ink-3); }
.about__ph img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.about__ph--a { width: 86%; aspect-ratio: 5 / 4; }
.about__ph--b {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 54%; aspect-ratio: 4 / 3;
  border: clamp(6px, .8vw, 10px) solid var(--ink); /* cut line where the photos overlap; survives the clip reveal */
  border-radius: calc(var(--r) + 4px);
}

.about__copy { display: grid; gap: var(--s-4); justify-items: start; }
.about__text { display: grid; gap: var(--s-3); max-width: 54ch; color: var(--muted); }
.about__lead { color: var(--paper); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.about__list { display: grid; gap: .85rem; margin-top: var(--s-2); }
.about__list li { display: flex; align-items: center; gap: .9rem; font-weight: 500; line-height: 1.35; }
.about__tick {
  display: grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem;
  border: 1.5px solid var(--yellow); border-radius: 2px;
  color: var(--yellow); font-size: .95rem;
}
.about__tick .i { stroke-width: 2.25; }
.about__cta { margin-top: var(--s-3); }


/* ================================ SERVICES ================================ */
.svc {
  --card: clamp(20rem, 46vw, 40rem);
  padding-block: var(--section);
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}
.svc__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.svc__intro { display: grid; gap: var(--s-3); max-width: 48rem; }
.svc__area { display: flex; align-items: center; gap: .6rem; color: var(--muted); font: 500 .98rem/1.4 var(--f-label); letter-spacing: .02em; }
.svc__area .i { color: var(--yellow); }

.svc__ctrl { display: flex; gap: .5rem; flex: none; }
.svc__ctrl[hidden] { display: none; }
.svc__nav {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: transparent; color: var(--paper);
  border: 1px solid rgba(242, 240, 232, .25); border-radius: 2px;
  font-size: 1.35rem; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.svc__nav .i { transition: transform .35s var(--ease-out); }
.svc__nav:hover:not([aria-disabled="true"]) { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.svc__nav[data-dir="1"]:hover:not([aria-disabled="true"]) .i { transform: translateX(2px); }
.svc__nav[data-dir="-1"]:hover:not([aria-disabled="true"]) .i { transform: translateX(-2px); }
.svc__nav[aria-disabled="true"] { opacity: .3; cursor: default; }

/* The row: starts on the content edge, bleeds off the right edge; scrolls inside itself, never the page. */
.svc__track {
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 1rem var(--edge) 2.75rem;
  margin-block: -1rem -2.75rem; /* room for the hover lift and shadow without changing the rhythm */
  scrollbar-width: none;
  cursor: grab;
}
.svc__track::-webkit-scrollbar { display: none; }
.svc__track:focus-visible { outline-offset: -3px; }
.svc__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.svc__list { display: flex; gap: var(--s-4); width: max-content; }
.svc__card { flex: 0 0 var(--card); scroll-snap-align: start; container-type: inline-size; }
.svc__inner {
  height: 100%;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.svc__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; width: 100%; background: var(--ink); }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.svc__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: clamp(1.25rem, 2vw, 1.75rem); }
.svc__body p { flex: 1; color: var(--muted); font-size: .98rem; line-height: 1.55; }
.svc__body .btn { min-height: 2.75rem; margin-top: auto; }
@container (min-width: 32rem) {
  .svc__inner { grid-template-columns: 17.5rem 1fr; grid-template-rows: none; min-height: 17.5rem; }
  .svc__media { width: 17.5rem; height: 17.5rem; aspect-ratio: 1 / 1; }
  .svc__body { justify-content: space-between; }
}
@media (hover: hover) {
  .svc__card:hover .svc__inner { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(242, 240, 232, .18); }
  .svc__card:hover .svc__media img { transform: scale(1.06); }
  .svc__card:hover .i--nudge { transform: translateX(4px); }
}
.svc__track.is-drag .svc__inner { transform: none; }


/* ================================ GALLERY: before / after ================================ */
.look { padding-block: var(--section); }
.look__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--s-3) var(--s-6); align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.look__tabs { display: flex; gap: .5rem; margin-bottom: var(--s-4); }
.look__tab {
  min-height: 2.9rem; padding: 0 1.3rem;
  background: transparent; color: var(--muted);
  border: 1px solid rgba(242, 240, 232, .22); border-radius: 2px;
  font: 600 .9rem/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.look__tab:hover { color: var(--paper); border-color: rgba(242, 240, 232, .6); }
.look__tab[aria-selected="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.look__tab:focus-visible { outline-color: var(--paper); }

.look__stage { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.look__cmp {
  --pos: 50%;
  position: relative;
  aspect-ratio: 2 / 1; max-height: 82svh;
  overflow: hidden; border-radius: var(--r);
  background: var(--ink-3);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95);
  touch-action: pan-y; /* vertical swipes still scroll the page */
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
}
.look__cmp img, .look__before { position: absolute; inset: 0; width: 100%; height: 100%; }
.look__cmp img { object-fit: cover; }
.look__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.look__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* scratches: hairlines + key scratches catching the light */
[data-draw="scratch"] .look__before > img { filter: saturate(.8) contrast(.88) brightness(1.1); }
[data-draw="scratch"] .look__marks { mix-blend-mode: screen; }
[data-draw="scratch"] .look__marks path { fill: none; stroke: #FFFFF5; stroke-linecap: round; stroke-linejoin: round; }

/* sun fade: a dulled, oxidised patch across the upper body with a milky, mottled bloom */
[data-draw="fade"] .look__dull,
[data-draw="fade"] .look__haze {
  -webkit-mask-image: radial-gradient(ellipse 60% 30% at 50% 70%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 30% at 50% 70%, #000 30%, transparent 100%);
}
[data-draw="fade"] .look__dull { filter: saturate(.3) contrast(.58) brightness(1.35) sepia(.1); }
.look__haze {
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .94 0 0 0 0 .91 0 0 0 1.6 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 46% 20% at 48% 66%, rgba(236, 234, 224, .34), rgba(236, 234, 224, .1) 70%, transparent);
  mix-blend-mode: screen;
  opacity: .6;
}

/* chips drawn as SVG polygons; no blend, they sit on the paint */
[data-draw="chips"] .look__before > img { filter: saturate(.9) contrast(.95); }

.look__label {
  position: absolute; top: clamp(.75rem, 1.6vw, 1.25rem); z-index: 2;
  padding: .45rem .7rem;
  background: rgba(11, 11, 10, .8); color: var(--paper);
  border-radius: 2px;
  font: 600 .78rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
.look__label--l { left: clamp(.75rem, 1.6vw, 1.25rem); }
.look__label--r { right: clamp(.75rem, 1.6vw, 1.25rem); background: var(--yellow); color: var(--yellow-ink); }

.look__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 2px; translate: -50% 0;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.look__handle .i {
  position: absolute; top: 50%; left: 50%;
  max-width: none;
  width: clamp(3.25rem, 5vw, 4.25rem); height: clamp(3.25rem, 5vw, 4.25rem);
  padding: clamp(.85rem, 1.3vw, 1.1rem);
  translate: -50% -50%;
  background: var(--yellow); color: var(--yellow-ink);
  border-radius: 50%;
  stroke-width: 2;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .85), 0 0 0 6px rgba(225, 205, 54, .22);
  transition: scale .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.look__cmp:hover .look__handle .i { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .85), 0 0 0 10px rgba(225, 205, 54, .22); }
.look__cmp.is-drag .look__handle .i { scale: 1.1; }
.look__cmp:has(.look__range:focus-visible) .look__handle .i { outline: 3px solid var(--paper); outline-offset: 4px; }
.look__range { /* keyboard + screen reader control; pointer handled on the frame */
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none;
}

.look__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-4);
}


/* ================================ PROCESS ================================ */
.process { padding-block: var(--section); }
.process__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--s-3) var(--s-6); align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.process__line { --ic: 3.5rem; --fill: 1; position: relative; }
.process__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process__rail { /* from the first icon's centre to the last one's */
  position: absolute; z-index: 0;
  top: calc(var(--ic) / 2); left: calc(var(--ic) / 2); right: calc(20% - var(--ic) / 2);
  height: 2px; translate: 0 -50%;
  background: var(--ink-4);
}
.process__fill { position: absolute; inset: 0; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(var(--fill)); }
.process__step { position: relative; z-index: 1; display: grid; align-content: start; gap: .55rem; padding-right: clamp(.75rem, 2vw, 2rem); }
.process__icon {
  display: grid; place-items: center;
  width: var(--ic); height: var(--ic);
  margin-bottom: var(--s-3);
  background: var(--yellow); color: var(--yellow-ink);
  border: 1.5px solid var(--yellow); border-radius: 2px;
  font-size: 1.35rem;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.process__num { font: 800 clamp(2.4rem, 3.8vw, 3.4rem)/.85 var(--f-display); color: var(--paper); transition: color .5s var(--ease-out); }
.process__title { font: 400 clamp(.8rem, 1.05vw, .98rem)/1.3 var(--f-wide); text-transform: uppercase; }
.process__step p { color: var(--muted); font-size: .95rem; line-height: 1.55; max-width: 30ch; }
.process__step .src { margin-left: 0; margin-top: .4rem; }
/* while the line is being scrubbed, stages ahead of it wait in grey */
.process__line.is-scrub .process__step:not(.is-on) .process__icon { background: var(--ink); color: var(--muted); border-color: var(--ink-4); }
.process__line.is-scrub .process__step:not(.is-on) .process__num { color: var(--ink-4); }

.process__deep {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.process__photo { position: relative; overflow: hidden; border-radius: var(--r); background: var(--ink-3); min-height: 24rem; }
.process__photo img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }


/* ---------- paint cross-section ---------- */
.layers {
  display: grid; gap: var(--s-4); align-content: start;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r);
}
.layers__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.layers__state { display: inline-grid; font: 600 .78rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }
.layers__state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5rem; }
.layers__state > span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.layers__s1 { color: var(--paper); }
.layers__s2 { color: var(--yellow); opacity: 0; visibility: hidden; }

.layers__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(5.75rem, auto) minmax(4.5rem, auto) minmax(3rem, auto) minmax(5rem, auto);
  column-gap: clamp(1rem, 2.5vw, 2rem);
}
.layers__stack, .layers__key { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.layers__stack { border-radius: 2px; overflow: hidden; }
.layers__l { position: relative; overflow: hidden; }
.layers__l + .layers__l { border-top: 1px solid var(--ink); }
.layers__l--clear { background: #3A3934; box-shadow: inset 0 2px 0 rgba(242, 240, 232, .75); }
.layers__l--base { background: var(--yellow); }
.layers__l--primer { background: #8F8D85; }
.layers__l--panel { background: #2A2A26; }
.layers__notch { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 0; }
.layers__notch path { fill: var(--ink-2); }
.layers__glint {
  position: absolute; inset: 0 auto 0 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 250, .5), transparent);
  transform: translateX(-120%) skewX(-16deg);
}
.layers__key li { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .92rem; line-height: 1.4; padding-block: .35rem; }
.layers__key strong { display: block; margin-bottom: .2rem; font: 400 .8rem/1.3 var(--f-wide); text-transform: uppercase; color: var(--paper); }
.layers__key li.is-work strong { color: var(--yellow); }
.layers__sw { flex: none; width: .85rem; height: .85rem; border-radius: 1px; }
.layers__sw--clear { background: #3A3934; box-shadow: inset 0 2px 0 rgba(242, 240, 232, .75); outline: 1px solid rgba(242, 240, 232, .25); }
.layers__sw--base { background: var(--yellow); }
.layers__sw--primer { background: #8F8D85; }
.layers__sw--panel { background: #2A2A26; outline: 1px solid rgba(242, 240, 232, .25); }
.layers__ask { color: var(--muted); font-size: .95rem; }


/* ================================ RESPONSIVE ================================ */
@media (max-width: 1080px) {
  .process__deep { grid-template-columns: 1fr; }
  .process__photo { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 40rem; }
  .look__top, .process__top { grid-template-columns: 1fr; }

  /* process timeline turns vertical */
  .process__steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .process__step { grid-template-columns: var(--ic) minmax(0, 1fr); column-gap: 1.1rem; row-gap: .45rem; padding-right: 0; }
  .process__icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .process__num { font-size: 2.2rem; }
  .process__rail {
    top: calc(var(--ic) / 2); bottom: var(--rail-end, 6rem); left: calc(var(--ic) / 2); right: auto;
    width: 2px; height: auto; translate: -50% 0;
  }
  .process__fill { transform-origin: 50% 0; transform: scaleY(var(--fill)); }
}

@media (max-width: 760px) {
  .svc__top { display: block; }
  .svc__ctrl { display: none; }
  .svc__track {
    width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: 0;
    overflow: visible; scroll-snap-type: none; cursor: auto;
  }
  .svc__list { flex-direction: column; width: auto; }
  .svc__card { flex: none; }

  .look__tabs { gap: .35rem; }
  .look__tab { flex: 1; padding: 0 .5rem; font-size: .82rem; letter-spacing: .05em; }
  .look__cmp { aspect-ratio: 4 / 3; }
  .look__label { font-size: .7rem; padding: .4rem .55rem; }
}

@media (max-width: 560px) {
  .about__media { padding-bottom: 22%; }
  .about__ph--a { width: 90%; }
  .about__ph--b { width: 60%; }
  .look__cmp { aspect-ratio: 1 / 1; }
  .layers__body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .layers__key li { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc__inner, .svc__media img, .look__handle .i, .process__icon, .process__num, .svc__nav .i { transition: none; }
  .svc__card:hover .svc__inner { transform: none; }
}