/* ===== ONE SHIELD — Tiwis-style build ===== */

@font-face{font-family:"Aratigo";src:url("assets/fonts/aratigo-a.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aratigo";src:url("assets/fonts/aratigo-b.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aratigo";src:url("assets/fonts/aratigo-c.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Almarena";src:url("assets/fonts/almarena-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Almarena";src:url("assets/fonts/almarena-a.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Almarena";src:url("assets/fonts/almarena-b.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#05070c;
  --white:#f4f6fa;
  --white-dim:rgba(244,246,250,.62);
  --white-faint:rgba(244,246,250,.34);
  --accent:#e94a26;               /* red-orange arrow accent */
  --line:rgba(244,246,250,.18);

  --ff:"Aratigo", "Helvetica Neue", Arial, sans-serif;
  --ff-disp:"Almarena", "Aratigo", Arial, sans-serif;

  --gut:clamp(1.3rem, 4vw, 4.5rem);
  --sec:clamp(7rem, 16vh, 16rem);
  --ease:cubic-bezier(.19,1,.22,1);
  --maxw:1600px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--ff);background:var(--ink);color:var(--white);line-height:1.32;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ===== animated blue gradient background ===== */
.bg{position:fixed;inset:0;z-index:-2;background:var(--ink);overflow:hidden}
.bg__layer{position:absolute;inset:-25%;background:url("assets/tiwis/blizar.png") center/cover no-repeat;
  animation:drift 34s ease-in-out infinite alternate;transform-origin:60% 40%;will-change:transform}
@keyframes drift{
  0%{transform:scale(1.12) translate(0,0) rotate(0deg)}
  50%{transform:scale(1.3) translate(-4%,3%) rotate(3deg)}
  100%{transform:scale(1.18) translate(3%,-3%) rotate(-3deg)}
}
.bg__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem var(--gut);transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-130%)}
.nav__logo img{height:30px;width:auto;filter:brightness(0) invert(1)}
.nav__links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2.4rem}
.nav__links a{font-size:.82rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--white);opacity:.85;transition:opacity .25s}
.nav__links a:hover{opacity:1}
.nav__right{display:flex;align-items:center;gap:1.3rem}
.nav__phone{font-size:.82rem;font-weight:500;letter-spacing:.02em;opacity:.8}
.nav__phone:hover{opacity:1}
.pill{display:inline-flex;align-items:center;gap:.7rem;background:var(--white);color:var(--ink);
  padding:.6rem .7rem .6rem 1.2rem;border-radius:100px;font-size:.8rem;font-weight:500;letter-spacing:.01em;will-change:transform}
.pill__arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--white);transition:background .3s,color .3s}
.pill:hover .pill__arrow{background:var(--accent);color:#fff}
@media (max-width:1000px){ .nav__links{display:none} .nav__phone{display:none} }

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) clamp(1.5rem,4vh,3rem)}
.hero__tag{position:absolute;top:clamp(28vh,32vh,34vh);right:var(--gut);max-width:30ch;text-align:left;
  font-family:var(--ff);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.65rem);line-height:1.28;color:var(--white)}
.wordmark{font-family:var(--ff-disp);font-weight:700;line-height:.82;letter-spacing:-.03em;text-transform:uppercase;
  font-size:clamp(5rem,20vw,20rem)}
.wordmark .ln{display:block;overflow:hidden}
.wordmark .ln > span{display:block}

/* ===== STATEMENTS ===== */
.statement{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut);position:relative}
.statement--alt .statement__big{margin-left:auto}
.label{display:inline-block;font-family:var(--ff);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);opacity:.55;margin-bottom:2rem}
.statement--alt .label{position:absolute;right:var(--gut)}
.statement__big{font-family:var(--ff-disp);font-weight:400;font-size:clamp(2rem,4.4vw,4.6rem);line-height:1.12;letter-spacing:-.01em;
  max-width:22ch}
.statement--alt .statement__big{text-align:left;margin-top:1.4rem}
.statement__big--sm{font-size:clamp(1.7rem,3.4vw,3.4rem);max-width:20ch}

/* ===== OFFER — horizontal pinned scroll ===== */
.hscroll{position:relative;overflow:hidden}
.htrack{display:flex;align-items:center;gap:clamp(2rem,4vw,5rem);padding:0 var(--gut);height:100vh;will-change:transform}
.hpanel{flex:0 0 auto;display:flex;align-items:center;gap:clamp(2rem,4vw,4.5rem)}
.hpanel--intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.4rem;padding-right:clamp(1rem,3vw,3rem)}
.hpanel__lead{font-family:var(--ff-disp);font-weight:400;font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:1.02;letter-spacing:-.01em}
.hpanel__hint{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hpanel__hint i{font-style:normal;display:inline-block;margin-left:.4rem}

.offer__card{position:relative;flex:0 0 auto;
  width:min(62vw,760px);aspect-ratio:var(--ar, 3 / 2);
  border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;padding:1.6rem;
  background:linear-gradient(155deg,#1a3a5e,#0a1a30 60%,#050b16);border:1px solid rgba(244,246,250,.1)}
.offer__card--plain{width:min(40vw,420px);aspect-ratio:4 / 5}
.offer__text{flex:0 0 auto;width:min(44vw,560px)}
.offer__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.03) brightness(.86);will-change:transform}
.offer__card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,26,48,.28) 0%, rgba(5,11,22,.1) 40%, rgba(5,11,22,.72) 100%),
             linear-gradient(0deg, rgba(20,58,100,.18), rgba(20,58,100,.18))}
