@font-face { font-family:"TEKTON-Kiona"; src:url("assets/Kiona-Regular.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"TEKTON-Dana"; src:url("assets/DANA-REGULAR.woff2") format("woff2"); font-display:swap; }

:root {
  --navy:#172A3A;
  --cream:#F7F5F0;
  --warm:#E6E4DE;
  --muted:#526673;
  --word-size:clamp(66px,8.4vw,108px);
  --word-height:clamp(56px,7.2vw,88px);
  --track:.108em;
  --lock-gap:clamp(6px,.52vw,8px);
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; overflow:hidden; color:var(--cream); background:var(--navy); font-family:"TEKTON-Dana"; }

.ambient-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(circle at 14% 18%, rgba(82,102,115,.30), transparent 34%), radial-gradient(circle at 84% 78%, rgba(247,245,240,.055), transparent 42%), linear-gradient(180deg, var(--navy) 0%, var(--navy) 100%); }
.grain { position:absolute; inset:-20%; opacity:.055; background-image:radial-gradient(rgba(247,245,240,.045) 1px, transparent 1px); background-size:4px 4px; animation:grainMove 24s linear infinite; }
.field { position:absolute; border-radius:999px; filter:blur(78px); }
.field-a { width:38vw; height:38vw; left:-13vw; top:5vh; background:rgba(82,102,115,.20); animation:floatA 16s ease-in-out infinite; }
.field-b { width:28vw; height:28vw; right:0; bottom:4vh; background:rgba(247,245,240,.045); animation:floatB 18s ease-in-out infinite; }
.ambient-line { position:absolute; height:1px; background:linear-gradient(90deg, transparent, rgba(247,245,240,.14), transparent); opacity:.20; }
.line-a { width:42vw; left:8vw; top:23vh; animation:lineA 19s ease-in-out infinite; }
.line-b { width:34vw; right:8vw; bottom:24vh; animation:lineB 23s ease-in-out infinite; }
.ambient-mark { position:absolute; width:min(32vw,520px); right:10vw; top:26vh; height:auto; opacity:.032; animation:ambientMark 18s ease-in-out infinite; }

.intro { position:fixed; inset:0; z-index:6; display:grid; place-items:center; pointer-events:none; background:var(--navy); animation:introExit 7.8s ease forwards; }
.skip-intro .intro { display:none; }
.skip-intro .page { opacity:1; transform:none; animation:none; }
.intro-stage { position:relative; width:min(70vw,850px); height:min(42vw,460px); }
.intro-hbar, .intro-vbar, .intro-square { position:absolute; background:var(--cream); box-shadow:none; }
.intro-hbar { left:32%; top:37%; width:34%; height:clamp(12px,2vw,24px); opacity:0; animation:introHbar 7.8s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-vbar { left:60.8%; top:37%; width:clamp(12px,2vw,24px); height:28%; opacity:0; animation:introVbar 7.8s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-square { left:77%; top:32.8%; width:clamp(16px,2.2vw,28px); height:clamp(16px,2.2vw,28px); opacity:0; animation:introSquare 7.8s cubic-bezier(.24,.72,.28,1) forwards; }
.guide { position:absolute; display:block; background:rgba(82,102,115,.72); opacity:0; }
.guide-h { left:30%; right:20%; top:37%; height:1px; animation:guideH 7.8s ease forwards; }
.guide-v { left:68%; top:26%; bottom:30%; width:1px; animation:guideV 7.8s ease forwards; }
.intro-sweep { position:absolute; left:30%; top:28%; width:44%; height:36%; background:linear-gradient(110deg, transparent 38%, rgba(247,245,240,.11) 50%, transparent 62%); transform:translateX(-80%); opacity:0; animation:introSweep 7.8s ease forwards; }
.intro-type { position:absolute; left:50%; top:70%; direction:ltr; transform:translateX(-50%) translateY(10px); text-align:center; opacity:0; animation:introType 7.8s ease forwards; }
.intro-type strong { display:block; font-family:"TEKTON-Kiona"; font-weight:400; font-size:clamp(34px,5vw,72px); letter-spacing:.22em; line-height:.9; color:var(--cream); }
.intro-type small { display:block; margin-top:14px; font-family:"TEKTON-Kiona"; font-size:clamp(8px,1.1vw,14px); letter-spacing:.42em; color:rgba(247,245,240,.66); white-space:nowrap; }

.page { position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:clamp(18px,3.4vw,48px); opacity:0; transform:translateY(10px); animation:pageIn 7.8s ease forwards; }
.shell { width:min(100%,1180px); min-height:calc(100vh - 72px); display:grid; grid-template-rows:auto 1fr auto; gap:clamp(30px,4.5vw,58px); padding:clamp(34px,5vw,76px); border:1px solid rgba(247,245,240,.12); background:linear-gradient(180deg, rgba(23,42,58,.56), rgba(23,42,58,.30)); backdrop-filter:blur(8px); }

.hero-lockup { direction:ltr; }
.brand-row { direction:ltr; display:grid; grid-template-columns:auto clamp(100px,7.6vw,112px); align-items:center; column-gap:clamp(22px,2vw,30px); justify-content:start; }
.brand-lockup { direction:ltr; display:flex; align-items:center; gap:var(--lock-gap); height:var(--word-height); font-size:var(--word-size); line-height:.82; overflow:visible; }
.brand-mark-frame { position:relative; display:inline-block; flex:0 0 auto; width:.505em; height:.715em; overflow:visible; transform:translateY(.018em); }
.brand-mark-frame .brand-mark { position:absolute; left:50%; top:50%; width:1.36em; height:1.36em; max-width:none; display:block; transform:translate(-50%,-50%); }
.brand-ekt { font-family:"TEKTON-Kiona"; font-size:1em; line-height:.82; letter-spacing:var(--track); color:var(--cream); transform:translateY(.002em); }
.brand-state { position:relative; display:inline-block; flex:0 0 auto; width:1.14em; height:.82em; margin-left:-.035em; transform:translateY(-.002em); }
.state-word { position:absolute; left:0; top:50%; font-family:"TEKTON-Kiona"; font-size:1em; line-height:.82; letter-spacing:var(--track); color:var(--cream); transform:translateY(-50%); transition:opacity .34s ease, transform .34s ease; }
.state-word-off { opacity:.15; }
.state-word-on { opacity:0; transform:translateY(calc(-50% + .07em)); }
.is-on .state-word-off { opacity:0; transform:translateY(calc(-50% - .09em)); }
.is-on .state-word-on { opacity:1; transform:translateY(-50%); }

.silent-toggle { position:relative; width:clamp(100px,7.6vw,112px); height:clamp(50px,3.95vw,56px); padding:0; border:0; background:transparent; cursor:pointer; justify-self:start; transform:translateY(-.006em); transition:none; }
.toggle-rail { position:absolute; inset:0; border-radius:999px; border:1px solid rgba(247,245,240,.32); background:rgba(247,245,240,.060); box-shadow:inset 0 0 0 1px rgba(23,42,58,.18); transition:border-color .34s ease, background .34s ease, box-shadow .34s ease; }
.toggle-knob { position:absolute; left:6px; top:6px; bottom:6px; width:calc(50% - 8px); border-radius:999px; background:rgba(247,245,240,.50); box-shadow:0 8px 22px rgba(0,0,0,.18); transform:translateX(0); transition:transform .46s cubic-bezier(.2,.8,.2,1), background .34s ease, box-shadow .34s ease; }
.is-on .toggle-rail { border-color:rgba(247,245,240,.44); background:rgba(247,245,240,.11); box-shadow:0 0 24px rgba(247,245,240,.06); }
.is-on .toggle-knob { transform:translateX(calc(100% + 4px)); background:var(--cream); box-shadow:0 9px 24px rgba(0,0,0,.18); }
.silent-toggle:hover .toggle-rail { border-color:rgba(247,245,240,.54); background:rgba(247,245,240,.085); }
.silent-toggle:hover .toggle-knob { background:rgba(247,245,240,.68); }

.content-grid { display:grid; grid-template-columns:minmax(0,760px); justify-content:center; align-items:center; gap:0; }
.interaction-panel { position:relative; width:100%; min-height:clamp(390px,40vw,520px); border:1px solid rgba(247,245,240,.13); background:rgba(23,42,58,.28); overflow:hidden; }
.interaction-panel::before { content:""; position:absolute; inset:24px; border:1px solid rgba(247,245,240,.07); pointer-events:none; }
.off-gallery { position:absolute; inset:0; perspective:1000px; display:grid; place-items:center; transition:opacity .5s ease, transform .5s ease; }
.image-card { position:absolute; width:min(82%,510px); aspect-ratio:1.42; border:1px solid rgba(247,245,240,.18); background:var(--navy); overflow:hidden; opacity:var(--o,1); transform:translateX(var(--x,0)) translateY(var(--y,0)) rotate(var(--r,0)) scale(var(--s,1)); transition:transform .72s cubic-bezier(.2,.8,.2,1), opacity .72s ease; box-shadow:0 26px 72px rgba(23,42,58,.36); }
.image-card img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.78) contrast(.98) brightness(.78); }
.image-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(23,42,58,.22)); }
.on-statement { position:absolute; inset:0; display:grid; place-items:center; padding:clamp(34px,5vw,80px); text-align:center; opacity:0; transform:translateY(12px); transition:opacity .58s ease, transform .58s ease; }
.on-statement p.launch-line { margin:0; max-width:620px; color:var(--cream); font-size:clamp(24px,2.7vw,38px); line-height:1.9; font-weight:400; text-align:center; }
.is-on .off-gallery { opacity:0; transform:scale(.96); pointer-events:none; }
.is-on .on-statement { opacity:1; transform:translateY(0); }

