/* ==========================================================================
   S4 CONSULTING PTE LTD site stylesheet
   360 degree media and advertising agency, Singapore
   Palette and typography follow Website Brief v2.0 (01-Sep-2026).
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. Design tokens, per brief section 3
   -------------------------------------------------------------------------- */
:root{
  /* brand, exact values from the S4 logo */
  --teal:#00a098;
  --navy:#0860a8;
  /* supporting jewel tone */
  --emerald:#0e5c4a;
  --emerald-lift:#12735c;

  /* surfaces */
  --sand:#f3eee6;          /* base / section background */
  --sand-2:#e8e0d3;        /* deeper sand band */
  --card:#fbf8f3;          /* card surfaces */
  --ink:#0b1a24;           /* deep ink, used for Work and Production */
  --ink-2:#122a38;         /* raised surface inside dark sections */

  /* text on sand */
  --tx:#0b1a24;
  --tx-2:#52616a;
  --tx-3:#556570;
  /* text on ink */
  --tx-on-ink:#f3eee6;
  --tx-on-ink-2:#a9b8c0;
  --tx-on-ink-3:#8697a1;

  /* lines */
  --line:rgba(11,26,36,.14);
  --line-soft:rgba(11,26,36,.08);
  --line-on-ink:rgba(243,238,230,.16);
  --line-on-ink-soft:rgba(243,238,230,.09);

  /* washes */
  --teal-wash:rgba(0,160,152,.09);
  --navy-wash:rgba(8,96,168,.08);
  --emerald-wash:rgba(14,92,74,.08);
  --teal-soft:#dcefed;
  --navy-soft:#e0ecf7;

  /* elevation, warm-tinted */
  --sh-s:0 1px 2px rgba(11,26,36,.05),0 2px 6px -3px rgba(11,26,36,.10);
  --sh-m:0 2px 4px rgba(11,26,36,.04),0 14px 28px -18px rgba(11,26,36,.26);
  --sh-l:0 4px 10px rgba(11,26,36,.05),0 34px 60px -40px rgba(11,26,36,.45);

  /* type: Sora headings, Inter body */
  --head:"Sora","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* metrics */
  --gutter:clamp(1.25rem,4vw,4.5rem);
  --maxw:82rem;
  --nav-h:5.25rem;
  --r:14px;
  --r-lg:20px;
  --r-pill:100px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{
  background:var(--sand);
  color:var(--tx);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
::selection{background:var(--teal);color:#fff}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:100rem}
.section{position:relative;padding-block:clamp(4rem,9vw,8rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--sand2{background:var(--sand-2)}
.section--paper{background:var(--sand-2)}
/* Contrast break used by Work and Production. The brief specified a deep ink
   band here; S4 asked for it light, so the same sections now sit on the deeper
   sand with card surfaces. The "on ink" tokens are re-pointed at their light
   equivalents, so every component inside inherits the right colours. */
.section--break{
  background:var(--sand-2);
  color:var(--tx);
  --ink:var(--sand-2);
  --ink-2:var(--card);
  --tx-on-ink:var(--tx);
  --tx-on-ink-2:var(--tx-2);
  --tx-on-ink-3:var(--tx-3);
  --line-on-ink:var(--line);
  --line-on-ink-soft:var(--line-soft);
}
.grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}}
.rule{height:1px;width:100%;background:var(--line);transform-origin:left center}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display,.h1,.h2,.h3,.h4,.cta__title,.hz__panel__t,.step__t,.card__t,.reel__t{font-family:var(--head)}
.display{font-size:clamp(2.35rem,5.2vw,4.6rem);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.h1{font-size:clamp(2.15rem,5.2vw,4.25rem);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.h2{font-size:clamp(1.8rem,3.9vw,3.1rem);line-height:1.08;font-weight:700;letter-spacing:-.03em}
.h3{font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.2;font-weight:700;letter-spacing:-.022em}
.h4{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.3;font-weight:600;letter-spacing:-.018em}

.accent{color:var(--emerald)}

.tealtx{color:var(--emerald)}
.bluetx{color:var(--navy)}
.serif,.serif-up{font-family:var(--head);font-style:normal;font-weight:700;color:var(--emerald)}

.lead{font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.55;color:var(--tx-2);max-width:48ch}
.muted{color:var(--tx-2)}
.small{font-size:.9rem;line-height:1.55}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--emerald);
  display:inline-flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--teal);border-radius:2px}
.eyebrow--plain::before{display:none}
.slate{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}

/* --------------------------------------------------------------------------
   5. Placeholder flagging, per brief section 7
   Nothing marked with these may go live: real, consented content only.
   -------------------------------------------------------------------------- */
.ph{position:relative}
.ph__tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .6rem;border-radius:var(--r-pill);
  background:#fdf0d8;color:#7a4a00;border:1px solid #e8bf7a;
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.ph__tag::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:#c47f12}
.ph__tag--float{position:absolute;top:.75rem;right:.75rem;z-index:3;box-shadow:var(--sh-s)}
.ph__note{margin-top:.6rem;font-size:.8rem;color:var(--tx-3);max-width:52ch}
.section--break .ph__note{color:var(--tx-on-ink-3)}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),height .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.is-stuck{
  height:4.25rem;background:rgba(251,248,243,.88);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 1px 0 var(--line-soft),0 10px 30px -22px rgba(11,26,36,.5);
}
.nav__in{width:100%;max-width:100rem;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:1.5rem}
/* logo stacked over its descriptor, so the line sits under the mark */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:.34rem;flex:0 0 auto;line-height:1}
.brand__mark{height:2.35rem;width:auto;transition:height .5s var(--ease)}
.nav.is-stuck .brand__mark{height:1.95rem}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--head);font-weight:700;letter-spacing:-.02em;font-size:.95rem;text-transform:uppercase;color:var(--tx)}
.brand__sub{font-size:.52rem;font-weight:600;letter-spacing:.13em;color:var(--tx-3);text-transform:uppercase;white-space:nowrap}
@media(max-width:700px){.brand__txt{display:none}}

