/* ===== 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__logotype{font-family:var(--ff-disp);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;text-transform:uppercase;color:var(--white);white-space:nowrap}
.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}
/* abstract on-brand art (replaces photos for now) */
.offer__art{position:absolute;inset:0;width:100%;height:100%}
.offer__art svg{width:100%;height:100%;display:block}
.photoband__art{position:absolute;inset:0;width:100%;height:118%;top:-9%;will-change:transform}
.photoband__art svg{width:100%;height:100%;display:block}
.about-art{display:block;width:100%;height:auto;background:linear-gradient(155deg,#12335c,#0a1a30 60%,#05070c)}
/* reframe band legibility without a scrim (band flows on the site gradient) */
.photoband__line{text-shadow:0 2px 26px rgba(5,7,12,.7)}

/* Blueprint price detail */
.bp-detail{display:flex;align-items:baseline;gap:1rem;margin-top:1.8rem;justify-content:flex-end;flex-wrap:wrap}
.bp-price{font-family:var(--ff-disp);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--accent)}
.bp-was{font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--white-dim)}
@media (max-width:700px){ .bp-detail{justify-content:flex-start} }

/* proof / testimonial attribution */
.proof__by{margin-top:1.6rem;font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--white-dim)}
.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(46vh,56vh,60vh);overflow:hidden;display:flex;align-items:flex-end;margin:clamp(2rem,5vh,4rem) 0;background:transparent}
.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}
/* no scrim — the band sits on the same living gradient as the rest of the site */
.photoband::after{content:none}
.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}
}

/* ===== MOBILE POLISH (appended last so it wins the cascade) ===== */
.lt-short,.pill__short{display:none}

@media (max-width:640px){
  /* nav: swap long labels for compact ones so nothing collides/overflows */
  .lt-full{display:none}
  .lt-short{display:inline}
  .pill__full{display:none}
  .pill__short{display:inline}
  .nav{padding:1.05rem var(--gut)}
  .nav__logotype{font-size:1.3rem;letter-spacing:0}
  .pill{padding:.55rem .7rem .55rem 1rem;font-size:.82rem}

  /* HERO: frame the space — tagline near the top (under the nav), giant
     wordmark anchored at the bottom. Fills the screen instead of an empty void. */
  .hero{justify-content:space-between;padding-top:clamp(6rem,15vh,8.5rem);padding-bottom:clamp(1.5rem,4vh,3rem)}
  .hero__tag{position:static;align-self:stretch;width:100%;min-width:0;max-width:36ch;
    white-space:normal;overflow-wrap:break-word;font-size:1.18rem;line-height:1.4;margin:0}
  .wordmark{font-size:clamp(5.5rem,26vw,9rem)}

  /* right-aligned statement sections read cleaner left-aligned on phones */
  .statement--alt .statement__big{margin-left:0}
  .statement--alt .label{position:static}
  .bp-detail{justify-content:flex-start}

  /* tighter vertical rhythm so it doesn't feel sparse / boring */
  .statement{padding:clamp(4rem,10vh,6rem) var(--gut)}
  .statement__big{font-size:clamp(2.1rem,7.5vw,3rem)}
  .statement__big--sm{font-size:clamp(1.9rem,6.6vw,2.6rem)}
  .closing{min-height:auto;padding-bottom:2rem}
  .photoband{height:clamp(40vh,48vh,52vh);margin:clamp(1rem,3vh,2rem) 0}
  .photoband__line{font-size:clamp(1.5rem,6vw,2rem)}
}