.footer { direction:ltr; display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:center; gap:18px; color:rgba(247,245,240,.66); font-size:14px; }
.footer a { color:inherit; text-decoration:none; }
.footer-instagram { justify-self:start; }
.footer-address { justify-self:center; text-align:center; }
.footer-phone { justify-self:end; }

@keyframes introHbar { 0% { opacity:0; transform:scaleX(.92); } 10%,76% { opacity:1; transform:scaleX(1); } 100% { opacity:0; } }
@keyframes introVbar { 0% { opacity:0; transform:scaleY(.92); } 10%,76% { opacity:1; transform:scaleY(1); } 100% { opacity:0; } }
@keyframes guideH { 0%,24% { opacity:0; transform:scaleX(.6); } 36%,55% { opacity:.42; transform:scaleX(1); } 60%,100% { opacity:0; } }
@keyframes guideV { 0%,24% { opacity:0; transform:scaleY(.6); } 36%,55% { opacity:.42; transform:scaleY(1); } 60%,100% { opacity:0; } }
@keyframes introSquare { 0%,20% { opacity:0; transform:translateX(0); } 30%,42% { opacity:1; transform:translateX(0); } 58%,76% { opacity:1; transform:translateX(-7.7vw); } 100% { opacity:0; transform:translateX(-7.7vw); } }
@keyframes introSweep { 0%,66% { opacity:0; transform:translateX(-80%); } 76% { opacity:.40; } 88%,100% { opacity:0; transform:translateX(90%); } }
@keyframes introType { 0%,70% { opacity:0; transform:translateX(-50%) translateY(10px); } 82% { opacity:1; transform:translateX(-50%) translateY(0); } 92% { opacity:1; transform:translateX(-50%) translateY(0); } 100% { opacity:0; transform:translateX(-50%) translateY(-8px); } }
@keyframes introExit { 0%,92% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@keyframes pageIn { 0%,86% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes grainMove { from { transform:translate3d(0,0,0); } to { transform:translate3d(-30px,-22px,0); } }
@keyframes floatA { 0%,100% { transform:translate(0,0); } 50% { transform:translate(12px,-18px); } }
@keyframes floatB { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-12px,18px); } }
@keyframes lineA { 0%,100% { transform:translateX(0); opacity:.16; } 50% { transform:translateX(34px); opacity:.28; } }
@keyframes lineB { 0%,100% { transform:translateX(0); opacity:.12; } 50% { transform:translateX(-28px); opacity:.25; } }
@keyframes ambientMark { 0%,100% { opacity:.030; transform:translateY(0) scale(1); } 50% { opacity:.052; transform:translateY(-8px) scale(1.01); } }

