/* Lightouch — rebuilt static site
   Type scale, colours and spacing measured from the Elementor output of the
   original build. Breakpoints match the original: 1367 / 1366 / 992 / 537. */

/* ---------- fonts ---------- */
@font-face{font-family:Outfit;src:url(../fonts/Outfit-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/Outfit-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/Outfit-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/Outfit-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --orange:#ffa136;
  --black:#000;
  --white:#fff;
  --offwhite:#dedede;
  --muted:#b9b9b9;
  --display:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:70px;            /* section side padding, desktop */
  --header-h:72px;
}
@media (max-width:992px){:root{--pad:35px}}
@media (max-width:537px){:root{--pad:25px}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:hidden;
  background:var(--black) url(../img/prism-bg.webp) no-repeat top center;
  background-size:cover;background-attachment:scroll;
  color:var(--white);font-family:var(--body);font-weight:300;
  font-size:18px;line-height:1.55;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--orange)}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* visible focus for keyboard users, suppressed for mouse */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--orange);color:#000;padding:12px 20px;
  font-family:var(--display);font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--header-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--pad);
  background:transparent;transition:background-color .3s linear;
}
.site-header.is-open,.site-header.is-scrolled{background:rgba(0,0,0,.94)}
.site-header .logo img{width:190px;max-width:42vw}
@media (max-width:537px){.site-header .logo img{width:150px}}

.nav-toggle{
  display:none;background:none;border:0;padding:10px;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:var(--white);
  transition:transform .25s ease,top .25s ease;
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.site-header.is-open .nav-toggle span{background:transparent}
.site-header.is-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.site-header.is-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

.site-nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.site-nav a{
  font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.06em;
  color:var(--orange);text-decoration:none;position:relative;padding:6px 0;display:block;
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--orange);opacity:0;transition:opacity .2s ease;
}
.site-nav a:hover::after,.site-nav a:focus-visible::after{opacity:1}

@media (max-width:992px){
  .nav-toggle{display:flex}
  .site-nav{
    position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.96);
    display:none;padding:40px var(--pad);
  }
  .site-header.is-open .site-nav{display:block}
  .site-nav ul{flex-direction:column;gap:28px}
  .site-nav a{font-size:20px;font-weight:700;color:var(--orange)}
  body.nav-open{overflow-y:hidden}
}

/* ---------- shared section furniture ---------- */
.section{position:relative;padding-left:var(--pad);padding-right:var(--pad)}
section[id]{scroll-margin-top:calc(var(--header-h) + 10px)}

/* the three oversized outlined headings */
.display-outline{
  font-size:17vw;line-height:.9;margin:0;color:transparent;
  -webkit-text-stroke:2px var(--orange);
  letter-spacing:.005em;text-transform:none;
}
@media (max-width:992px){.display-outline{-webkit-text-stroke-width:1px}}
/* Firefox and anything without -webkit-text-stroke: fall back to a solid outline
   colour rather than invisible text. */
@supports not (-webkit-text-stroke:2px red){
  .display-outline{color:var(--orange)}
}

/* ---------- hero ---------- */
/* No overflow:hidden here — it was clipping the bottom off the right-hand cube,
   which sits at bottom:-106px by design. body already has overflow-x:hidden. */
.hero{
  position:relative;min-height:min(880px,100vh);display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:var(--header-h);
}
/* container top:-147px, image margin-left:27vw, width:30vw.
   (The original's -200px start offset was cancelled by a y:+200 tween.) */
.hero__vector-top{
  position:absolute;top:-147px;left:27vw;width:30vw;z-index:1;pointer-events:none;
}
@media (max-width:992px){.hero__vector-top{width:26vw;left:25vw}}
@media (max-width:537px){.hero__vector-top{width:29vw;top:-92px;left:46vw}}
.hero__inner{position:relative;z-index:5;padding:0 0 90px}
.hero h1{margin:0;color:var(--white)}
.hero .line-1{display:block;font-weight:300;font-size:9vw;line-height:1;letter-spacing:.02em}
.hero .line-2{
  display:block;font-weight:600;color:var(--orange);font-size:9vw;line-height:1;
  letter-spacing:.02em;margin-bottom:18px;
  font-style:oblique 10deg;   /* Outfit ships no italic; Forma's is a slant too */
}
@media (min-width:993px){
  .hero .line-1,.hero .line-2{font-size:121px;line-height:115px}
}
@media (min-width:1367px){
  .hero .line-1,.hero .line-2{font-size:164px;line-height:164px}
}
.hero__sub{
  font-family:var(--body);font-weight:400;font-size:20px;line-height:1.5;
  max-width:34ch;color:var(--offwhite);margin:26px 0 32px;
}
@media (max-width:537px){.hero__sub{font-size:17px;margin:18px 0 26px}}
/* image width:55vw, margin-right:-70vw cancelled by an x:-70vw tween, so both
   cubes rest flush against the right edge, container bottom:-106px. */