.nav__links{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav__link{
  position:relative;padding:.55rem .7rem;font-size:.8rem;font-weight:500;
  color:var(--tx-2);transition:color .35s var(--ease);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:2px;border-radius:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav__link:hover{color:var(--tx)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__link.is-active{color:var(--tx)}
.nav__cta{margin-left:.75rem}

.burger{
  display:none;margin-left:auto;width:2.9rem;height:2.9rem;border:1px solid var(--line);
  background:var(--card);border-radius:50%;position:relative;cursor:pointer;box-shadow:var(--sh-s);
}
.burger span{position:absolute;left:50%;width:1.1rem;height:1.5px;background:var(--tx);transform:translateX(-50%);transition:transform .45s var(--ease)}
.burger span:nth-child(1){top:1.15rem}
.burger span:nth-child(2){top:1.6rem}
.is-menu .burger span:nth-child(1){transform:translateX(-50%) translateY(.22rem) rotate(45deg)}
.is-menu .burger span:nth-child(2){transform:translateX(-50%) translateY(-.23rem) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:45;background:linear-gradient(160deg,var(--card) 0%,var(--sand-2) 100%);
  display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);pointer-events:none;overflow-y:auto;
}
.menu.is-open{pointer-events:auto}
.menu__list{display:flex;flex-direction:column;gap:.1rem}
.menu__item{overflow:hidden}
.menu__link{
  display:flex;align-items:baseline;gap:1rem;color:var(--tx);font-family:var(--head);
  font-size:clamp(1.7rem,7vw,2.9rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.14;padding-block:.25rem;transition:color .4s var(--ease)
}
.menu__link:hover{color:var(--emerald)}
.menu__num{font-size:.68rem;font-weight:600;letter-spacing:.16em;color:var(--tx-3)}
.menu__foot{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;border-top:1px solid var(--line)}
.menu__foot a{font-size:.85rem;font-weight:500;color:var(--tx-2)}
.menu__foot a:hover{color:var(--emerald)}

/* Over the dark hero the header is transparent, so it carries light type.
   Once it sticks it gains the light background and reverts to ink. */
.brand__mark--rev{display:none}
.nav--onDark:not(.is-stuck) .brand__mark--ink{display:none}
.nav--onDark:not(.is-stuck) .brand__mark--rev{display:block}
.nav--onDark:not(.is-stuck) .brand__name{color:#fff}
.nav--onDark:not(.is-stuck) .brand__sub{color:rgba(255,255,255,.62)}
.nav--onDark:not(.is-stuck) .nav__link{color:rgba(255,255,255,.82)}
.nav--onDark:not(.is-stuck) .nav__link:hover,
.nav--onDark:not(.is-stuck) .nav__link.is-active{color:#fff}
.nav--onDark:not(.is-stuck) .nav__link::after{background:#7be3de}
.nav--onDark:not(.is-stuck) .nav__cta{background:var(--teal);border-color:var(--teal);color:#032826}
.nav--onDark:not(.is-stuck) .nav__cta .btn__dot{background:#032826}
.nav--onDark:not(.is-stuck) .nav__cta::before{background:#7be3de}
.nav--onDark:not(.is-stuck) .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);box-shadow:none}
.nav--onDark:not(.is-stuck) .burger span{background:#fff}

@media(max-width:1180px){
  .nav__links,.nav .nav__cta{display:none}
  .burger{display:block}
}

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:.9rem 1.5rem;border:1.5px solid var(--tx);border-radius:var(--r-pill);
  background:transparent;color:var(--tx);cursor:pointer;overflow:hidden;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;
  transition:color .4s var(--ease),border-color .4s var(--ease);will-change:transform;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--tx);transform:translateY(101%);transition:transform .55s var(--ease);z-index:0}
.btn > *{position:relative;z-index:1}
.btn:hover{color:var(--sand)}
.btn:hover::before{transform:translateY(0)}
.btn__dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--teal)}
.btn:hover .btn__dot{background:var(--sand)}

.btn--solid{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--sh-m)}
.btn--solid::before{background:var(--emerald)}
.btn--solid .btn__dot,.btn--solid:hover .btn__dot{background:#fff}
.btn--solid:hover{color:#fff;border-color:var(--emerald)}

.btn--ghost{border-color:var(--line);color:var(--tx)}
.btn--ghost::before{background:var(--emerald)}
.btn--ghost:hover{border-color:var(--emerald);color:#fff}

.btn--wa{background:#25d366;border-color:#1da851;color:#04220f}
.btn--wa::before{background:#1da851}
.btn--wa:hover{color:#fff}
.btn--wa svg{width:1.05rem;height:1.05rem;fill:currentColor}


.arrowlink{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;color:var(--emerald);transition:color .35s var(--ease);
}

.arrowlink:hover{color:var(--navy)}
.arrowlink svg{width:.95rem;height:.95rem;transition:transform .45s var(--ease)}
.arrowlink:hover svg{transform:translateX(.35rem)}

/* --------------------------------------------------------------------------
   8. Reveal primitives
   -------------------------------------------------------------------------- */
.line-mask{display:block;overflow:hidden}
.line-mask > span{display:block;will-change:transform}
[data-anim]{will-change:transform,opacity}
.js [data-anim="up"],.js [data-anim="fade"]{opacity:0}
.js [data-anim="up"]{transform:translateY(2.4rem)}
.js .clip-reveal{clip-path:inset(0 0 100% 0)}

/* --------------------------------------------------------------------------
   9. Page transitions: a soft letterbox wipe between pages
   -------------------------------------------------------------------------- */
.bars{position:fixed;left:0;right:0;z-index:95;pointer-events:none;height:0}
.bars--top{top:0}
.bars--bot{bottom:0}
.bars__inner{position:absolute;left:0;right:0;height:0;background:linear-gradient(160deg,var(--card),var(--sand-2))}
.bars--top .bars__inner{top:0;border-bottom:2px solid var(--teal)}
.bars--bot .bars__inner{bottom:0;border-top:2px solid var(--teal)}
.bars__inner::after{content:"";position:absolute;left:0;right:0;height:.8rem;background:repeating-linear-gradient(90deg,transparent 0 1.15rem,rgba(11,26,36,.08) 1.15rem 2.05rem)}
.bars--top .bars__inner::after{bottom:.5rem}
.bars--bot .bars__inner::after{top:.5rem}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
/* The hero is the one dark band on the site, per the approved mockup.
   Colours below are the mockup's exact values. The reel plays behind it,
   held back so it reads as texture rather than as a video. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(2rem,5vw,3.5rem));padding-bottom:clamp(5rem,9vw,7rem);
  overflow:hidden;isolation:isolate;
  background-color:var(--ink);
  background-image:radial-gradient(120% 120% at 80% 0%,#0e3a5c 0%,var(--ink) 55%);
  color:#fff;
  /* tokens the shared components read, remapped for a dark ground */
  --tx:#ffffff;
  --tx-2:rgba(255,255,255,.86);
  --tx-3:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.25);
  --line-soft:rgba(255,255,255,.14);
}
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--ink)}
.hero__bg video,.hero__bg img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.05) brightness(.8);
}
/* the mockup gradient, carried at enough opacity to keep the reel subtle */
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 120% at 80% 0%,rgba(14,58,92,.55) 0%,rgba(11,26,36,.8) 55%),
    linear-gradient(95deg,rgba(11,26,36,.9) 0%,rgba(11,26,36,.82) 34%,rgba(11,26,36,.5) 62%,rgba(11,26,36,.22) 100%);
}
@media(max-width:1000px){
  .hero__scrim{
    background:
      radial-gradient(150% 120% at 80% 0%,rgba(14,58,92,.6) 0%,rgba(11,26,36,.84) 55%),
      linear-gradient(to bottom,rgba(11,26,36,.88) 0%,rgba(11,26,36,.86) 42%,rgba(11,26,36,.42) 72%,rgba(11,26,36,.8) 100%);
  }
}
/* concentric rings, top right, from the mockup */
.hero__orbit{
  position:absolute;right:-10rem;top:-7.5rem;width:32.5rem;height:32.5rem;border-radius:50%;
  border:1px solid rgba(123,227,222,.18);z-index:-1;pointer-events:none;
}
.hero__orbit::before,.hero__orbit::after{content:"";position:absolute;border-radius:50%}
.hero__orbit::before{inset:4.375rem;border:1px solid rgba(123,227,222,.14)}
.hero__orbit::after{inset:9.375rem;border:1px solid rgba(123,227,222,.1)}
@media(max-width:700px){.hero__orbit{right:-14rem;top:-10rem;opacity:.7}}

.hero__in{
  position:relative;flex:1 1 100%;width:100%;max-width:100rem;min-width:0;
  margin-inline:auto;padding-inline:var(--gutter);
}
.hero__copy{max-width:min(46rem,64%)}
@media(max-width:1000px){.hero{align-items:flex-start}.hero__copy{max-width:none}}
.hero .eyebrow{color:#7be3de}
.hero .eyebrow::before{background:#7be3de}
.hero__title{
  font-size:clamp(2.05rem,5vw,4.3rem);line-height:1.06;margin-top:1rem;max-width:20ch;color:#fff;
  text-wrap:balance;
}
/* the line splitter rejoins words with a plain space, so a non-breaking space
   cannot survive it. Breaks are set with <br> instead; the mid-sentence one is
   dropped on narrow screens, where the line wraps naturally anyway. */
@media(max-width:1000px){.hero__title .brk-wide{display:none}}
.hero__title .accent{color:var(--teal)}
.hero__copy .lead{
  margin-top:1.25rem;font-size:clamp(1.02rem,1.3vw,1.15rem);
  color:rgba(255,255,255,.86);max-width:52ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:clamp(1.6rem,3vw,2rem)}
.hero .btn{border-width:1.5px}
.hero .btn--solid{background:var(--teal);border-color:var(--teal);color:#032826;box-shadow:none}
.hero .btn--solid::before{background:#7be3de}
.hero .btn--solid:hover{color:#032826;border-color:#7be3de}
.hero .btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn--ghost::before{background:#fff}
.hero .btn--ghost:hover{color:var(--ink);border-color:#fff}
.btn__arrow{font-size:.7em;line-height:1}

/* ambient channel strip along the foot of the hero */
/* scoped to .hero so these win over the base .ticker rules further down */
.hero .ticker--hero{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  background:transparent;border:0;padding-block:1.125rem;
}
.hero .ticker--hero .ticker__word{
  font-family:var(--head);font-weight:700;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.16);
}
.hero .ticker--hero .ticker__dot{background:rgba(255,255,255,.16);width:.3rem;height:.3rem}
.hero .ticker--hero .ticker__item{gap:clamp(1.75rem,3vw,3rem);padding-right:clamp(1.75rem,3vw,3rem)}

.phero{position:relative;padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,6.5rem));padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden;isolation:isolate}
.phero__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 68% at 82% 6%,var(--navy-wash),transparent 62%),
    radial-gradient(52% 60% at 4% 94%,var(--emerald-wash),transparent 60%),
    linear-gradient(172deg,var(--card),var(--sand));
}
.phero__img{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero__img img{width:100%;height:100%;object-fit:cover;opacity:.12;filter:saturate(.5)}
.phero__mask{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(243,238,230,.55),var(--sand) 92%)}
.phero__title{max-width:18ch}
.crumbs{display:flex;gap:.55rem;align-items:center;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-bottom:1.4rem}
.crumbs a:hover{color:var(--emerald)}

/* --------------------------------------------------------------------------
   11. Channel ticker
   -------------------------------------------------------------------------- */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line-soft);padding-block:clamp(.7rem,1.3vw,1rem);background:var(--card)}
.ticker--lg{border-block:1px solid var(--line)}
.section--break .ticker{background:var(--ink-2);border-color:var(--line-on-ink-soft)}
.ticker__track{display:flex;width:max-content;will-change:transform}
.ticker__item{display:inline-flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding-right:clamp(1.5rem,3vw,3rem);white-space:nowrap}
.ticker__word{font-family:var(--head);font-weight:700;letter-spacing:-.025em;font-size:clamp(1.05rem,2.3vw,1.9rem);color:var(--tx)}
.ticker--sm .ticker__word{font-family:var(--sans);font-size:clamp(.78rem,1vw,.92rem);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ticker__dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--teal);flex:0 0 auto}
.ticker__word--out{color:transparent;-webkit-text-stroke:1.2px rgba(11,26,36,.34)}
.section--break .ticker__word{color:var(--tx-on-ink)}