@media (max-width:860px) {
  body { overflow:auto; }
  :root { --word-size:clamp(29px,7.45vw,36px); --word-height:clamp(28px,7vw,36px); --lock-gap:4px; }
  .page { padding:12px; }
  .shell { min-height:calc(100vh - 24px); padding:18px; gap:24px; }
  .brand-row { grid-template-columns:auto 66px; column-gap:10px; align-items:center; }
  .brand-mark-frame { width:.500em; height:.705em; transform:translateY(.016em); }
  .brand-mark-frame .brand-mark { width:1.32em; height:1.32em; }
  .brand-state { width:1.10em; margin-left:-.035em; transform:translateY(-.002em); }
  .silent-toggle { width:66px; height:38px; transform:translateY(-.006em); }
  .toggle-knob { left:5px; top:5px; bottom:5px; width:calc(50% - 7px); }
  .is-on .toggle-knob { transform:translateX(calc(100% + 4px)); }
  .interaction-panel { width:100%; max-width:calc(100vw - 60px); min-height:300px; justify-self:center; overflow:hidden; }
  .image-card { width:min(74%,250px); }
  .on-statement p.launch-line { font-size:clamp(19px,5.3vw,25px); line-height:1.85; }
  .footer { grid-template-columns:1fr; gap:10px; font-size:12px; }
  .footer-instagram, .footer-address, .footer-phone { justify-self:start; text-align:left; }
}

