/* Qualia Labs — qualiastudios.com
   Holding identity: white, black, one accent. Deliberately plain so Daniel
   can design over the top of it. To change the accent, change --accent
   and --accent-soft here and nowhere else. */

/* ---------- tokens ---------- */
:root{
  --paper:#FFFFFF; --paper-2:#F7F7F7; --ink:#111111; --ink-2:#3A3A3A;
  --muted:#767676; --rule:#E3E3E3; --accent:#0047FF; --accent-soft:rgba(0,71,255,.06);
  --display:"Jost",Futura,"Century Gothic",sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1160px; --lab:150px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B0B0B; --paper-2:#141414; --ink:#F5F5F5; --ink-2:#C9C9C9;
    --muted:#8A8A8A; --rule:#282828; --accent:#6E8CFF; --accent-soft:rgba(110,140,255,.10);
  }
}
:root[data-theme="dark"]{
  --paper:#0B0B0B; --paper-2:#141414; --ink:#F5F5F5; --ink-2:#C9C9C9;
  --muted:#8A8A8A; --rule:#282828; --accent:#6E8CFF; --accent-soft:rgba(110,140,255,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:28px; top:10px; z-index:99; background:var(--ink); color:var(--paper); padding:9px 14px; font-family:var(--mono); font-size:.7rem}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display); font-weight:300; margin:0; text-wrap:balance; letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,6.4vw,4.9rem); line-height:1.02; font-weight:200}
h2{font-size:clamp(1.65rem,3.1vw,2.35rem); line-height:1.12}
h3{font-size:1.16rem; line-height:1.3; font-weight:400; letter-spacing:0}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.55; color:var(--ink-2); max-width:34ch}
.prose{max-width:62ch; color:var(--ink-2)}
.mono{font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.muted{color:var(--muted)}

/* ---------- nav ---------- */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(9px); border-bottom:1px solid var(--rule)}
.nav{display:flex; align-items:center; gap:26px; height:62px}
.brandmark{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.brandmark img{width:26px; height:26px; display:block}
.brandmark b{font-family:var(--display); font-weight:300; letter-spacing:.28em; font-size:.78rem; text-transform:uppercase}
.navlinks{display:flex; gap:24px; align-items:center}
.navlinks a{font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding:4px 0; border-bottom:1px solid transparent}
.navlinks a:hover{border-bottom-color:var(--accent); color:var(--ink)}
.navlinks a.sib{color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  padding:11px 18px; border:1px solid var(--ink); color:var(--paper); background:var(--ink); transition:.18s; cursor:pointer}
.btn:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink); background:transparent; color:var(--ink)}
@media(max-width:860px){.navlinks{display:none}}

/* ---------- section skeleton: spec-sheet two columns ---------- */
section{border-top:1px solid var(--rule)}
.sec{display:grid; grid-template-columns:var(--lab) 1fr; gap:44px; padding:74px 0}
.sec > .lab{position:sticky; top:92px; align-self:start; display:flex; flex-direction:column; gap:10px}
.lab .idx{font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
@media(max-width:860px){
  .sec{grid-template-columns:1fr; gap:22px; padding:54px 0}
  .sec > .lab{position:static}
}

/* ---------- hero ---------- */
.hero{padding:96px 0 78px; border-top:none}
/* Static on purpose. An entrance animation here starts the mark at opacity 0,
   which leaves it invisible anywhere the animation does not actually run. */
.hero .mark{width:104px; height:104px; display:block; margin-bottom:34px}
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:26px; color:var(--muted)}
.eyebrow i{display:block; width:34px; height:1px; background:var(--rule)}
.hero h1 em{font-style:normal; color:var(--muted)}
.herogrid{display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:end; margin-top:38px}
@media(max-width:860px){.herogrid{grid-template-columns:1fr; gap:32px; align-items:start}.hero{padding:64px 0 54px}}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.facts{display:flex; flex-direction:column; gap:14px; border-left:1px solid var(--rule); padding-left:22px}
.facts div{display:flex; flex-direction:column; gap:2px}
.facts strong{font-family:var(--display); font-weight:300; font-size:1.75rem; line-height:1; font-variant-numeric:tabular-nums}

/* ---------- strip ---------- */
.strip{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--paper-2); overflow:hidden}
.strip .inner{display:flex; gap:38px; padding:15px 28px; white-space:nowrap; overflow-x:auto; scrollbar-width:none; color:var(--muted)}
.strip .inner::-webkit-scrollbar{display:none}

/* ---------- work ---------- */
.work{display:flex; flex-direction:column}
.case{display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:34px 0; border-bottom:1px solid var(--rule); align-items:center}
.case:first-child{padding-top:0}
.case:last-child{border-bottom:none; padding-bottom:0}
@media(max-width:760px){.case{grid-template-columns:1fr; gap:22px}}
.case .meta{display:flex; gap:10px; align-items:center; margin-bottom:14px; color:var(--muted); flex-wrap:wrap}
.tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--rule); padding:3px 8px; color:var(--muted)}
.tag.live{border-color:var(--accent); color:var(--accent)}
.case h3{margin-bottom:9px}
.case p{color:var(--ink-2); font-size:.97rem; max-width:46ch}
.outcomes{display:flex; gap:28px; margin-top:18px; flex-wrap:wrap}
.outcomes div{display:flex; flex-direction:column}
.outcomes b{font-family:var(--display); font-weight:300; font-size:1.5rem; line-height:1.1; font-variant-numeric:tabular-nums}
.shot{aspect-ratio:4/3; background:var(--paper-2); border:1px solid var(--rule); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.shot img{width:100%; height:100%; object-fit:cover; position:relative}
.shot::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:34px 34px; opacity:.5}
.shot span{position:relative; font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:var(--paper-2); padding:6px 10px}
/* Portrait phone captures: let the screen keep its shape instead of cropping it
   to 4:3. Two side by side reads as a flow; one centres on its own. */
