:root{
  --navy:#063f5b;
  --navy-deep:#05354d;
  --ink:#07364f;
  --paper:#ffffff;
  --gap:12px;
  --footer-h:56px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
a{color:inherit}
img{display:block;max-width:100%}

.tc-page{
  min-height:100vh;
  height:100vh;
  display:grid;
  grid-template-rows:minmax(0,1fr) var(--footer-h);
  overflow:hidden;
  background:#fff;
}

.tc-stage{
  min-height:0;
  display:grid;
  grid-template-columns:29.6fr 29.8fr 40.6fr;
  gap:var(--gap);
  overflow:hidden;
  background:#fff;
}

.gateway{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:visible;
  background:#e8edf0;
}
.gateway:hover,
.gateway:focus-within{
  z-index:10;
}
.gateway-link{
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
  text-decoration:none;
  outline:none;
}
.gateway-art{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#eef1f3;
}
.mockup-source{
  position:absolute;
  max-width:none;
  width:auto;
  height:113.7%;
  user-select:none;
  pointer-events:none;
  transition:transform .38s ease,filter .38s ease,opacity .35s ease;
}
.mockup-atmi{
  left:0;
  top:-5.7%;
}
.mockup-bizdec{
  left:-101.8%;
  top:-5.7%;
}

.bizdec-live-grid{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:3px;
  width:100%;
  height:100%;
  background:#fff;
  opacity:0;
  transition:opacity .38s ease;
  pointer-events:none;
}
.bizdec-live-grid.is-live{opacity:1}
.bizdec-live-grid.is-live + *{opacity:0}
.bizdec-live-tile{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#d9d9d9;
}
.bizdec-live-tile-1{grid-column:1/4;grid-row:1/4}
.bizdec-live-tile-2{grid-column:4/7;grid-row:1/3}
.bizdec-live-tile-3{grid-column:4/6;grid-row:3/5}
.bizdec-live-tile-4{grid-column:6/7;grid-row:3/5}
.bizdec-live-tile-5{grid-column:1/3;grid-row:4/7}
.bizdec-live-tile-6{grid-column:3/4;grid-row:4/7}
.bizdec-live-tile-7{grid-column:4/7;grid-row:5/7}
.bizdec-live-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
  opacity:1;
  transition:opacity .25s ease,transform .45s ease;
}
.bizdec-live-tile.is-changing img{
  opacity:0;
  transform:scale(1.04);
}
.gateway-bizdec .bizdec-fallback{
  transition:transform .38s ease,filter .38s ease,opacity .38s ease;
}
.gateway-bizdec .gateway-art.has-live-feed .bizdec-fallback{opacity:0}

.gateway-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  background:rgba(5,58,83,.81);
  color:#fff;
  opacity:0;
  transition:opacity .28s ease;
}
.gateway-link:hover .gateway-overlay,
.gateway-link:focus-visible .gateway-overlay{
  opacity:1;
}
.gateway-link:hover .mockup-source,
.gateway-link:focus-visible .mockup-source{
  transform:scale(1.012);
  filter:saturate(.86) contrast(1.02);
}
.gateway-copy{
  position:absolute;
  z-index:2;
  top:7.3%;
  left:9.5%;
  right:17.5%;
  max-width:470px;
  font-size:clamp(12px,1.02vw,16px);
  line-height:1.28;
  font-weight:400;
}
.gateway-copy h2{
  margin:0 0 18px;
  font-size:clamp(15px,1.22vw,19px);
  line-height:1.15;
  font-weight:700;
}
.gateway-copy p{
  margin:0 0 17px;
}
.brand-tab{
  position:absolute;
  z-index:4;
  top:0;
  right:0;
  width:clamp(50px,3.6vw,66px);
  height:clamp(132px,12vw,172px);
  background:var(--navy-deep);
  border-radius:0 0 34px 0;
  overflow:hidden;
  transform:translateX(calc(100% - 18px));
}
.brand-tab span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
  white-space:nowrap;
  color:#fff;
  font-size:clamp(25px,2.25vw,36px);
  line-height:1;
  font-weight:700;
  letter-spacing:.01em;
}
.gateway-bizdec .brand-tab{
  height:clamp(152px,13.8vw,192px);
}