/* TEKTON V3.1 FINAL LOCKUP FIX START */

/* Desktop: reserve real space for OFF so the button never sits on the word. */
.brand-row {
  grid-template-columns:auto clamp(104px,7.8vw,114px) !important;
  column-gap:clamp(48px,4vw,64px) !important;
  align-items:center !important;
  justify-content:start !important;
}

.brand-lockup {
  gap:clamp(6px,.50vw,8px) !important;
}

/* Landmark optical correction: smaller, calmer, closer to Kiona cap-height. */
.brand-mark-frame {
  width:.472em !important;
  height:.675em !important;
  transform:translateY(.012em) !important;
}

.brand-mark-frame .brand-mark {
  width:1.24em !important;
  height:1.24em !important;
}

.brand-ekt {
  transform:translateY(.002em) !important;
}

/* OFF/ON: same tracking as EKT, but real slot width so it cannot collide with toggle. */
.brand-state {
  width:1.62em !important;
  height:.82em !important;
  margin-left:-.030em !important;
  transform:translateY(-.002em) !important;
  overflow:visible !important;
}

.state-word {
  font-size:1em !important;
  line-height:.82 !important;
  letter-spacing:var(--track) !important;
  transform:translateY(-50%) !important;
}

.state-word-off {
  opacity:.15 !important;
}

.state-word-on {
  opacity:0 !important;
  transform:translateY(calc(-50% + .070em)) !important;
}

.is-on .state-word-off {
  opacity:0 !important;
  transform:translateY(calc(-50% - .090em)) !important;
}

.is-on .state-word-on {
  opacity:1 !important;
  transform:translateY(-50%) !important;
}

/* Toggle: fixed body, separated from text. Only knob moves. */
.silent-toggle,
.is-on .silent-toggle {
  width:clamp(104px,7.8vw,114px) !important;
  height:clamp(50px,3.9vw,56px) !important;
  transform:translateY(-.006em) !important;
  transition:none !important;
  justify-self:start !important;
}

.toggle-knob {
  left:6px !important;
  top:6px !important;
  bottom:6px !important;
  width:calc(50% - 8px) !important;
}

.is-on .toggle-knob {
  transform:translateX(calc(100% + 4px)) !important;
}

