/* RestorFX Sri Lanka — shared tokens, reset, type, controls.
   Section styles live in hero.css (top of page) and sections.css (the rest). */

:root {
  --ink: #0B0B0A;        /* page ground */
  --ink-2: #141412;      /* raised band */
  --ink-3: #1C1C19;      /* panels, ghost type */
  --ink-4: #2A2A26;      /* hairlines on dark, inputs */
  --line: rgba(242, 240, 232, .1);
  --paper: #F2F0E8;      /* text on dark */
  --muted: #A9A79E;      /* secondary text on dark (7.9:1 on --ink) */
  --yellow: #E1CD36;
  --yellow-hi: #EEDC52;
  --yellow-ink: #0B0B0A; /* the only text colour allowed on yellow */
  --yellow-mute: #4A4310;/* secondary text on yellow (7:1) */

  --f-display: "Big Shoulders Display", "Barlow Semi Condensed", sans-serif; /* giant wordmark, numerals */
  --f-wide: "Michroma", "Barlow Semi Condensed", sans-serif;               /* section heads, wide caps */
  --f-body: "Barlow", system-ui, sans-serif;
  --f-label: "Barlow Semi Condensed", "Barlow", sans-serif;

  --s-1: .25rem; --s-2: .5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6.5rem; --s-8: 9rem;
  --section: clamp(4.5rem, 10vw, 9rem); /* vertical rhythm between sections */
  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --r: 4px;              /* panels, photos */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; scrollbar-color: var(--ink-4) var(--ink); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.0625rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--yellow);
  accent-color: var(--yellow);
}
main { overflow-x: clip; }
::selection { background: var(--yellow); color: var(--yellow-ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 5px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--yellow); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: inherit; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }
.on-yellow :focus-visible, .on-yellow:focus-visible { outline-color: var(--yellow-ink); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: var(--s-3); top: -4rem; z-index: 100; background: var(--yellow); color: var(--yellow-ink); padding: var(--s-2) var(--s-3); font-weight: 600; }
.skip:focus { top: var(--s-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; text-transform: none; }

/* ---------- icons: authored sprite in index.html, 24 grid, 1.75 stroke ---------- */
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i--fill { fill: currentColor; stroke: none; }

/* ---------- section heads: wide caps beside a yellow tick (ref 2) ---------- */
.head { position: relative; padding-left: clamp(1.1rem, 2.4vw, 2rem); }
.head::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 2px; height: 2.6em; background: var(--yellow);
  transform-origin: top; transform: scaleY(var(--tick, 1));
}
h1, .h1 {
  font-family: var(--f-wide);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
h2, .h2 {
  font-family: var(--f-wide);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
h3, .h3 {
  font-family: var(--f-wide);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
}
.lead { color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 60ch; }
.on-yellow .lead { color: var(--yellow-mute); }

/* ---------- buttons: square, yellow, black text; lift + arrow nudge on hover ---------- */
.btn {
  --bg: var(--yellow); --fg: var(--yellow-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: .85rem 1.6rem;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg); border-radius: 2px;
  font: 600 .95rem/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .2s;
}
.btn::after { /* polishing sheen that crosses on hover */
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 240, .55), transparent);
  transform: skewX(-18deg) translateX(0); transition: transform .7s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85); background: var(--yellow-hi); }
.btn:hover::after { transform: skewX(-18deg) translateX(480%); }
.btn:active { transform: translateY(0); }
.btn .i { transition: transform .35s var(--ease-out); }
.btn:hover .i--nudge { transform: translateX(4px); }
.btn--sm { min-height: 2.5rem; padding: .55rem 1.05rem; font-size: .82rem; }
.btn--lg { min-height: 3.75rem; padding: 1rem 2rem; font-size: 1.02rem; }
.btn--line { --bg: transparent; --fg: var(--paper); border-color: rgba(242, 240, 232, .35); }
.btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; }
.btn--ink { --bg: var(--yellow-ink); --fg: var(--yellow); }
.btn--ink:hover { background: #1f1f1c; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Text link with a drawn underline */
.link {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--paper); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size .4s var(--ease-out), color .2s;
}
.link:hover { color: var(--yellow); background-size: 0 1px; background-position: 100% 100%; }
.on-yellow .link { color: var(--yellow-ink); }
.on-yellow .link:hover { color: var(--yellow-ink); }

/* ---------- provenance: global claims are tagged, never presented as local ---------- */
.src {
  display: inline-block; margin-left: .5em; padding: .12em .48em; vertical-align: .15em;
  border: 1px solid var(--ink-4); border-radius: 3px;
  font: 600 .75rem/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.on-yellow .src { border-color: rgba(11, 11, 10, .3); color: var(--yellow-mute); }

/* ---------- placeholders the centre must replace: dashed, visibly unfinished ---------- */
.ph { outline: 1px dashed rgba(225, 205, 54, .55); outline-offset: 3px; }
.on-yellow .ph { outline-color: rgba(11, 11, 10, .45); }
.ph-note { font: 500 .8rem/1.4 var(--f-label); letter-spacing: .04em; color: var(--muted); }