/* Calivia Co — studio design system
   Black ground, orange accent (#e46135), Space Grotesk (stand-in for PP Object Sans).
   Motion: aurora background, staggered reveals, view-transition cross-fade. */

:root{
  --p1:#e46135; --p1-deep:#c94f27;
  --bg:#000000; --card:#0d0d0d; --card-2:#121212;
  --b3:#3a3a3a; --t5:#717171; --t7:#a6a6a6; --t9:#ffffff;
  --line:rgba(255,255,255,.13);
  --accent-soft:rgba(228,97,53,.14);

  /* Roboto: the Calivia brand typeface, shared with caliviadigital.com */
  --font:"Roboto",system-ui,sans-serif;

  /* Display scale tuned for Roboto: firmer caps than the earlier grotesk scale */
  --fs-sm:clamp(.8rem,.73rem + .217vw,.9rem);
  --fs-md:clamp(1.05rem,.97rem + .27vw,1.2rem);
  --fs-lg:clamp(1.4rem,1.26rem + .48vw,1.65rem);
  --fs-xl:clamp(1.8rem,1.5rem + 1vw,2.35rem);
  --fs-xxl:clamp(2.1rem,1.62rem + 1.6vw,3rem);
  --fs-xxxl:clamp(2.5rem,1.7rem + 2.7vw,4.1rem);

  --content:1024px; --wide:1254px;
  --ease:cubic-bezier(.22,.9,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--t9);
  font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
/* height:auto is required: without it, an explicit height attribute is used
   literally while width is capped by max-width, distorting the image */
img{max-width:100%;height:auto;display:block}
a{color:var(--p1);text-underline-offset:3px}
/* Same weight logic as caliviadigital.com: Black for heroes, Bold for sections */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0}
h1{font-size:var(--fs-xxl);font-weight:900}
h2{font-size:var(--fs-xl);font-weight:700}
h3{font-size:var(--fs-md);font-weight:700}
p{margin:0 0 1rem}
::selection{background:var(--p1);color:#000}

.shell{max-width:var(--content);margin:0 auto;padding:0 1.5rem}
.shell--wide{max-width:var(--wide)}
.band{padding:5rem 0}
.band--hairline{border-top:1px solid var(--line)}

.eyebrow{
  font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;
  color:var(--p1);margin:0 0 1.1rem;font-weight:500;
}
.kicker{color:var(--t7);font-size:var(--fs-md);max-width:52ch;margin-top:1rem}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--p1);outline-offset:3px;border-radius:2px;
}

a,button,.btn,.tile,.tile img,.nav a,.chip{
  transition:color .3s ease,background-color .3s ease,border-color .3s ease,
             opacity .3s ease,transform .45s var(--ease),box-shadow .3s ease;
}

/* ---------- aurora background (signature ambience) ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform;
}
.aurora i:nth-child(1){width:52vw;height:52vw;background:radial-gradient(circle,rgba(228,97,53,.32),transparent 65%);top:-18vw;left:-12vw;animation:drift1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:44vw;height:44vw;background:radial-gradient(circle,rgba(120,45,20,.4),transparent 65%);bottom:-16vw;right:-10vw;animation:drift2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:30vw;height:30vw;background:radial-gradient(circle,rgba(228,97,53,.15),transparent 60%);top:38%;left:56%;animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-7vw,-9vh,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(-10vw,6vh,0)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- reveal choreography ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--d,0)*90ms)}
[data-reveal].in{opacity:1;transform:none}

/* view-transition cross-fade between pages (progressive enhancement) */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.25s}
::view-transition-new(root){animation-duration:.35s}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:50;background:rgba(0,0,0,.78);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.masthead .shell{max-width:var(--wide);display:flex;align-items:center;justify-content:space-between;gap:1rem;height:70px}
.wordmark{font-size:1.24rem;font-weight:700;letter-spacing:-.02em;color:var(--t9);text-decoration:none;display:flex;align-items:center;gap:.55rem}
.wordmark svg{flex:none}
.wordmark .tag{font-size:.68rem;font-weight:500;letter-spacing:.18em;color:var(--t5);text-transform:uppercase;margin-left:.4rem}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a:not(.btn){color:var(--t7);text-decoration:none;font-size:.95rem;font-weight:500;position:relative}
.nav a:not(.btn):hover{color:var(--t9)}
/* underline wipes in from the left on hover, and stays for the current page */
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-7px;height:2px;width:100%;
  background:var(--p1);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after{transform:scaleX(1)}