/* Mobile: do not force all controls into one row. Logo row first, toggle below it. */
@media (max-width:860px) {
  :root {
    --word-size:clamp(31px,7.9vw,38px) !important;
    --word-height:clamp(30px,7.25vw,38px) !important;
    --lock-gap:4px !important;
  }

  .brand-row {
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:12px !important;
    column-gap:0 !important;
    justify-items:start !important;
  }

  .brand-lockup {
    max-width:100% !important;
    overflow:visible !important;
  }

  .brand-mark-frame {
    width:.468em !important;
    height:.668em !important;
    transform:translateY(.010em) !important;
  }

  .brand-mark-frame .brand-mark {
    width:1.22em !important;
    height:1.22em !important;
  }

  .brand-state {
    width:1.56em !important;
    margin-left:-.030em !important;
    transform:translateY(-.002em) !important;
  }

  .silent-toggle,
  .is-on .silent-toggle {
    width:74px !important;
    height:42px !important;
    margin-left:calc((.468em + var(--lock-gap)) + 3.22em) !important;
    transform:none !important;
  }

  .toggle-knob {
    left:5px !important;
    top:5px !important;
    bottom:5px !important;
    width:calc(50% - 7px) !important;
  }

  .is-on .toggle-knob {
    transform:translateX(calc(100% + 4px)) !important;
  }

  .interaction-panel {
    max-width:calc(100vw - 60px) !important;
    overflow:hidden !important;
  }
}

/* TEKTON V3.1 FINAL LOCKUP FIX END */

/* TEKTON V3.2 CALIBRATED LOCKUP START */

/*
  Measured from v3.1:
  Landmark was optically short at the baseline and slightly high.
  Correction: +size, +lowering, keep original SVG unchanged.
*/

.brand-row {
  grid-template-columns:auto clamp(104px,7.8vw,114px) !important;
  column-gap:clamp(42px,3.55vw,56px) !important;
  align-items:center !important;
  justify-content:start !important;
}

.brand-lockup {
  gap:clamp(6px,.50vw,8px) !important;
}

.brand-mark-frame {
  width:.508em !important;
  height:.715em !important;
  transform:translateY(.058em) !important;
}

.brand-mark-frame .brand-mark {
  width:1.36em !important;
  height:1.36em !important;
}

.brand-ekt {
  transform:translateY(.002em) !important;
}

/* OFF/ON slot: enough real width, typography locked to Kiona tracking. */
.brand-state {
  width:1.48em !important;
  height:.82em !important;
  margin-left:-.026em !important;
  transform:translateY(-.002em) !important;
  overflow:visible !important;
}

.state-word {
  font-size:1em !important;
  line-height:.82 !important;
  letter-spacing:var(--track) !important;
  transform:translateY(-50%) !important;
}

.state-word-off {
  opacity:.15 !important;
}

.state-word-on {
  opacity:0 !important;
  transform:translateY(calc(-50% + .070em)) !important;
}

.is-on .state-word-off {
  opacity:0 !important;
  transform:translateY(calc(-50% - .090em)) !important;
}

.is-on .state-word-on {
  opacity:1 !important;
  transform:translateY(-50%) !important;
}

/* Toggle: fixed body, clear distance from OFF/ON. */
.silent-toggle,
.is-on .silent-toggle {
  width:clamp(104px,7.8vw,114px) !important;
  height:clamp(50px,3.9vw,56px) !important;
  transform:translateY(-.004em) !important;
  transition:none !important;
  justify-self:start !important;
}

.toggle-knob {
  left:6px !important;
  top:6px !important;
  bottom:6px !important;
  width:calc(50% - 8px) !important;
}

.is-on .toggle-knob {
  transform:translateX(calc(100% + 4px)) !important;
}

@media (max-width:860px) {
  .brand-row {
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:12px !important;
    column-gap:0 !important;
    justify-items:start !important;
  }

  .brand-mark-frame {
    width:.500em !important;
    height:.705em !important;
    transform:translateY(.052em) !important;
  }

  .brand-mark-frame .brand-mark {
    width:1.32em !important;
    height:1.32em !important;
  }

  .brand-state {
    width:1.42em !important;
    margin-left:-.026em !important;
    transform:translateY(-.002em) !important;
  }

  .silent-toggle,
  .is-on .silent-toggle {
    width:74px !important;
    height:42px !important;
    margin-left:calc((.500em + var(--lock-gap)) + 3.12em) !important;
    transform:none !important;
  }

  .toggle-knob {
    left:5px !important;
    top:5px !important;
    bottom:5px !important;
    width:calc(50% - 7px) !important;
  }

  .is-on .toggle-knob {
    transform:translateX(calc(100% + 4px)) !important;
  }
}