/* --------------------------------------------------------------------------
   12. Credibility bar, per brief section 4
   -------------------------------------------------------------------------- */
.credbar{background:var(--card);border-block:1px solid var(--line-soft)}
.credbar__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media(max-width:820px){.credbar__in{grid-template-columns:minmax(0,1fr)}}
.cred{display:flex;gap:1rem;align-items:flex-start;padding:clamp(1.6rem,3vw,2.4rem) clamp(1.25rem,2.5vw,2rem);border-right:1px solid var(--line-soft)}
.cred:last-child{border-right:0}
@media(max-width:820px){.cred{border-right:0;border-bottom:1px solid var(--line-soft)}.cred:last-child{border-bottom:0}}
.cred__ico{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--emerald)}
.cred__ico svg{width:1.2rem;height:1.2rem;stroke:currentColor;fill:none;stroke-width:1.8}
.cred__t{font-family:var(--head);font-weight:700;font-size:clamp(1rem,1.5vw,1.15rem);letter-spacing:-.02em}
.cred__d{margin-top:.3rem;font-size:.9rem;color:var(--tx-2);line-height:1.5}

/* --------------------------------------------------------------------------
   13. How we work, per brief section 4
   -------------------------------------------------------------------------- */
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);counter-reset:step}
@media(max-width:900px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.process{grid-template-columns:minmax(0,1fr)}}
.pstep{position:relative;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(1.4rem,2.4vw,2rem);box-shadow:var(--sh-s);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.pstep:hover{box-shadow:var(--sh-m);transform:translateY(-3px)}
.pstep__n{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--emerald);color:var(--card);font-family:var(--head);font-weight:700;font-size:.9rem}
.pstep__t{margin-top:1rem;font-family:var(--head);font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-.025em}
.pstep__d{margin-top:.55rem;font-size:.93rem;color:var(--tx-2);line-height:1.55}
.pstep__arrow{position:absolute;top:50%;right:calc(-1 * clamp(1rem,2vw,1.5rem) / 2 - .55rem);transform:translateY(-50%);width:1.1rem;height:1.1rem;color:var(--teal);z-index:2}
.pstep__arrow svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}
.pstep:last-child .pstep__arrow{display:none}
@media(max-width:900px){.pstep__arrow{display:none}}
.process__note{margin-top:clamp(1.5rem,3vw,2.25rem);padding:1rem 1.25rem;border-left:3px solid var(--teal);background:var(--teal-wash);border-radius:0 var(--r) var(--r) 0;color:var(--tx-2);max-width:62ch}
.process__note strong{color:var(--tx);font-weight:600}