.nav a:not(.btn)[aria-current="page"]{color:var(--t9)}
.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:860px){.nav a:not(.btn){display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:transparent;color:var(--p1);border:1.5px solid var(--p1);border-radius:2px;
  cursor:pointer;font-family:var(--font);font-size:.98rem;font-weight:600;
  padding:.72rem 1.5rem;text-decoration:none;
}
.btn:hover{background:var(--p1);color:#000;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--solid{background:var(--p1);color:#000}
.btn--solid:hover{background:var(--p1-deep);border-color:var(--p1-deep)}
.btn--quiet{border-color:var(--b3);color:var(--t9)}
.btn--quiet:hover{background:transparent;border-color:var(--t9);color:var(--t9)}
.btn--lg{padding:.95rem 2rem;font-size:1.05rem}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{padding:clamp(4rem,9vw,7rem) 0 clamp(3.6rem,8vw,6rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:end}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:2.6rem;align-items:start}}
.hero h1{font-size:var(--fs-xxxl);line-height:1.06;max-width:16ch}
.hero h1 .accent{color:var(--p1)}
.hero .line{display:block;overflow:hidden}
.hero .line span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero .line:nth-child(2) span{animation-delay:.12s}
.hero .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}

/* hero side column: substance in the space the headline leaves */
.hero-aside{
  border-left:2px solid var(--p1);padding-left:1.5rem;
  animation:asideIn .9s var(--ease) .34s both;
}
@media (max-width:940px){.hero-aside{border-left-width:2px;padding-left:1.2rem}}
@keyframes asideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-lede{color:var(--t9);font-size:var(--fs-md);margin:0 0 .9rem;line-height:1.55}
.hero-lede strong{color:var(--p1);font-weight:700}
.hero-lede-2{color:var(--t7);font-size:.95rem;margin:0;line-height:1.65}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:1.6rem;
  margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);
}
.hero-stats dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t5);margin-bottom:.25rem}
.hero-stats dd{margin:0;font-size:1.35rem;font-weight:900;color:var(--t9);letter-spacing:-.02em}
@media (max-width:420px){.hero-stats{gap:1.1rem}.hero-stats dd{font-size:1.15rem}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:1rem 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:3.2rem;animation:scroll 36s linear infinite;will-change:transform}
.marquee span{font-size:var(--fs-md);color:var(--t5);letter-spacing:.05em}
.marquee b{color:var(--p1);font-weight:500}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- work tiles ---------- */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.8rem}
@media (max-width:820px){.work-grid{grid-template-columns:1fr}}
.tile{position:relative;display:block;text-decoration:none;color:inherit;border:1px solid var(--b3);border-radius:3px;overflow:hidden;background:var(--card)}
.tile-media{aspect-ratio:16/10;overflow:hidden;background:var(--card-2)}
.tile-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s var(--ease)}
.tile:hover .tile-media img{transform:scale(1.04)}
.tile:hover{border-color:var(--t5);transform:translateY(-5px)}
.tile-body{padding:1.3rem 1.4rem 1.4rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.tile-name{font-size:var(--fs-md);font-weight:700;color:var(--t9)}
.tile-sub{color:var(--t5);font-size:var(--fs-sm);letter-spacing:.05em;margin-top:.3rem}
.tile-arrow{flex:none;width:38px;height:38px;border:1px solid var(--b3);border-radius:50%;display:grid;place-items:center;color:var(--t7);transition:all .3s var(--ease)}
.tile:hover .tile-arrow{background:var(--p1);border-color:var(--p1);color:#000;transform:rotate(-45deg)}
.tile--soon{pointer-events:none}
.tile--soon .tile-media{display:grid;place-items:center}
.chip{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.32rem .65rem;border-radius:2px;background:var(--p1);color:#000}
.chip--soon{background:transparent;border:1px solid var(--t5);color:var(--t7)}

/* ---------- case study pages ---------- */
.cs-hero{padding:clamp(3.4rem,7vw,5.5rem) 0 2.6rem}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem;border-block:1px solid var(--line);padding:1.4rem 0;margin-top:2.4rem}
.cs-meta b{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t5);font-weight:500;margin-bottom:.3rem}
.cs-meta span{color:var(--t9);font-size:.95rem}
.cs-figure{margin:0;border:1px solid var(--b3);border-radius:3px;overflow:hidden;background:var(--card)}
.cs-figure figcaption{padding:.7rem 1rem;font-size:var(--fs-sm);color:var(--t5);border-top:1px solid var(--line)}
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
@media (max-width:760px){.cs-cols{grid-template-columns:1fr}}
.cs-body h2{font-size:var(--fs-lg);margin:2.8rem 0 .9rem}
.cs-body p{color:var(--t7);max-width:68ch}
.cs-body li{color:var(--t7)}
.next-link{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--b3);border-radius:3px;padding:1.6rem 1.8rem;text-decoration:none;margin-top:4rem;background:var(--card)}
.next-link:hover{border-color:var(--p1)}
.next-link b{color:var(--t9);font-size:var(--fs-md)}
.next-link span{color:var(--t5);font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase}