/* TEKTON V3.2 CALIBRATED LOCKUP END */

/* TEKTON V3.3 DESKTOP TOGGLE CALIBRATION START */

/* Desktop-only correction:
   OFF/ON gets a real typographic slot,
   then the toggle sits as an independent control, not on top of the word.
*/
@media (min-width:861px) {
  .brand-row {
    grid-template-columns:auto clamp(104px,7.8vw,114px) !important;
    column-gap:clamp(64px,5.1vw,84px) !important;
    align-items:center !important;
    justify-content:start !important;
  }

  .brand-state {
    width:1.92em !important;
    height:.82em !important;
    margin-left:-.026em !important;
    transform:translateY(-.002em) !important;
    overflow:visible !important;
  }

  .state-word {
    font-size:1em !important;
    line-height:.82 !important;
    letter-spacing:var(--track) !important;
  }

  .silent-toggle,
  .is-on .silent-toggle {
    width:clamp(104px,7.8vw,114px) !important;
    height:clamp(50px,3.9vw,56px) !important;
    transform:translateY(-.004em) !important;
    transition:none !important;
    justify-self:start !important;
  }

  .toggle-knob {
    left:6px !important;
    top:6px !important;
    bottom:6px !important;
    width:calc(50% - 8px) !important;
  }

  .is-on .toggle-knob {
    transform:translateX(calc(100% + 4px)) !important;
  }
}

/* TEKTON V3.3 DESKTOP TOGGLE CALIBRATION END */

/* TEKTON V3.4 GALLERY SCROLL CONTROL START */
.interaction-panel {
  cursor:ns-resize;
}

.is-on .interaction-panel {
  cursor:default;
}
/* TEKTON V3.4 GALLERY SCROLL CONTROL END */

/* TEKTON V3.5 CONTACT IDENTITY POLISH START */

.footer.footer-pro {
  direction:ltr !important;
  display:grid !important;
  grid-template-columns:minmax(170px,.78fr) minmax(0,1.65fr) !important;
  align-items:end !important;
  gap:clamp(28px,4vw,64px) !important;
  color:rgba(247,245,240,.70) !important;
  font-family:"TEKTON-Kiona" !important;
}

.footer-brand-block {
  display:grid !important;
  gap:9px !important;
  justify-items:start !important;
}

.footer-brand-name {
  color:var(--cream) !important;
  font-size:clamp(13px,1vw,16px) !important;
  line-height:1 !important;
  letter-spacing:.22em !important;
  white-space:nowrap !important;
}

.footer-brand-sub {
  color:rgba(247,245,240,.42) !important;
  font-size:clamp(9px,.72vw,11px) !important;
  line-height:1.25 !important;
  letter-spacing:.18em !important;
  white-space:nowrap !important;
}

.footer-contact-block {
  display:grid !important;
  grid-template-columns:1.28fr .88fr .88fr !important;
  gap:clamp(20px,3vw,44px) !important;
  align-items:end !important;
  margin:0 !important;
  font-style:normal !important;
}

.footer-contact-item {
  display:grid !important;
  gap:8px !important;
  color:inherit !important;
  text-decoration:none !important;
  min-width:0 !important;
}

.footer-label {
  color:rgba(247,245,240,.34) !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
}

.footer-value {
  color:rgba(247,245,240,.72) !important;
  font-size:clamp(11px,.86vw,13px) !important;
  line-height:1.25 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}

.footer-phone .footer-value {
  letter-spacing:.10em !important;
}

.footer-instagram:hover .footer-value,
.footer-phone:hover .footer-value {
  color:var(--cream) !important;
}