/* --------------------------------------------------------------------------
   14. The mediums, presented as a palette
   -------------------------------------------------------------------------- */
.mediums{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2vw,1.5rem)}
.medium{
  position:relative;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);
  padding:clamp(1.4rem,2.4vw,1.9rem);box-shadow:var(--sh-s);overflow:hidden;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);
}
.medium::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.medium:hover{box-shadow:var(--sh-m);transform:translateY(-3px);border-color:var(--line)}
.medium:hover::after{transform:scaleY(1);transform-origin:top}
.medium__ico{width:2.5rem;height:2.5rem;border-radius:12px;display:grid;place-items:center;background:var(--navy-soft);color:var(--navy)}
.medium__ico svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.7}
.medium__t{margin-top:1rem;font-family:var(--head);font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:700;letter-spacing:-.022em}
.medium__d{margin-top:.5rem;font-size:.92rem;color:var(--tx-2);line-height:1.55}
.medium__tags{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.35rem}
.medium__tag{font-size:.68rem;font-weight:600;letter-spacing:.04em;padding:.25rem .6rem;border-radius:var(--r-pill);background:var(--sand-2);color:var(--tx-2)}
.palette-note{margin-top:clamp(1.5rem,3vw,2.25rem);font-size:.95rem;color:var(--tx-2);max-width:62ch}