/* phone frame for app shots */
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.8rem;margin:2.4rem 0}
.phone-frame{border:1px solid var(--b3);border-radius:22px;overflow:hidden;background:var(--card);padding:8px}
.phone-frame img{border-radius:15px}

/* two app shots side by side, captioned */
.app-shots{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:420px}
.app-shots figure{margin:0}
.app-shots figcaption{
  margin-top:.7rem;font-size:var(--fs-sm);color:var(--t5);
  letter-spacing:.12em;text-transform:uppercase;text-align:center;
}
@media (max-width:420px){.app-shots{gap:1rem}}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2rem;margin-top:2.8rem}
.svc{border:1px solid var(--b3);border-radius:3px;background:var(--card);padding:1.8rem 1.6rem;display:flex;flex-direction:column}
.svc h3{color:var(--t9);font-weight:600;margin-bottom:.6rem}
.svc p{color:var(--t7);font-size:.95rem}
.svc ul{margin:0 0 1.4rem;padding-left:1.1rem;color:var(--t7);font-size:.92rem}
.svc li{margin-bottom:.35rem}
.svc .btn{margin-top:auto;align-self:flex-start}

/* website category cards (questionnaire anchors) */
.cat{border:1px solid var(--b3);border-radius:3px;background:var(--card);padding:1.8rem 1.6rem;display:flex;flex-direction:column}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.4rem}
.cat-head h3{color:var(--t9);font-weight:600}
.cat-pages{font-size:var(--fs-sm);color:var(--p1);letter-spacing:.08em;white-space:nowrap}
.cat>p{color:var(--t7);font-size:.93rem}
.cat ul{margin:.8rem 0 1.5rem;padding:0;list-style:none;color:var(--t7);font-size:.92rem}
.cat li{padding:.42rem 0;border-bottom:1px solid var(--line);display:flex;gap:.6rem;align-items:baseline}
.cat li:last-child{border-bottom:0}
.cat li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--p1);translate:0 -2px}
.cat .btn{margin-top:auto;align-self:flex-start}
.cat--flag{border-color:var(--p1)}
.cat--flag .flag-note{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p1);font-weight:600;margin-bottom:.7rem}

