/* ================================================================
   Custom Features — References pinned-scroll slideshow
   Server-rendered DOM; GSAP/ScrollTrigger drive the timeline.
   ================================================================ */

/* ---------- self-hosted Titillium Web (GDPR: no Google Fonts) ---------- */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url('../fonts/titillium/titillium-web-normal-latin-ext-300.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url('../fonts/titillium/titillium-web-normal-latin-300.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url('../fonts/titillium/titillium-web-normal-latin-ext-400.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url('../fonts/titillium/titillium-web-normal-latin-400.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url('../fonts/titillium/titillium-web-normal-latin-ext-600.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url('../fonts/titillium/titillium-web-normal-latin-600.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url('../fonts/titillium/titillium-web-normal-latin-ext-700.woff2') format('woff2');}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url('../fonts/titillium/titillium-web-normal-latin-700.woff2') format('woff2');}

/* required for the spinning eyebrow ring in Chromium/WebKit */
@property --angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }

/* ---------- design tokens (theme-overridable) ---------- */
.wowi{
  --wowi-bg:#0e1030;
  --wowi-accent:#ff8a4c;
  --wowi-pill:rgba(248,100,46,.9);
  --wowi-eyebrow-ink:#fff;
  --wowi-eyebrow-a:#E25B29;
  --wowi-eyebrow-b:rgba(255,255,255,.2);
  --wowi-overlay-1:rgba(8,9,32,.93);
  --wowi-overlay-2:rgba(8,9,32,.72);
  --wowi-overlay-3:rgba(8,9,32,.4);
  --radius:20px;
}

.wowi{font-family:"Titillium Web",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff;background:var(--wowi-bg);overflow-x:hidden;}
.wowi *{box-sizing:border-box;}

.wowi-stage{position:relative;}
.wowi-pin{height:100vh;position:relative;overflow:hidden;}

.wowi-slide{position:absolute;inset:0;opacity:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:0 6vw;margin:0;}

/* centered max-1240 container; device + 100px gap + 360 content */
.slide-inner{width:100%;max-width:1240px;display:flex;
  align-items:flex-start;justify-content:center;gap:100px;}

.slide-bg{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:center;will-change:transform;}

/* controllable overlay in front of the background image, behind the content */
.slide-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;}

.copy,.device{position:relative;z-index:2;}
.device{flex:0 0 auto;display:flex;justify-content:center;}
.copy{flex:0 1 360px;max-width:360px;margin-top:74px;}
.is-phone-right .copy{order:1;}
.is-phone-right .device{order:2;}

/* ---------- animated-border eyebrow ---------- */
.heading-eyebrow{position:relative;display:block;width:max-content;
  border-radius:100px;background:transparent;z-index:0;
  padding:9px 18px;margin-bottom:25px;
  font-family:"Titillium Web",sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:var(--wowi-eyebrow-ink);}
.heading-eyebrow::before{content:"";position:absolute;inset:0;
  border-radius:100px;padding:1px;
  background:conic-gradient(from var(--angle),var(--wowi-eyebrow-a),var(--wowi-eyebrow-b),var(--wowi-eyebrow-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:wowi-eyebrow-spin 3s linear infinite;z-index:-1;}
@keyframes wowi-eyebrow-spin{ to{ --angle:360deg; } }

/* ---------- heading ---------- */
.copy h2{font-family:"Titillium Web",sans-serif;
  font-size:clamp(30px,3vw,40px);font-weight:600;line-height:1.1;
  letter-spacing:-.02em;margin-bottom:25px;text-wrap:balance;}

.gradient-text-default{
  background:linear-gradient(90deg,#E25B29,#FFCCB9,#E25B29);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradient-flow 3s linear infinite;}
@keyframes gradient-flow{ to{ background-position:200% center; } }

/* ---------- pills ---------- */
.tags{display:flex;gap:6px;flex-wrap:wrap;}
.tags span{font-family:"Titillium Web",sans-serif;font-size:11px;font-weight:500;
  padding:3px 10px;border-radius:6px;background:var(--wowi-pill);color:#fff;}

/* ---------- CSS phone frame ---------- */
.phone{width:clamp(230px,22vw,290px);aspect-ratio:9/19.5;border-radius:42px;
  background:#0b0d26;border:10px solid #1c1c1c;
  box-shadow:0 50px 90px rgba(0,0,0,.55);overflow:hidden;position:relative;}
.phone::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:36%;height:24px;background:#1c1c1c;
  border-radius:0 0 16px 16px;z-index:3;}
.phone .shot{position:absolute;inset:0;background-size:cover;background-position:center top;}
.phone .shot.ph{display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.45);font-size:13px;}

/* ---------- pre-rendered mockup image ---------- */
.device .mockup{width:100%;height:auto;display:block;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.4));}
.device.is-imac{flex:0 0 clamp(400px,44vw,640px);}
.device.is-phones{flex:0 0 clamp(300px,34vw,460px);}

/* ---------- two-column split slide (DESKTOP ONLY) ---------- */
.is-two-col{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;align-items:stretch;}
.is-two-col .half{position:relative;overflow:hidden;display:flex;
  align-items:center;justify-content:center;gap:30px;padding:0 3.5vw;}
.is-two-col .half .copy{flex:0 1 360px;max-width:360px;margin-top:0;}
.is-two-col .half .copy h2{font-size:clamp(22px,1.9vw,32px);}
.is-two-col .half .phone{width:clamp(150px,12vw,200px);}
.is-two-col .half .device.is-phones{max-width:250px;}

.wowi-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:5;font-size:13px;letter-spacing:.08em;opacity:.6;
  animation:wowi-bob 1.8s ease-in-out infinite;}
@keyframes wowi-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- tablet + mobile: single column, DEVICE FIRST ---------- */
@media(max-width:1024px){
  .wowi-slide{padding:60px 7vw;text-align:center;}
  .slide-inner{flex-direction:column;gap:30px;align-items:center;justify-content:center;}
  .slide-inner .device{order:0;}
  .slide-inner .copy{order:1;}
  .copy{margin-top:0;max-width:100%;width:100%;flex:initial;}
  .heading-eyebrow{margin-inline:auto;}
  .tags{justify-content:center;}
  .phone{width:clamp(180px,34vw,230px);}
  .device.is-imac,.device.is-phones{flex:initial;width:100%;max-width:520px;}
  /* keep the two-column split tighter than full-width slides */
  .is-two-col .half .device.is-imac,
  .is-two-col .half .device.is-phones{max-width:250px;}
}
@media(max-width:600px){
  .wowi-slide{padding:40px 6vw;}
  .slide-inner{gap:22px;}
  .copy h2{font-size:clamp(24px,7vw,30px);margin-bottom:16px;}
  .heading-eyebrow{margin-bottom:16px;}
  .phone{width:clamp(140px,42vw,180px);}
  .device.is-imac,.device.is-phones{max-width:90%;}
  .is-two-col .half .device.is-imac,
  .is-two-col .half .device.is-phones{max-width:250px;}
}

/* ---------- static fallback (reduced motion only) ---------- */
.wowi-stage.is-static{height:auto !important;}
.wowi-stage.is-static .wowi-pin{height:auto;overflow:visible;}
.wowi-stage.is-static .wowi-slide{position:relative;inset:auto;opacity:1;min-height:100vh;}
.wowi-stage.is-static .wowi-hint{display:none;}