/* --------------------------------------------------------------------------
   15. Work, filterable tiles on the dark section
   -------------------------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.filter{
  padding:.55rem 1.1rem;border-radius:var(--r-pill);border:1px solid var(--line-on-ink);
  background:transparent;color:var(--tx-on-ink-2);cursor:pointer;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.filter:hover{color:var(--tx-on-ink);border-color:var(--teal)}
.filter.is-on{background:var(--teal);border-color:var(--teal);color:#03231f}
.workgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.tile{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line-on-ink-soft);cursor:pointer;text-align:left;padding:0;color:inherit;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.tile[hidden]{display:none}
.tile__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover .tile__media img{transform:scale(1.05)}
.tile__body{padding:clamp(1rem,1.8vw,1.35rem);display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}
.tile__k{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.tile__t{margin-top:.3rem;font-family:var(--head);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--tx-on-ink)}
.tile__n{font-size:.7rem;font-weight:500;color:var(--tx-on-ink-3)}
.workempty{margin-top:2rem;color:var(--tx-on-ink-2)}

/* --------------------------------------------------------------------------
   16. Production
   -------------------------------------------------------------------------- */
.formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
@media(max-width:1000px){.formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.formats{grid-template-columns:minmax(0,1fr)}}
.format{
  position:relative;border:1px solid var(--line-on-ink-soft);border-radius:var(--r);background:var(--ink-2);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.format:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.format__media{position:relative;overflow:hidden;background:var(--sand-2)}
.format__media--wide{aspect-ratio:16/9}
.format__media--tall{aspect-ratio:9/16;max-height:22rem}
.format__media--sq{aspect-ratio:4/3}
.format__media img,.format__media video{width:100%;height:100%;object-fit:cover}
.format__body{padding:clamp(1rem,1.8vw,1.4rem);display:flex;flex-direction:column;gap:.4rem;flex:1}
.format__k{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.format__t{font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--tx-on-ink)}
.format__d{font-size:.88rem;color:var(--tx-on-ink-2);line-height:1.5}
.showreel{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-on-ink);
  background:var(--ink-2);margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.showreel__media{position:relative;aspect-ratio:16/9;background:var(--sand-2);overflow:hidden}
.showreel__media img,.showreel__media video{width:100%;height:100%;object-fit:cover}
.showreel__body{padding:clamp(1.1rem,2vw,1.6rem);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}

/* play button, shared by reels, showreel and formats */
.reel__play,.playbtn{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.reel__play i,.playbtn i{
  width:clamp(3.25rem,6vw,4.5rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,248,243,.95);backdrop-filter:blur(6px);box-shadow:var(--sh-m);
  transition:transform .5s var(--ease),background .4s;
}
.reel__play:hover i,.playbtn:hover i{transform:scale(1.09);background:var(--teal)}
.reel__play svg,.playbtn svg{width:1.05rem;height:1.05rem;fill:var(--navy);margin-left:.15rem;transition:fill .4s}
.reel__play:hover svg,.playbtn:hover svg{fill:#fff}

/* audio player */
.audio{border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(1.2rem,2.2vw,1.75rem);background:linear-gradient(150deg,var(--card) 40%,var(--teal-soft));box-shadow:var(--sh-s)}
.audio__top{display:flex;align-items:center;gap:1rem}
.audio__btn{width:3.1rem;height:3.1rem;border-radius:50%;border:1.5px solid var(--emerald);background:var(--card);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background .35s,transform .35s var(--ease)}
.audio__btn svg{width:.9rem;height:.9rem;fill:var(--emerald);transition:fill .35s}
.audio__btn:hover{background:var(--emerald);transform:scale(1.05)}
.audio__btn:hover svg{fill:#fff}
.audio__wave{display:flex;align-items:center;gap:3px;height:2.5rem;flex:1;overflow:hidden;cursor:pointer}
.audio__wave b{flex:1;background:rgba(0,160,152,.3);border-radius:2px;min-height:12%;transition:height .18s linear,background .3s}
.audio.is-playing .audio__wave b{background:var(--teal)}

/* --------------------------------------------------------------------------
   17. Why brands choose us
   -------------------------------------------------------------------------- */
.whyus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
@media(max-width:900px){.whyus{grid-template-columns:minmax(0,1fr)}}
.why{position:relative;padding:clamp(1.6rem,2.6vw,2.25rem);border-radius:var(--r);background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh-s);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.why:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.why__n{font-family:var(--head);font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(14,92,74,.4)}
.why__t{margin-top:1rem;font-family:var(--head);font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:700;letter-spacing:-.025em}
.why__d{margin-top:.6rem;color:var(--tx-2);line-height:1.6}

/* --------------------------------------------------------------------------
   18. Sectors, jewellery highlighted
   -------------------------------------------------------------------------- */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.sector{
  position:relative;padding:clamp(1.3rem,2.2vw,1.75rem);border-radius:var(--r);
  background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh-s);
  display:flex;flex-direction:column;gap:.5rem;min-height:9.5rem;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.sector:hover{transform:translateY(-3px);box-shadow:var(--sh-m);border-color:var(--line)}
.sector__ico{width:2.2rem;height:2.2rem;color:var(--emerald)}
.sector__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.sector__t{font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-top:auto}
.sector__d{font-size:.86rem;color:var(--tx-2);line-height:1.5}
.sector--lead{
  grid-column:span 2;background-color:var(--emerald);
  background-image:linear-gradient(155deg,var(--emerald) 0%,#0a4638 100%);
  border-color:transparent;color:var(--card);
}
@media(max-width:620px){.sector--lead{grid-column:span 1}}
.sector--lead .sector__ico{color:var(--teal)}
.sector--lead .sector__d{color:rgba(243,238,230,.82)}
.sector--lead .sector__badge{
  display:inline-flex;align-self:flex-start;padding:.28rem .7rem;border-radius:var(--r-pill);
  background:#0a4638;color:#9fe9e0;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   19. Logo walls, accreditations and clients
   -------------------------------------------------------------------------- */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s)}
.logowall__i{
  padding:clamp(1.1rem,2vw,1.6rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:7.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;
  position:relative;overflow:hidden;transition:background .5s var(--ease);
}
.logowall__i::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--teal-wash),transparent 65%);opacity:0;transition:opacity .5s var(--ease)}
.logowall__i:hover::before{opacity:1}
.logowall__n{font-family:var(--head);font-size:clamp(.95rem,1.4vw,1.12rem);font-weight:700;letter-spacing:-.02em;position:relative;color:var(--tx)}
.logowall__c{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);position:relative}
.brandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s)}
.brandgrid__i{padding:clamp(1.25rem,2.4vw,2rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:8.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;position:relative;overflow:hidden}
.brandgrid__i::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--teal-wash),transparent 65%);opacity:0;transition:opacity .5s var(--ease)}
.brandgrid__i:hover::before{opacity:1}
.brandgrid__n{font-family:var(--head);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:700;letter-spacing:-.022em;position:relative;color:var(--tx)}
.brandgrid__c{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);position:relative}