/* ---------- shop (cards) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2.2rem 2rem;margin-top:2.8rem}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card-cover{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--card);border:1px solid var(--b3)}
.card-cover img{width:100%;height:100%;object-fit:cover}
.card:hover .card-cover{transform:translateY(-5px);border-color:var(--t5)}
.card-body{padding:1.05rem 0 0;display:flex;flex-direction:column;flex:1}
.card-name{color:var(--t9);margin-bottom:.35rem}
.card-spec{font-size:var(--fs-sm);color:var(--t5);letter-spacing:.05em;margin:0 0 .7rem}
.card-price{display:flex;align-items:baseline;gap:.6rem;margin-top:auto}
.price{font-size:1.28rem;font-weight:700;color:var(--t9)}
.was{font-size:.85rem;color:var(--t5);text-decoration:line-through}
.flag{position:absolute;top:.75rem;left:.75rem;z-index:3;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.32rem .65rem;border-radius:2px;background:var(--p1);color:#000}
.card--soon .card-cover{display:grid;place-items:center}
.card--soon .card-cover span{font-size:var(--fs-sm);color:var(--t5);letter-spacing:.08em}
.card--soon:hover .card-cover{transform:none;border-color:var(--b3)}

/* ---------- proof / steps / misc ---------- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.4rem;margin-top:2.8rem}
.proof-num{font-size:var(--fs-xl);font-weight:700;color:var(--p1);line-height:1;display:block;margin-bottom:.6rem}
.proof h3{color:var(--t9);margin-bottom:.4rem}
.proof p{color:var(--t7);font-size:.95rem;margin:0}

.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2.6rem}
.step{padding:1.7rem 1.5rem;background:var(--card);border:1px solid var(--b3);border-radius:3px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-size:var(--fs-sm);color:var(--p1);letter-spacing:.15em;display:block;margin-bottom:.9rem;font-weight:600}
.step h3{color:var(--t9);margin-bottom:.45rem}
.step p{color:var(--t7);font-size:.95rem;margin:0}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem}
.field label{font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--t7);font-weight:500}
.field input,.field select,.field textarea{
  background:transparent;color:var(--t9);border:1.5px solid var(--b3);border-radius:2px;
  padding:.82rem 1rem;font:inherit;font-size:.96rem;width:100%;
}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%23a6a6a6' stroke-width='1.6' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right .9rem center}
.field select option{background:#111;color:var(--t9)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--p1)}
.field input::placeholder,.field textarea::placeholder{color:var(--t5)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:3rem 0 3.4rem;font-size:.93rem;background:rgba(0,0,0,.5)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.8rem;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.foot-links a{color:var(--t7);text-decoration:none}
.foot-links a:hover{color:var(--t9)}
.foot-legal{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.9rem;font-size:.82rem;color:var(--t5)}
address{font-style:normal;color:var(--t7);line-height:1.75}

/* WhatsApp floating action */
/* --wa-lift is driven by studio.js: the button lifts itself clear of the footer
   link row (it was covering "Refunds") instead of sitting on top of it, and
   drops back to 0 once the visitor drags it somewhere of their own choosing.
   The hover nudge has to compose with that offset rather than replace it, or
   hovering would drop the button back down over the links.
   touch-action:none is what makes the drag work on a phone — without it the
   browser claims the gesture and scrolls the page instead. */
.wa-fab{
  position:fixed;bottom:1.3rem;right:1.3rem;z-index:60;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--p1);color:#000;
  box-shadow:0 0 0 0 rgba(228,97,53,.5);
  animation:waPulse 2.6s infinite;
  transform:translateY(var(--wa-lift,0px));
  touch-action:none;
}
.wa-fab:hover{background:var(--p1-deep);color:#000;transform:translateY(calc(var(--wa-lift,0px) - 2px))}
.wa-fab.is-dragging{cursor:grabbing;animation:none}
/* Stepped aside when clearing the region would need more than a short hop,
   rather than sitting on top of readable text. Opacity only, so it costs no
   layout and rides the existing transition. */
.wa-fab.is-stowed{opacity:0;pointer-events:none}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(228,97,53,.5)}
  70%{box-shadow:0 0 0 15px rgba(228,97,53,0)}
  100%{box-shadow:0 0 0 0 rgba(228,97,53,0)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
  .hero .line span{transform:none;animation:none}
  [data-reveal]{opacity:1;transform:none}
  .aurora{display:none}
  .wa-fab{animation:none}
}