.gateway-overlay::after{
  content:"";
  position:absolute;
  z-index:3;
  top:clamp(124px,11.5vw,164px);
  right:0;
  bottom:0;
  width:18px;
  background:var(--navy-deep);
  pointer-events:none;
}
.gateway-bizdec .gateway-overlay::after{
  top:clamp(144px,13.3vw,184px);
}

.identity-panel{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.identity-watermark{
  position:absolute;
  z-index:1;
  width:72%;
  max-width:none;
  height:auto;
  right:0;
  top:1%;
  opacity:1;
  pointer-events:none;
  user-select:none;
}
.identity-lockup{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 7%;
  text-align:center;
  transform:translateY(-7%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.identity-logo{
  width:clamp(150px,12.4vw,225px);
  height:auto;
  margin:0 auto clamp(22px,2.1vh,31px);
}
.identity-title h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(21px,1.9vw,31px);
  line-height:1.04;
  letter-spacing:.002em;
  font-weight:700;
}
.identity-title p{
  margin:5px 0 0;
  color:var(--ink);
  font-size:clamp(16px,1.5vw,24px);
  line-height:1;
  font-style:italic;
  font-weight:700;
}
.identity-motto{
  margin:clamp(42px,5.7vh,68px) 0 0;
  color:#173e57;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(14px,1.28vw,20px);
  line-height:1.2;
  letter-spacing:.025em;
  white-space:nowrap;
}
.identity-nav{
  position:absolute;
  z-index:3;
  left:8%;
  right:8%;
  bottom:7.8%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(35px,5.2vw,84px);
  white-space:nowrap;
}
.identity-nav a{
  text-decoration:none;
  color:var(--ink);
  font-size:clamp(13px,1.1vw,19px);
  line-height:1;
  font-weight:400;
  transition:opacity .18s ease,transform .18s ease;
}
.identity-nav a:hover,
.identity-nav a:focus-visible{
  opacity:.55;
  transform:translateY(-1px);
}
.identity-nav .is-pending{
  cursor:default;
}

.tc-footer{
  height:var(--footer-h);
  padding:0 clamp(24px,3.4vw,62px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:var(--navy);
  color:#fff;
  font-size:clamp(11px,1vw,17px);
  line-height:1.2;
  white-space:nowrap;
}
.footer-copy{text-align:right}

@media (max-width:1280px){
  :root{--gap:8px;--footer-h:50px}
  .gateway-copy{left:8%;right:18%;font-size:12px}
  .gateway-copy h2{font-size:15px}
  .identity-watermark{width:72%;right:0;top:1%}
  .identity-nav{gap:38px}
  .tc-footer{font-size:11px}
}

@media (max-width:900px){
  html,body{min-height:100%;overflow:auto}
  .tc-page{
    height:auto;
    min-height:100vh;
    display:block;
    overflow:visible;
  }
  .tc-stage{
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow:visible;
  }
  .identity-panel{
    order:-1;
    min-height:72svh;
  }
  .gateway{
    min-height:82svh;
  }
  .mockup-source{height:113.7%}
  .gateway-copy{
    top:8%;
    left:8%;
    right:18%;
    font-size:clamp(13px,2.8vw,17px);
  }
  .gateway-copy h2{font-size:clamp(17px,3.2vw,21px)}
  .brand-tab{top:0;width:62px;height:150px;transform:translateX(calc(100% - 18px))}
  .gateway-bizdec .brand-tab{height:168px}
  .brand-tab span{font-size:30px}
  .gateway-overlay::after{top:142px;width:18px}
  .gateway-bizdec .gateway-overlay::after{top:160px}
  .identity-logo{width:min(34vw,210px)}
  .identity-nav{bottom:8%;gap:clamp(24px,7vw,64px)}
  .identity-nav a{font-size:clamp(13px,3.3vw,17px)}
  .tc-footer{
    height:auto;
    min-height:76px;
    padding:18px 22px;
    white-space:normal;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
  }
  .footer-copy{text-align:left}
}

@media (hover:none){
  .gateway-overlay{opacity:0}
  .gateway-link:focus .gateway-overlay{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}