.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.85rem;font-weight:500;background:var(--card);color:var(--tx);transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease)}
.chip::before{content:"";width:.36rem;height:.36rem;border-radius:50%;background:var(--teal)}
.chip:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-2px)}
.section--break .chip{background:var(--ink-2);border-color:var(--line-on-ink);color:var(--tx-on-ink)}

/* --------------------------------------------------------------------------
   20. Testimonials
   -------------------------------------------------------------------------- */
.quote{position:relative;padding:clamp(1.9rem,3.6vw,2.75rem) clamp(1.5rem,3vw,2.25rem);background:var(--card);border-radius:var(--r);box-shadow:var(--sh-s);border:1px solid var(--line-soft)}
.quote__mark{position:absolute;top:.05em;left:.25em;font-family:var(--head);font-size:clamp(4.5rem,10vw,8rem);line-height:1;color:var(--teal-soft);pointer-events:none;user-select:none}
.quote__t{position:relative;font-family:var(--head);font-weight:600;color:var(--tx);font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.38;letter-spacing:-.024em;max-width:36ch}
.quote__t + .quote__t{margin-top:1rem;font-family:var(--sans);font-weight:400;font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.62;color:var(--tx-2);max-width:50ch}
.quote__by{margin-top:clamp(1.4rem,2.6vw,2rem);display:flex;align-items:center;gap:1rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.quote__av{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:.95rem;flex:0 0 auto}
.quote__nm{font-weight:600;color:var(--tx)}
.quote__ro{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}

/* --------------------------------------------------------------------------
   21. CTA band and footer
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(56% 80% at 16% 100%,rgba(0,160,152,.18),transparent 62%),
    radial-gradient(56% 90% at 88% 0%,rgba(8,96,168,.16),transparent 60%),
    linear-gradient(168deg,var(--card),var(--sand-2));
}
.cta__title{font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.02;font-weight:800;letter-spacing:-.04em;max-width:18ch;color:var(--tx)}
.cta__row{margin-top:clamp(1.75rem,3.5vw,2.75rem);display:flex;flex-wrap:wrap;gap:1rem 2.25rem;align-items:center}

.footer{border-top:1px solid var(--line);background:var(--sand-2)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);padding-block:clamp(2.75rem,5.5vw,4.5rem)}
@media(max-width:860px){.footer__top{grid-template-columns:1fr 1fr}.footer__brandcol{grid-column:1/-1}}
@media(max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer__logo{height:3rem;width:auto;margin-bottom:1.1rem}
.footer__h{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:1rem}
.footer__list{display:flex;flex-direction:column;gap:.55rem}
.footer__list a,.footer__list span{color:var(--tx-2);font-size:.94rem;transition:color .35s var(--ease)}
.footer__list a:hover{color:var(--emerald)}
.footer__bot{border-top:1px solid var(--line);padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center}
.footer__bot p,.footer__bot a{font-size:.72rem;font-weight:500;letter-spacing:.06em;color:var(--tx-3)}
.footer__bot a:hover{color:var(--emerald)}

/* WhatsApp click to chat */
.wafloat{
  position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.15rem;border-radius:var(--r-pill);
  background:#25d366;color:#04220f;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 10px 30px -12px rgba(4,34,15,.6);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.wafloat:hover{transform:translateY(-3px);box-shadow:0 16px 36px -14px rgba(4,34,15,.7)}
.wafloat svg{width:1.15rem;height:1.15rem;fill:currentColor}
@media(max-width:560px){.wafloat span{display:none}.wafloat{padding:.95rem;border-radius:50%}}

/* --------------------------------------------------------------------------
   22. Forms, PDPA consent
   -------------------------------------------------------------------------- */
.form{display:grid;gap:clamp(1.05rem,2vw,1.5rem)}
.field{position:relative;display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.field input,.field textarea,.field select{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem 1rem;font-size:1rem;color:var(--tx);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-wash)}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}
.field--hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.15rem;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r)}
.consent input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--emerald)}
.consent label{font-size:.86rem;line-height:1.55;color:var(--tx-2);letter-spacing:0;text-transform:none;font-weight:400}
.consent a{color:var(--emerald);text-decoration:underline;text-underline-offset:2px}
.form__note{font-size:.83rem;color:var(--tx-3)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.05rem,2vw,1.5rem)}
@media(max-width:640px){.form__row{grid-template-columns:1fr}}