.hero__vectors{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__vectors img{position:absolute;right:0;bottom:-106px;width:55vw;max-width:none}

/* ---------- hero, phones and tablets (<=992px) ----------
   Desktop is untouched. Below 992 the hero is CONTENT height: the old
   min-height:min(720px,100svh) plus justify-content:flex-end pushed the whole
   difference to the top, which on a 440px phone left ~260px of nothing between
   the logo and the heading. Fixed top gap instead, so the heading sits the same
   distance below the logo on every phone.

   The cube artwork also comes out of the absolute overlay and becomes a normal
   block after the text, full-bleed, sized from the art itself (78vw wide,
   783x571, so 56.9vw tall). No overhang here — a bleed into the About section
   is a desktop-only flourish and on a phone it would collide with the
   "About us" heading. */
@media (max-width:992px){
  .hero{
    min-height:0;
    justify-content:flex-start;
    padding-top:calc(var(--header-h) + 40px);
  }
  .hero__inner{padding-bottom:24px}
  .hero__vectors{
    position:relative;inset:auto;z-index:0;
    width:auto;margin:0 -35px;
    height:56.9vw;
  }
  .hero__vectors img{width:78vw;bottom:0}
}

/* ---------- button ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:18px;
  line-height:1;letter-spacing:.04em;padding:20px 40px 18px;
  background:var(--orange);color:#000;border:2px solid var(--orange);
  text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--orange)}
@media (max-width:992px){.btn{font-size:16px;padding:14px 26px 12px}}

/* ---------- about ---------- */
.about{padding-top:76px;padding-bottom:0}
.about .display-outline{margin-left:0}
.about__body{padding:0 4vw 0 21vw;margin-top:6px;max-width:1500px}
.about__body p{
  font-family:var(--body);font-weight:400;
  font-size:clamp(17px,1.5vw,26px);line-height:1.62;letter-spacing:.015em;
  margin:0 0 1.1em;max-width:62ch;
}
@media (max-width:992px){
  .about{padding-top:60px}
  .about__body{padding:0;max-width:none}
  .about__body p{font-size:17px;line-height:1.65}
}

/* ---------- offer band (orange) ----------
   One wrapper, one statement, left aligned. The two nested wrappers were left
   over from the logomark panel that used to sit beside them. */
.offer{margin-top:44px;background:var(--orange)}
.offer__inner{padding:64px var(--pad)}
.offer__statement{
  font-family:var(--display);font-weight:600;color:var(--black);
  font-size:4vw;line-height:1.1;letter-spacing:.02em;margin:0;text-align:left;
}
@media (max-width:992px){
  .offer__inner{padding:40px 35px}
  .offer__statement{font-size:20px;line-height:24px}
}
@media (max-width:537px){.offer__inner{padding:28px 25px}}

/* ---------- services ----------
   One section now: the outlined heading and the list together. The separate
   band existed only for the orange/black straddle, which is gone.
   .svc__body wraps the cube and the list so the cube's top:9vw still measures
   from the top of the LIST, as it did when .svc began there — merging the
   sections would otherwise drop it onto the heading. */
.svc{padding-top:56px;padding-bottom:40px}
.svc .display-outline{
  text-align:center;font-size:197px;line-height:1.05;letter-spacing:.02em;
  margin:0 0 72px;
}
@media (max-width:1366px){.svc .display-outline{font-size:15vw}}
@media (max-width:992px){
  .svc{padding-top:36px}
  .svc .display-outline{font-size:16vw;margin-bottom:68px}
}
@media (max-width:900px){.svc .display-outline{margin-bottom:48px}}

.svc__body{position:relative}
/* The negative right cancels .section's side padding so the art reaches the true
   screen edge. .svc__body sits INSIDE that padding, so right:0 left the artwork
   stopping --pad short of the edge — which is what was showing as a cut-off cube.
   Literal values, kept in step with --pad. No overflow:hidden: the container and
   the image are the same width, so it could only ever clip. */
.svc__vector{
  position:absolute;right:-70px;top:9vw;width:11vw;z-index:0;
  pointer-events:none;
}
.svc__vector img{width:11vw;max-width:none}
@media (max-width:1366px){.svc__vector,.svc__vector img{width:110px}}
@media (max-width:992px){
  .svc__vector{right:-35px;top:24px}
  .svc__vector,.svc__vector img{width:74px}
}
@media (max-width:537px){.svc__vector{display:none}}

/* right padding keeps the text column clear of the cube artwork, which sits at
   right:0 and is 11vw wide above 1366px, then 110px, then 74px. */
.svc__list{
  list-style:none;margin:0;padding:0 calc(11vw + 40px) 0 0;position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:6vw;row-gap:46px;max-width:1500px;
}
.svc__item{max-width:52ch;padding:0}
.svc__icon{height:58px;width:auto;display:block;margin:0 0 14px}
.svc__item h3{
  font-size:clamp(19px,1.5vw,26px);line-height:1.3;letter-spacing:.02em;
  color:var(--orange);margin:0 0 10px;font-weight:600;
}
.svc__item p{
  font-family:var(--body);font-weight:400;
  font-size:clamp(17px,1.2vw,19px);line-height:1.6;letter-spacing:.015em;
  margin:0;color:var(--white);
}
@media (max-width:1366px){.svc__list{padding-right:150px}}
@media (max-width:992px){.svc__list{padding-right:114px}}
@media (max-width:900px){
  .svc__list{grid-template-columns:1fr;row-gap:34px}
  .svc__item{max-width:none}
  .svc__icon{height:46px;width:auto;margin-bottom:12px}
}
/* must come AFTER the base rule — it was sitting above it and never applied,
   so phones were carrying 40px+ of right padding with no cube to clear. */
@media (max-width:537px){.svc__list{padding-right:0}}

/* ---------- contact ---------- */
/* No overflow:hidden — it cut the cube art off with a hard horizontal edge
   where the section ends. It runs on behind the footer wordmark instead:
   .site-footer is z-index 3, this art is z-index 0. */
.contact{position:relative;padding-top:64px;padding-bottom:96px}
.contact__title{text-align:right}
@media (max-width:992px){
  .contact{padding-top:70px;padding-bottom:70px}
  .contact__inner{margin-top:44px}
}
/* Three overlapping cube drawings, same size, stacked at the same spot —
   container top:15px left:0, image margin-left:-70vw cancelled by an x:+70vw
   tween. They composite into one piece of line art. */
.contact__vectors{position:absolute;inset:0;pointer-events:none;z-index:0}
.contact__vectors img{position:absolute;left:0;top:15px;width:36vw;max-width:724px}
@media (max-width:992px){.contact__vectors{display:none}}
.contact__inner{position:relative;z-index:3;max-width:460px;margin:76px 0 0 auto}
.contact__lead{
  font-family:var(--display);font-weight:600;font-size:28px;color:var(--white);
  margin:0 0 10px;letter-spacing:.02em;
}
@media (max-width:537px){.contact__lead{font-size:22px}}
.contact__sub{
  font-family:var(--body);font-weight:300;font-size:18px;line-height:1.55;
  letter-spacing:.02em;color:var(--white);margin:0 0 26px;
}
.contact__place{
  font-size:16px;color:var(--muted);margin-top:34px;font-style:normal;
}
/* only seen with JavaScript off, when the reveal buttons never appear */
.contact__noscript{
  font-size:16px;color:var(--muted);margin:0;font-style:normal;
}

/* ---------- click-to-reveal contact ----------
   Injected by site.js. Neither the number nor the address exists in the HTML,
   CSS or JS as readable text — both are assembled from parts on click. These
   are now the only way to reach him, so they are sized like the main .btn,
   and what they reveal is set large enough to read at arm's length. */
.contact__reveal{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 8px}
.reveal-btn{
  font-family:var(--display);font-weight:700;font-size:18px;line-height:1;
  letter-spacing:.04em;padding:20px 32px 18px;cursor:pointer;
  background:transparent;color:var(--orange);border:2px solid var(--orange);
  border-radius:0;transition:background-color .2s,color .2s;
}
.reveal-btn:hover,.reveal-btn:focus-visible{background:var(--orange);color:#000}
.revealed{
  font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;
  letter-spacing:.02em;color:var(--orange);text-decoration:none;
  padding:16px 0;display:inline-block;word-break:break-word;
}
.revealed:hover,.revealed:focus-visible{text-decoration:underline}
@media (max-width:992px){
  .reveal-btn{font-size:16px;padding:16px 24px 14px}
  .revealed{font-size:22px}
}
/* one per line on phones, so a tapped number isn't a cramped target */
@media (max-width:537px){
  .contact__reveal{flex-direction:column;align-items:stretch;gap:12px}
  .reveal-btn{width:100%;text-align:center}
}

/* ---------- footer ---------- */
.site-footer{padding:40px var(--pad) 40px;position:relative;z-index:3}
.site-footer__logo img{width:100%;max-width:1900px;margin:0 auto 34px}
.site-footer__bar{border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
.site-footer__bar{
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--muted);letter-spacing:.02em;
}
.site-footer__bar a{color:var(--muted);text-decoration:none}
.site-footer__bar a:hover,.site-footer__bar a:focus-visible{color:var(--orange)}
.site-footer__links{display:flex;align-items:center;gap:22px}
.site-footer .icon{width:20px;height:20px;fill:currentColor;display:block}

/* ---------- interior pages ---------- */
.page{padding-top:calc(var(--header-h) + 90px);padding-bottom:110px;min-height:70vh}
.page h1{font-size:clamp(44px,8vw,110px);line-height:1;color:var(--orange);margin:0 0 40px}
.page__body{max-width:68ch;font-size:18px;line-height:1.7}
.page__body h2{
  font-family:var(--display);font-size:22px;color:var(--white);
  margin:38px 0 10px;font-weight:600;letter-spacing:.01em;
}
.page__body p{margin:0 0 1.1em}
.page__meta{color:var(--muted);font-size:15px;margin-bottom:34px}
.page__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}