@media (max-width:860px) {
  .footer.footer-pro {
    grid-template-columns:1fr !important;
    gap:18px !important;
    align-items:start !important;
  }

  .footer-contact-block {
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .footer-brand-name {
    font-size:13px !important;
  }

  .footer-brand-sub {
    font-size:9px !important;
  }

  .footer-label {
    font-size:8px !important;
  }

  .footer-value {
    font-size:11px !important;
    white-space:normal !important;
  }
}

/* TEKTON V3.5 CONTACT IDENTITY POLISH END */
/* TEKTON INTRO TYPE ONLY START */

/* Opening motion: remove constructed logo marks, keep only TEKTON typography. */
.intro-hbar,
.intro-vbar,
.intro-square,
.guide,
.intro-sweep {
  display:none !important;
}

.intro-stage {
  display:grid !important;
  place-items:center !important;
}

.intro-type {
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:translateY(8px) !important;
  opacity:0;
  animation:introTypeOnly 7.8s ease forwards !important;
}

.intro-type strong {
  font-family:"TEKTON-Kiona" !important;
  font-weight:400 !important;
  letter-spacing:.24em !important;
}

.intro-type small {
  margin-top:16px !important;
  opacity:.72 !important;
}

@keyframes introTypeOnly {
  0%, 18% {
    opacity:0;
    transform:translateY(10px);
  }
  34%, 82% {
    opacity:1;
    transform:translateY(0);
  }
  100% {
    opacity:0;
    transform:translateY(-8px);
  }
}

/* TEKTON INTRO TYPE ONLY END */
/* TEKTON FAST INTRO TIMING START */

/* Faster opening: short, clean, no waiting. */
.intro {
  animation:introExitFast 2.4s ease forwards !important;
}

.page {
  animation:pageInFast 2.4s ease forwards !important;
}

.intro-type {
  animation:introTypeOnlyFast 2.4s ease forwards !important;
}

@keyframes introTypeOnlyFast {
  0%, 14% {
    opacity:0;
    transform:translateY(8px);
  }
  32%, 72% {
    opacity:1;
    transform:translateY(0);
  }
  100% {
    opacity:0;
    transform:translateY(-6px);
  }
}

@keyframes introExitFast {
  0%, 82% {
    opacity:1;
  }
  100% {
    opacity:0;
    visibility:hidden;
  }
}

@keyframes pageInFast {
  0%, 70% {
    opacity:0;
    transform:translateY(8px);
  }
  100% {
    opacity:1;
    transform:translateY(0);
  }
}

/* TEKTON FAST INTRO TIMING END */
/* TEKTON MOBILE TOGGLE INLINE START */

/* Mobile header: button stays beside TEKTON, on the left side, not below. */
@media (max-width:860px) {
  .brand-row {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    direction:ltr !important;
  }

  .brand-lockup {
    order:2 !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .silent-toggle,
  .is-on .silent-toggle {
    order:1 !important;
    flex:0 0 74px !important;
    width:74px !important;
    height:42px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
    justify-self:auto !important;
  }

  .brand-state {
    width:1.42em !important;
  }
}

/* TEKTON MOBILE TOGGLE INLINE END */
/* TEKTON MOBILE HEADER TEXT LEFT TOGGLE RIGHT START */

/* Mobile final order:
   left  = TEKTON / OFF
   right = toggle
*/
@media (max-width:860px) {
  .brand-row {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 74px !important;
    column-gap:12px !important;
    align-items:center !important;
    justify-content:stretch !important;
    width:100% !important;
    direction:ltr !important;
  }

  .brand-lockup {
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .silent-toggle,
  .is-on .silent-toggle {
    grid-column:2 !important;
    grid-row:1 !important;
    width:74px !important;
    height:42px !important;
    margin:0 !important;
    transform:none !important;
    justify-self:end !important;
  }

  .brand-state {
    width:1.42em !important;
  }
}

/* TEKTON MOBILE HEADER TEXT LEFT TOGGLE RIGHT END */
/* TEKTON MOBILE HORIZONTAL GALLERY START */

/* Mobile gallery: visible side cards, left/right swipe. */
@media (max-width:860px) {
  .interaction-panel {
    cursor:ew-resize !important;
    touch-action:pan-y !important;
  }

  .off-gallery {
    overflow:hidden !important;
  }

  .image-card {
    width:min(72%,245px) !important;
    transform:
      translateX(var(--x, 0))
      translateY(var(--y, 0))
      rotate(var(--r, 0))
      scale(var(--s, 1)) !important;
    opacity:var(--o, 1) !important;
  }
}

/* TEKTON MOBILE HORIZONTAL GALLERY END */