.infolist{display:grid;gap:1.4rem}
.info{border-top:1px solid var(--line);padding-top:1rem}
.info__k{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.info__v{margin-top:.45rem;font-family:var(--head);font-size:clamp(1.05rem,1.7vw,1.32rem);font-weight:700;letter-spacing:-.025em;color:var(--tx)}
.info__v a:hover{color:var(--emerald)}

/* --------------------------------------------------------------------------
   23. Retained components, inner pages
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:760px){.stats{grid-template-columns:minmax(0,1fr)}}
.stat{border-top:2px solid var(--line);padding-top:1.3rem}
.stat__n{font-family:var(--head);font-size:clamp(3rem,6.5vw,5.25rem);font-weight:800;line-height:.95;letter-spacing:-.05em;display:flex;align-items:flex-start;gap:.08em;color:var(--emerald)}
.stat__n sup{font-size:.32em;line-height:1;margin-top:.55em;color:var(--teal)}
.stat__k{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-top:.85rem}
.stat__d{color:var(--tx-2);margin-top:.45rem;max-width:26ch;font-size:.94rem}

.card{position:relative;padding:clamp(1.4rem,2.4vw,2.1rem);border:1px solid var(--line-soft);background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.card:hover{box-shadow:var(--sh-m);transform:translateY(-3px)}
.card:hover::after{transform:scaleY(1);transform-origin:top}
.section--break .card{background:var(--ink-2);border-color:var(--line-on-ink-soft)}
.card__n{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.card__t{margin-top:1rem;font-size:clamp(1.12rem,1.7vw,1.42rem);font-weight:700;letter-spacing:-.025em}
.card__d{margin-top:.7rem;color:var(--tx-2);font-size:.94rem;line-height:1.55}
.section--break .card__t{color:var(--tx-on-ink)}
.section--break .card__d{color:var(--tx-on-ink-2)}

.deflist{border-top:1px solid var(--line)}
.defrow{display:grid;grid-template-columns:minmax(7rem,14rem) 1fr;gap:clamp(1rem,3vw,3rem);padding-block:clamp(1.05rem,2.1vw,1.6rem);border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.defrow::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.defrow:hover::before{transform:scaleX(1)}
.defrow__k{font-family:var(--head);font-size:clamp(1.02rem,1.6vw,1.28rem);font-weight:700;letter-spacing:-.022em;color:var(--tx)}
.defrow__v{color:var(--tx-2)}
@media(max-width:640px){.defrow{grid-template-columns:1fr;gap:.4rem}}

[data-hz]{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(2.5rem,5vw,4rem)}
.hz{position:relative;overflow:hidden;flex:0 0 auto}
.hz__track{display:flex;gap:clamp(1rem,2vw,1.75rem);will-change:transform;padding-inline:var(--gutter);scrollbar-width:none}
.hz__track::-webkit-scrollbar{height:0;display:none}
.hz__panel{flex:0 0 min(78vw,25rem);height:min(52svh,27rem);position:relative;overflow:hidden;border:1px solid var(--line-soft);border-radius:var(--r);background:linear-gradient(170deg,var(--card) 30%,var(--navy-soft));box-shadow:var(--sh-s);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.4rem,2.4vw,2rem)}
.hz__panel__n{position:absolute;top:clamp(1.2rem,2.2vw,1.8rem);left:clamp(1.4rem,2.4vw,2rem);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.hz__panel__big{position:absolute;top:13%;left:0;right:0;text-align:center;font-family:var(--head);font-weight:800;font-size:clamp(4rem,11vw,8rem);letter-spacing:-.05em;line-height:.85;color:transparent;-webkit-text-stroke:1.5px rgba(8,96,168,.2);pointer-events:none}
.hz__panel__t{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.03em}
.hz__panel__d{margin-top:.6rem;color:var(--tx-2);font-size:.92rem;line-height:1.55}
.hz__panel--prod{background:linear-gradient(170deg,var(--card) 30%,var(--teal-soft))}
.hz__panel--prod .hz__panel__big{-webkit-text-stroke-color:rgba(0,160,152,.26)}
.hz__prog{height:3px;background:var(--line-soft);border-radius:3px;position:relative;margin-top:clamp(1.25rem,2.5vw,2rem);margin-inline:var(--gutter);overflow:hidden}
.hz__prog i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--teal),var(--navy))}

.steps{display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:clamp(4rem,10vw,9rem) 1fr;gap:clamp(1rem,3vw,3rem);padding-block:clamp(1.6rem,3.4vw,2.75rem);border-bottom:1px solid var(--line);position:relative}
.step__n{font-family:var(--head);font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:.9;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.5px rgba(14,92,74,.38);transition:color .5s,-webkit-text-stroke-color .5s}
.step:hover .step__n{color:var(--emerald);-webkit-text-stroke-color:transparent}
.step__t{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em}
.step__d{margin-top:.6rem;color:var(--tx-2);max-width:52ch}
@media(max-width:640px){.step{grid-template-columns:1fr;gap:.5rem}}

.figure{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sand-2);box-shadow:var(--sh-s)}
.figure img{width:100%;height:100%;object-fit:cover;will-change:transform}
.figure--tall{aspect-ratio:3/4}
.figure--wide{aspect-ratio:16/10}
.figure--film{aspect-ratio:16/9}
.figure__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.6rem) clamp(1rem,2vw,1.4rem);background:linear-gradient(transparent,rgba(251,248,243,.88) 42%,var(--card));display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;color:var(--tx)}
.figure__t{font-family:var(--head);font-weight:700;letter-spacing:-.02em;font-size:1rem}
.figure__m{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:.3rem}
.workitem{display:block;position:relative;overflow:hidden;border-radius:var(--r);cursor:pointer}
.workitem .figure img{transition:transform 1.1s var(--ease)}
.workitem:hover .figure img{transform:scale(1.045)}
.workitem:hover .figure{box-shadow:var(--sh-m)}

.reel{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--sh-s);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.reel:hover{box-shadow:var(--sh-m);transform:translateY(-3px)}
.reel__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sand-2)}
.reel__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.reel:hover .reel__media img{transform:scale(1.05)}
.reel__body{padding:clamp(1rem,1.9vw,1.4rem);display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.reel__t{font-weight:700;letter-spacing:-.022em;font-size:1.05rem}
.reel__k{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.reel__dur{font-size:.72rem;font-weight:500;color:var(--tx-3)}
.section--break .reel{background:var(--ink-2);border-color:var(--line-on-ink-soft)}
.section--break .reel__t{color:var(--tx-on-ink)}

.section--break .reel__dur{color:var(--tx-on-ink-3)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(232,224,211,.92);backdrop-filter:blur(14px);display:grid;place-items:center;padding:var(--gutter);opacity:0;pointer-events:none}
.lb.is-open{pointer-events:auto}
.lb__inner{width:min(92vw,74rem);position:relative}
.lb__media img,.lb__media video{width:100%;height:auto;max-height:80vh;object-fit:contain;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-l)}
.lb__close{position:absolute;top:-3.25rem;right:0;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-s)}
.lb__close::before,.lb__close::after{content:"";position:absolute;width:1rem;height:1.5px;background:var(--tx)}
.lb__close::before{transform:rotate(45deg)}.lb__close::after{transform:rotate(-45deg)}
.lb__close:hover{border-color:var(--emerald)}
.lb__cap{margin-top:1rem;display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-2)}

/* --------------------------------------------------------------------------
   24. Cursor, progress, grain
   -------------------------------------------------------------------------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:60}
.fx__grain{
  position:absolute;inset:-150%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity:.03;mix-blend-mode:multiply;animation:grain 1.2s steps(3) infinite;will-change:transform;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,1%)}}
.fx__vig{display:none}

.cursor{position:fixed;top:0;left:0;width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid var(--teal);pointer-events:none;z-index:80;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),opacity .3s,border-color .35s;display:grid;place-items:center;opacity:0}
.cursor__label{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s}
.cursor.is-lg{width:5.25rem;height:5.25rem;background:var(--emerald);border-color:transparent}
.cursor.is-lg .cursor__label{opacity:1}
.cursor.is-sm{width:.6rem;height:.6rem;background:var(--teal)}
@media(hover:none),(max-width:1040px){.cursor{display:none}}

.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:55;background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--navy))}

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0;top:0}
.stack-sm{display:grid;gap:.75rem}
.stack{display:grid;gap:1.5rem}
.stack-lg{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.flexrow{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.between{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end}
.mt-s{margin-top:1rem}.mt-m{margin-top:clamp(1.5rem,3vw,2.5rem)}.mt-l{margin-top:clamp(2.25rem,4.5vw,4rem)}
.tar{text-align:right}
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .fx__grain{display:none}
  .js [data-anim]{opacity:1!important;transform:none!important}
  .js .clip-reveal{clip-path:none!important}
}