/* =================================================================
   ESENCORE — CORE
   The shared half of the design system: tokens, reset, type, buttons,
   the photographic grade, navigation, footer and motion. index.html and
   trust.html both link this, so a palette change lands on both at once.
   Section-specific CSS stays inline in the page that owns it.
   ================================================================= */
/* =================================================================
   ESENCORE — CINEMATIC BUILD
   One committed dark world. Every colour painted explicitly.
   ================================================================= */
:root{
  color-scheme: dark;

  /* ---------------------------------------------------------------
     GROUNDS — near-black with a cool undertone. Four close steps, so
     sections separate by a hair rather than by contrast.
     --------------------------------------------------------------- */
  --white:  #12171C;   /* elevated surface   */
  --ink:    #080B0E;   /* page ground        */
  --ink-2:  #0B0F13;   /* cool surface       */
  --ink-3:  #0E1318;   /* raised surface     */
  --void:   #040608;   /* deepest — the equipment interiors */
  --steel:  #8C99A3;

  /* Text */
  --chrome: #EEF3F6;
  --dim:    #9AA5AD;
  --faint:  #78838B;

  /* Lines */
  --line:   rgba(238,243,246,.10);
  --line-2: rgba(238,243,246,.22);

  /* One restrained cyan. State, rails, focus — never decoration. */
  --accent:     #4FC3DC;
  --accent-2:   #7FD9EC;
  --accent-dim: #2E7488;   /* hairlines and rules — not text */
  --accent-txt: #3A90A8;   /* the same cyan, bright enough to read at 10px */
  --mute-head:  #78909F;

  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-hero:  clamp(2.5rem, 7vw, 7.75rem);
  --fs-h2:    clamp(1.875rem, 5.4vw, 5.25rem);
  --fs-h3:    clamp(2.125rem, 3.7vw, 3.625rem);
  --fs-body:  clamp(1.0625rem, 1.05vw, 1.1875rem);
  --fs-label: .6875rem;
  --fs-micro: .625rem;

  /* Scene rhythm — each section is its own room */
  --pad:    clamp(5rem, 10.5vw, 12.25rem);
  --gutter: clamp(22px, 5vw, 72px);
  --maxw:   1320px;
  --nav-h:  78px;

  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-soft: cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body{
  margin:0;
  background: var(--ink);
  color: var(--chrome);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
figure,figcaption{ margin:0; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:500; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}
.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; }

/* =================================================================
   DARK SCOPE
   A section marked .on-dark redeclares the same tokens in navy, so
   every component inside inherits the darker lighting without a
   single component rule being rewritten. This is how the page moves
   between daylight and the cinematic equipment moments.
   ================================================================= */
.on-dark{
  --white:  #080B0E;
  --ink:    #040608;
  --ink-2:  #06090C;
  --ink-3:  #0A0E12;
  --chrome: #EEF3F6;
  --dim:    #98A3AB;
  --faint:  #6F7A82;
  --line:   rgba(238,243,246,.09);
  --line-2: rgba(238,243,246,.20);
  --accent:     #4FC3DC;
  --accent-2:   #7FD9EC;
  --accent-dim: #2E7488;
  --accent-txt: #3A90A8;
  --mute-head:  #6E8794;
  background: var(--ink);
  color: var(--chrome);
}

/* =================================================================
   LIGHT SCOPE
   The mirror of .on-dark. Same token names, daylight values — so a
   section can be lit from the other side without one component rule
   being rewritten.
   ================================================================= */
.on-light{
  color-scheme: light;
  --white:  #FFFFFF;
  --ink:    #EEF3F7;
  --ink-2:  #E7EDF3;
  --ink-3:  #F4F7FA;
  --void:   #DCE4EB;
  --chrome: #0B1622;
  --dim:    #3C4A56;
  --faint:  #5C6A75;
  --line:   rgba(11,22,34,.14);
  --line-2: rgba(11,22,34,.26);
  --accent:     #2C7CB4;
  --accent-2:   #1E5F8E;
  --accent-dim: #7FB4DA;
  --accent-txt: #2F72A2;
  --mute-head:  #587693;
  background: var(--ink);
  color: var(--chrome);
}
/* A filled button in daylight is a dark slab with light type. */
.on-light .btn-fill{ background:var(--chrome); color:#F2F7FB; }
.on-light .btn-fill:hover{ background:#132434; }
.on-light .btn-fill:hover .arw{ color:var(--accent-dim); }

/* Section grounds for the scroll progression */
.bg-white{
  background:radial-gradient(120% 84% at 50% 10%,
    #14191F 0%, #101519 44%, #0B0F13 78%, #080B0E 100%);
}
.bg-ice{
  background:radial-gradient(114% 82% at 26% 6%,
    #0E1318 0%, #0B0F13 46%, #090C10 80%, #06090C 100%);
}
.bg-gray{
  background:radial-gradient(118% 84% at 74% 4%,
    #111620 0%, #0D1216 48%, #0A0E12 82%, #070A0D 100%);
}

/* ---------- Type components ---------- */
.eyebrow{
  font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  display:inline-flex; align-items:center; gap:.85rem; line-height:1;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--accent-dim); flex:none; }

.title{
  font-size:var(--fs-h2);
  line-height:.92; letter-spacing:-.038em;
  text-transform:uppercase; font-weight:500;
}
.title span{ display:block; }
.title .mute{ color:var(--mute-head); }

.copy{
  color:var(--dim); line-height:1.75; max-width:58ch;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.9rem;
  font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
  padding:1.2rem 1.9rem; border:1px solid transparent; border-radius:1px;
  cursor:pointer; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-fill{ background:var(--chrome); color:#06090C; }
.btn-fill:hover{ background:#FFFFFF; transform:translateY(-1px); }
.btn-fill:hover .arw{ color:var(--accent-2); }
.btn-line{ background:transparent; color:var(--chrome); border-color:var(--line-2); }
.btn-line:hover{ border-color:var(--chrome); background:rgba(238,243,246,.06); transform:translateY(-1px); }
.btn-line:hover .arw{ color:var(--accent); }

/* =================================================================
   PHOTOGRAPHIC GRADE
   Source photography is bright and clinical. These layers carry it
   to the brand's dark, cool, film-still register.
   ================================================================= */
.frame{
  position:relative; overflow:hidden;
  background:var(--void);
  isolation:isolate;
}
/* Fallback field — a lit tonal ground, visible before/if the photo is absent */
.frame::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(64% 48% at var(--kx,32%) var(--ky,26%), var(--k1,rgba(168,194,208,.52)) 0%, transparent 70%),
    radial-gradient(52% 42% at var(--bx,82%) var(--by,84%), var(--k2,rgba(72,116,136,.44)) 0%, transparent 66%),
    radial-gradient(140% 60% at 50% 112%, rgba(140,170,186,.16) 0%, transparent 60%),
    linear-gradient(93deg, transparent 0%, rgba(196,218,228,.075) 13%, transparent 27%,
      transparent 43%, rgba(196,218,228,.05) 55%, transparent 69%,
      rgba(196,218,228,.065) 83%, transparent 97%),
    linear-gradient(var(--ang,164deg), #2B363D 0%, #192228 36%, #0D1317 72%, #05080A 100%);
}
.frame img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.74) contrast(1.12) saturate(.62);
  transform: translate3d(0,0,0) scale(1.12);
  will-change: transform;
}
.on-dark .frame img{ filter: brightness(.66) contrast(1.14) saturate(.56); }
.frame.noimg img{ display:none; }
.frame.noimg .vig{ opacity:.55; }
/* Vignette, cool wash, top/bottom falloff */
.frame .vig{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(124% 94% at 50% 42%, rgba(4,6,8,0) 34%, rgba(4,6,8,.56) 100%),
    linear-gradient(180deg, rgba(4,6,8,.30) 0%, rgba(4,6,8,0) 28%, rgba(4,6,8,0) 66%, rgba(4,6,8,.46) 100%),
    linear-gradient(0deg, rgba(18,52,66,.16), rgba(18,52,66,.16));
}
/* Film grain — one tiled raster, reused everywhere */
.frame::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.18;
}

/* =================================================================
   NAVIGATION
   ================================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  color:var(--chrome);
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-scrolled{
  background:rgba(6,9,12,.78);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:var(--line);
}
.nav-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{ display:flex; flex-direction:column; gap:.34rem; margin-right:auto; }
.brand b{
  font-family:var(--display); font-weight:500; font-size:1.0625rem;
  letter-spacing:.26em; text-transform:uppercase; line-height:1;
}
.brand i{
  font-style:normal; font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.26em; text-transform:uppercase; line-height:1; color:var(--faint);
}
.nav-links{ display:none; gap:clamp(1.25rem,2.3vw,2.25rem); align-items:center; }
@media (min-width:1080px){ .nav-links{ display:flex; } }
.nav-link{
  font-size:.8125rem; font-weight:500; color:var(--dim);
  position:relative; padding-block:.45rem;
  transition:color .35s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent-dim); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.nav-link:hover{ color:var(--chrome); }
.nav-link:hover::after,.nav-link.on::after{ transform:scaleX(1); }
.nav-link.on{ color:var(--chrome); }
.nav-cta{ display:none; }
@media (min-width:800px){ .nav-cta{ display:inline-flex; padding:.9rem 1.35rem; margin-left:.75rem; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; padding:0 11px; margin-right:-11px;
  background:none; border:0; cursor:pointer; color:var(--chrome);
}
@media (min-width:1080px){ .burger{ display:none; } }
.burger span{ display:block; height:1.5px; width:100%; background:currentColor;
  transition:transform .45s var(--ease), opacity .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(4,6,8,.97);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  padding:calc(var(--nav-h) + 2.5rem) var(--gutter) 2.5rem;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  overflow-y:auto;
}
.menu.open{ opacity:1; visibility:visible; transform:none; }
.menu nav{ display:flex; flex-direction:column; }
.menu a.ml{
  display:block;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,7vw,2rem);
  letter-spacing:-.02em; text-transform:uppercase;
  padding-block:.95rem; border-bottom:1px solid var(--line);
}
.menu .btn{ margin-top:2.25rem; width:100%; }
.menu p{ margin-top:auto; padding-top:2rem; font-family:var(--mono);
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
body.locked{ overflow:hidden; }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding-block:clamp(3.5rem,6vw,5rem) 2.5rem; }
.footer-top{ display:grid; gap:clamp(2.5rem,4vw,3.5rem); }
@media (min-width:780px){ .footer-top{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); } }
.footer address{ font-style:normal; margin-top:1.35rem; color:var(--faint); font-size:.875rem; line-height:1.8; }
.footer h4{ font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:1.2rem; }
.footer-links{ display:flex; flex-direction:column; gap:.75rem; }
.footer-links a{ font-size:.875rem; color:var(--dim); width:fit-content; transition:color .35s var(--ease); }
.footer-links a:hover{ color:var(--chrome); }
.footer-bot{
  margin-top:clamp(3rem,5vw,4.5rem); padding-top:1.85rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:1.1rem;
  font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
@media (min-width:880px){ .footer-bot{ flex-direction:row; align-items:center; justify-content:space-between; } }

/* =================================================================
   MOTION — groups, not elements
   ================================================================= */
.js [data-in]{ opacity:0; transform:translateY(28px); }
.js [data-in].in{
  opacity:1; transform:none;
  transition:opacity 1.15s var(--ease-soft), transform 1.15s var(--ease-soft);
  transition-delay:var(--d,0ms);
}
.js .hero [data-h]{ opacity:0; transform:translateY(24px); }
.js .hero.ready [data-h]{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-in], .js .hero [data-h]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .frame img{ transform:none !important; scale:1.02; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}