.shot--tall{aspect-ratio:auto; height:clamp(300px,40vw,430px); padding:20px; gap:14px}
.shot--tall img{height:100%; width:auto; object-fit:contain; border:1px solid var(--rule)}
.shot:has(img)::before{opacity:.22}

/* ---------- lists ---------- */
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:26px 1fr 1.15fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.row:last-child{border-bottom:none}
.row .n{font-family:var(--mono); font-size:.68rem; color:var(--muted)}
.row p{color:var(--ink-2); font-size:.95rem}
@media(max-width:760px){.row{grid-template-columns:26px 1fr; gap:8px 18px}.row p{grid-column:2}}
.row:hover .h3x{color:var(--accent)}
.h3x{font-family:var(--display); font-weight:400; font-size:1.1rem; transition:color .15s}

/* ---------- pricing ---------- */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--rule)}
@media(max-width:980px){.tiers{grid-template-columns:1fr 1fr}.tier:nth-child(2n){border-right:none}.tier:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:760px){.tiers{grid-template-columns:1fr}}
.tier{padding:26px 22px; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:12px}
.tier:last-child{border-right:none}
@media(max-width:760px){.tier{border-right:none; border-bottom:1px solid var(--rule)}.tier:last-child{border-bottom:none}}
.tier.pick{background:var(--accent-soft)}
.tier .price{font-family:var(--display); font-weight:300; font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums}
.tier ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-size:.9rem; color:var(--ink-2)}
.tier li{display:flex; gap:9px}
.tier li::before{content:"\2014"; color:var(--muted)}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--rule)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:20px 18px 24px; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:8px}
.step:first-child{padding-left:0}
.step:last-child{border-right:none}
.step .num{font-family:var(--mono); font-size:.68rem; color:var(--accent); letter-spacing:.12em}
.step h3{font-size:1.02rem}
.step p{font-size:.88rem; color:var(--muted); line-height:1.5}

/* ---------- duo ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule)}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo > div{padding:30px 26px; display:flex; flex-direction:column; gap:12px}
.duo > div:first-child{border-right:1px solid var(--rule)}
@media(max-width:760px){.duo > div:first-child{border-right:none; border-bottom:1px solid var(--rule)}}

/* ---------- people ---------- */
.people{display:grid; grid-template-columns:1fr 1fr; gap:34px}
@media(max-width:760px){.people{grid-template-columns:1fr}}
.person{display:flex; gap:18px; align-items:flex-start}
.avatar{width:104px; height:130px; flex:none; border:1px solid var(--rule); background:var(--paper-2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.6rem; color:var(--muted); letter-spacing:.1em; object-fit:cover}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--rule); padding:16px 0}
details:first-of-type{padding-top:0}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  font-family:var(--display); font-weight:400; font-size:1.04rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); color:var(--muted); font-size:.95rem}
details[open] summary::after{content:"\2013"}
details p{margin-top:11px; color:var(--ink-2); font-size:.94rem; max-width:60ch}

/* ---------- contact ---------- */
.contact{background:var(--paper-2)}
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; max-width:620px}
.form label{display:flex; flex-direction:column; gap:6px}
.form .full{grid-column:1/-1}
@media(max-width:620px){.form{grid-template-columns:1fr}}
input,textarea,select{font-family:var(--body); font-size:.95rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); padding:11px 12px; border-radius:0}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
textarea{min-height:104px; resize:vertical}
.hp{position:absolute; left:-9999px}
.formnote{grid-column:1/-1; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--accent); min-height:1em}
.mailto{font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,3.4vw,2.3rem); text-decoration:none; border-bottom:1px solid var(--rule); display:inline-block; padding-bottom:4px}
.mailto:hover{border-bottom-color:var(--accent); color:var(--accent)}

/* ---------- legal pages ---------- */
.legalpage{padding:70px 0 20px; max-width:70ch}
.legalpage h1{font-size:clamp(2rem,4.4vw,3rem); margin-bottom:10px}
.legalpage h2{font-size:1.24rem; margin:38px 0 10px}
.legalpage p,.legalpage li{color:var(--ink-2); font-size:.97rem}
.legalpage ul{padding-left:20px; display:flex; flex-direction:column; gap:7px}
.legalpage a{color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule); padding:44px 0 34px; color:var(--muted)}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.88rem}
.fgrid a{text-decoration:none; color:var(--ink-2)}
.fgrid a:hover{color:var(--accent)}
.legal{margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.78rem}

/* ---------- motion ----------
   Scroll reveal is a native scroll-driven animation, not JS. Content is
   visible by default, so a browser without animation-timeline (or with
   scripting off) shows the full page rather than a blank one. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
  }
}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero .mark{animation:none}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}