.offer__card--plain{align-items:center;justify-content:space-between}
.offer__card--plain .offer__icon{margin:auto 0;color:var(--white);opacity:.8}
.offer__card-label{position:relative;z-index:1;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--white);opacity:.9}
.offer__card-label--end{align-self:flex-end;margin-top:auto;opacity:.7}
.offer__text{display:flex;flex-direction:column;gap:1.1rem}
.offer__no{font-size:.75rem;font-weight:500;letter-spacing:.14em;color:var(--white);opacity:.5}
.display{font-family:var(--ff-disp);font-weight:700;font-size:clamp(2.6rem,5vw,5.2rem);line-height:.92;letter-spacing:-.03em;white-space:nowrap;
  background:linear-gradient(180deg,#cfe1f5 0%,#5f8fc4 45%,#12365f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.offer__body{font-family:var(--ff);font-weight:400;font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.45;max-width:38ch;color:var(--white)}
.arrow-link{display:inline;color:var(--accent);font-weight:500;white-space:nowrap}
.arrow-link i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.arrow-link:hover i{transform:translate(3px,-3px)}

/* mobile: keep the horizontal pinned scroll — stack photo over text per panel */
@media (max-width:860px){
  /* each panel = one full screen, so scrolling down frames one panel at a time */
  .htrack{height:100svh;gap:0;padding:0;align-items:center}
  .hpanel{width:100vw;min-width:100vw;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.1rem;padding:0 7vw}
  .hpanel--intro{width:100vw;min-width:100vw}
  .offer__card{width:100%}
  .offer__card--plain{width:100%}
  .offer__text{width:100%;gap:.6rem}
  .display{font-size:clamp(2rem,8.5vw,2.9rem);white-space:normal}
  .offer__body{font-size:1rem;max-width:none}
  .hpanel__lead{font-size:clamp(2.2rem,9vw,3rem)}
}

/* ===== FULL-BLEED PATROL BAND ===== */
.photoband{position:relative;height:clamp(60vh,80vh,88vh);overflow:hidden;display:flex;align-items:flex-end;margin:clamp(2rem,5vh,4rem) 0}
.photoband img{position:absolute;inset:0;width:100%;height:118%;top:-9%;object-fit:cover;
  filter:saturate(.8) contrast(1.03) brightness(.82);will-change:transform}
.photoband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(5,11,22,.82) 0%, rgba(5,11,22,.4) 38%, rgba(10,30,58,.12) 70%, rgba(20,58,100,.15)),
             linear-gradient(0deg, rgba(5,11,22,.7), transparent 55%)}
.photoband__copy{position:relative;z-index:1;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gut) clamp(2.5rem,6vh,5rem)}
.photoband__copy .label{opacity:.7;margin-bottom:1.2rem}
.photoband__line{font-family:var(--ff-disp);font-weight:400;font-size:clamp(1.5rem,3vw,2.8rem);line-height:1.14;letter-spacing:-.01em;max-width:22ch;color:var(--white)}

/* ===== INDUSTRIES LIST ===== */
.ind-list{list-style:none;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.ind-list li{font-family:var(--ff-disp);font-weight:400;font-size:clamp(1.6rem,3.2vw,3rem);letter-spacing:-.01em;
  padding:clamp(1rem,2vw,1.6rem) 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),color .3s;color:var(--white)}
.ind-list li:hover{padding-left:1.5rem;color:#cfe1f5}

/* ===== ABOUT GRID (team photo + facts) ===== */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3rem,6vw,5rem)}
.about-photo{position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(244,246,250,.1)}
.about-photo img{display:block;width:100%;height:auto;filter:saturate(.85) contrast(1.02) brightness(.9)}
.about-photo figcaption{position:absolute;left:1rem;bottom:.9rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* ===== FACTS ===== */
.facts{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3rem)}
.fact{display:flex;flex-direction:column;gap:.6rem}
.fact__n{font-family:var(--ff-disp);font-weight:500;font-size:clamp(2rem,3.4vw,3rem);line-height:1;
  background:linear-gradient(180deg,#cfe1f5,#5f8fc4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fact__l{font-size:.9rem;color:var(--white-dim);max-width:18ch}

/* ===== CLOSING / CTA ===== */
.closing{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 2.5rem;position:relative;min-height:90svh;display:flex;flex-direction:column}
.closing__q{margin-left:auto;text-align:left;max-width:24ch;font-family:var(--ff);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.25}
.talk{align-self:flex-end;display:inline-flex;align-items:center;gap:.8rem;margin-top:2rem;background:var(--white);color:var(--accent);
  padding:.8rem .9rem .8rem 1.6rem;border-radius:100px;font-weight:500;font-size:1rem;will-change:transform}
.talk__arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;transition:transform .3s var(--ease)}
.talk:hover .talk__arrow{transform:translateX(3px)}

/* ===== FOOTER ===== */
.foot{margin-top:auto;padding-top:clamp(4rem,10vh,9rem);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.foot__tag{font-family:var(--ff);font-weight:400;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.35;color:var(--white);margin-bottom:clamp(1rem,3vh,2rem)}
.wordmark--foot{font-size:clamp(3.4rem,13vw,13rem);line-height:.8}
.foot__links{list-style:none;text-align:right;display:flex;flex-direction:column;gap:.55rem}
.foot__links li{font-size:.72rem;font-weight:500;letter-spacing:.1em;color:var(--white-faint)}
.foot__links li:first-child a{color:var(--accent)}
.foot__links a:hover{color:var(--white)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(24px)}
.reveal-w > *,.reveal-w{}
.reveal-w{opacity:0}
.no-js .reveal,.no-js .reveal-w{opacity:1;transform:none}
.wordmark .ln > span{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal-w{opacity:1!important;transform:none!important}
  .bg__layer{animation:none!important}
}