/*
Theme Name: BlackCat
Theme URI: https://theblackcatcreativestudio.com
Author: Carlos Jones
Description: The BlackCat Creative + Digital Studio site. Hand built, no page builder.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: blackcat
*/

html{-webkit-text-size-adjust:100%}
body{margin:0;background:#1E1E1D;color:#EDEDEA;
  font-family:"Archivo",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
*{box-sizing:border-box}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   BLACKCAT CREATIVE + DIGITAL STUDIO
   Site stylesheet for Elementor

   WHERE THIS GOES
   Elementor  >  Site Settings  >  Custom CSS
   Paste this whole file. Once. Never again.

   HOW TO USE IT
   Put the class name "cs" on the OUTERMOST container of every page.
   Everything below is scoped to it, so nothing here can leak into
   the WordPress admin or a plugin's markup.

   Then, on any widget: Advanced tab > CSS Classes > type the class.
   Never touch the Style tab. That is the whole discipline.

   BREAKPOINTS
   1024px and below = tablet
   767px and below  = mobile
   Set these in Elementor > Site Settings > Layout > Breakpoints
   so the editor previews match what this file actually does.
   ============================================================ */

/* ============================================================
   CASE STUDY PAGE — dark Carlos system
   ============================================================ */
.cs{
  --ground:#1E1E1D; --panel:#252524; --well:#161615; --black:#111110;
  --line:#373734; --text:#EDEDEA; --mid:#93938C; --white:#FFFFFF;
  --ph-bg:#242423; --ph-line:#302F2E; --ph-fg:#84847E;
  background:var(--ground);color:var(--text);
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;
}
.cs p{margin:0}
.cs a{text-decoration:none;color:inherit}
.cs .wrap{max-width:1360px;margin:0 auto;padding:0 40px}
.cs .lab{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mid);margin:0}
.cs .dsp{font-family:"Archivo Black","Archivo",Helvetica,sans-serif;font-weight:400;
  letter-spacing:-.035em;line-height:.9;text-transform:uppercase;margin:0;color:var(--white)}

/* nav */
.cs-nav{position:sticky;top:54px;z-index:30;background:var(--ground);border-bottom:1px solid var(--line)}
.cs-nav__in{display:flex;align-items:center;gap:34px;height:72px}
.cs-logo{height:15px;width:auto;filter:invert(1)}
.cs-nav__links{display:flex;gap:26px;margin-left:auto}
.cs-nav__links a{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);padding:4px 0;border-bottom:1px solid transparent}
.cs-nav__links a:hover,.cs-nav__links a[aria-current]{color:var(--white);border-bottom-color:var(--white)}
.cs .btn{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--black);
  padding:14px 22px;font-size:13px;font-weight:600}
.cs .btn:hover{background:#D9D9D4}
.cs .btn--ghost{background:none;color:var(--text);border:1px solid #4A4A46}
.cs .btn--ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.cs-menu{display:none}

/* head */
.cs-head{padding:52px 0 0}
.cs-crumb{display:flex;gap:10px;align-items:baseline;margin-bottom:38px}
.cs-crumb a{color:var(--mid)}
.cs-crumb a:hover{color:var(--white)}
.cs-head h1{font-size:clamp(2.2rem,7vw,5.4rem);margin-top:20px}
.cs .cs-deck{font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--white);font-weight:600;
  letter-spacing:-.02em;margin-top:26px;max-width:26ch;line-height:1.2}

/* meta rail */
.cs-meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px}
.cs-meta__in{display:grid;grid-template-columns:repeat(5,1fr)}
.cs-meta__in>div{padding:22px 0 24px;border-left:1px solid var(--line);padding-left:22px}
.cs-meta__in>div:first-child{border-left:0;padding-left:0}
.cs-meta p.v{font-size:14.5px;color:var(--text);margin-top:7px}
.cs-meta a.v:hover{color:var(--white);text-decoration:underline}

/* figures */
.cs-fig{padding:52px 0 0}
.cs-fig figure{margin:0}
.cs-fig img,.cs-fig .ph{border:1px solid var(--line)}
.cs-fig figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cs-fig figcaption p{font-size:14px;color:var(--mid);max-width:58ch}
.cs-fig--wide{padding-top:64px}
.cs-zoom{display:block;padding:0;width:100%;position:relative;cursor:zoom-in;text-align:left}
.cs-zoom img{border:1px solid var(--line);width:100%}
.cs-zoom__hint{
  position:absolute;right:14px;top:14px;font-family:"DM Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  background:rgba(17,17,16,.72);border:1px solid var(--line);padding:6px 10px;opacity:0;transition:opacity .2s;
}
.cs-zoom:hover .cs-zoom__hint,.cs-zoom:focus-visible .cs-zoom__hint{opacity:1}
.cs-lightbox{
  position:fixed;inset:0;z-index:400;background:rgba(12,12,11,.94);
  display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:40px 20px;
}
.cs-lightbox[data-open="true"]{display:flex}
.cs-lightbox img{max-width:1448px;width:100%;border:1px solid var(--line)}
.cs-lightbox__close{
  position:fixed;top:18px;right:20px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#EDEDEA;border:1px solid #4A4A46;
  background:rgba(17,17,16,.8);padding:10px 14px;
}

/* body */
.cs-lead{padding:64px 0 0}
.cs-lead p{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.45;color:var(--white);max-width:34ch;font-weight:500;letter-spacing:-.01em}
.cs-body{padding:56px 0}
.cs-body__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.cs-body h2{font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--white);margin:0 0 16px}
.cs-body p{color:#C0C0BA;font-size:17px;max-width:52ch}
.cs-body p + p{margin-top:18px}

/* quote */
.cs-quote{background:var(--panel);padding:76px 0}
.cs-quote blockquote{margin:0}
.cs-quote q{display:block;max-width:15.5em;font-family:"Archivo",sans-serif;font-weight:600;
  letter-spacing:-.025em;font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.2;color:var(--white);quotes:'"' '"'}
.cs-quote cite{display:block;font-style:normal;font-family:"DM Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-top:28px;line-height:1.8}
.cs-quote__in{display:grid;grid-template-columns:1.4fr .6fr;gap:56px;align-items:end}
.cs-quote__note{font-size:14px;color:var(--mid);border-left:1px solid var(--line);padding-left:22px}

/* impact */
.cs-impact{padding:80px 0 84px}
.cs-impact h2{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;color:var(--white);margin:20px 0 0;max-width:22ch}
.cs-impact__list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line);max-width:80ch}
.cs-impact__list li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cs-impact__list b{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--mid);font-weight:400}
.cs-impact__list p{font-size:17px;color:#C0C0BA}
.cs-impact3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:44px}
.cs-impact3>div{padding:26px 26px 30px 0;border-left:1px solid var(--line);padding-left:26px}
.cs-impact3>div:first-child{border-left:0;padding-left:0}
.cs-impact3 b{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--mid);font-weight:400;margin-bottom:14px}
.cs-impact3 h3{font-family:"Archivo",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0 0 8px}
.cs-impact3 p{font-size:15px;color:#C0C0BA;max-width:32ch}

/* gallery */
.cs-gal{padding:0 0 76px}
.cs-gal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.cs-gal .ph{aspect-ratio:4/3}
.cs-gal figure.wide{grid-column:1 / -1}
.cs-vertrow{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;
  background:var(--panel);border:1px solid var(--line);padding:36px 40px}
.cs-vert .cs-zoom{width:auto}
.cs-vert img{max-height:580px;width:auto;border:1px solid var(--line)}
.cs-vertrow__txt p:not(.lab){font-size:17px;color:#C0C0BA;max-width:44ch;margin-top:14px}
.cs-gal img{border:1px solid var(--line);width:100%}
.cs-gal figcaption{margin-top:12px;font-size:13.5px;color:var(--mid)}
.ph{position:relative;
  background:repeating-linear-gradient(135deg,var(--ph-line) 0 1px,transparent 1px 9px),var(--ph-bg);
  display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
.ph::after{content:attr(data-label);font-family:"DM Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ph-fg);padding:8px 10px;background:var(--ph-bg);margin:10px}

/* scope chips */
.cs-scope{border-top:1px solid var(--line);padding:52px 0 60px}
.cs-scope__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cs-scope__list li{list-style:none;border:1px solid var(--line);padding:8px 14px;
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C0C0BA}

/* next */
.cs-next{border-top:1px solid var(--line);padding:44px 0}
.cs-next__in{display:flex;justify-content:space-between;gap:24px;align-items:baseline;flex-wrap:wrap}
.cs-next h3{font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--white);margin:8px 0 0}
.cs-next a:hover h3{text-decoration:underline}

/* cta + foot */
.cs-cta{background:var(--white);color:#222222;padding:96px 0}
.cs-cta .lab{color:#707070}
.cs-cta .dsp{color:#222222;font-size:clamp(2rem,6vw,4.6rem);margin-top:22px}
.cs-cta p{margin-top:24px;color:#3B3B39;font-size:18px;max-width:44ch}
.cs-cta__row{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cs-cta .btn{background:#222222;color:#fff}
.cs-cta .btn:hover{background:#111110}
.cs-cta__mail{font-family:"DM Mono",monospace;font-size:13px;color:#5A5A57;border-bottom:1px solid #C9C9C5;padding-bottom:2px}
.cs-foot{background:var(--black);color:#8E8E8A;padding:48px 0 40px}
.cs-foot__in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.cs-foot img{filter:invert(1);height:15px;width:auto}
.cs-foot__links{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px}
.cs-foot a:hover{color:#fff}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .cs .wrap{padding:0 28px}
  .cs-meta__in{grid-template-columns:1fr 1fr}
  .cs-meta__in>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .cs-meta__in>div:nth-child(-n+2){border-top:0}
  .cs-body__grid,.cs-quote__in{grid-template-columns:1fr;gap:34px}
  .cs-impact3{grid-template-columns:1fr}
  .cs-impact3>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding:22px 0}
  .cs-impact3>div:first-child{border-top:0}
  .cs-quote__note{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
  .cs-nav .btn{display:none}
  .cs-gal__grid{grid-template-columns:1fr}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  .cs .wrap{padding:0 20px}
  .cs-nav__in{height:60px;gap:14px;position:relative}
  .cs-nav__links,.cs-nav .btn{display:none}
  .cs-menu{display:inline-flex;margin-left:auto;font-family:"DM Mono",monospace;font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;border:1px solid #4A4A46;color:var(--text);padding:9px 14px}
  .cs-head{padding:34px 0 0}
  .cs-crumb{margin-bottom:26px}
  .cs-head h1{font-size:clamp(2rem,11vw,2.8rem)}
  .cs .cs-deck{font-size:1.1rem;max-width:none}
  .cs-meta{margin-top:32px}
  .cs-meta__in{grid-template-columns:1fr}
  .cs-meta__in>div{border-top:1px solid var(--line);padding:16px 0}
  .cs-meta__in>div:first-child{border-top:0}
  .cs-fig{padding:34px 0 0}
  .cs-lead{padding:44px 0 0}
  .cs-lead p{max-width:none}
  .cs-body{padding:40px 0}
  .cs-quote{padding:52px 0}
  .cs-quote blockquote{max-width:none}
  .cs-impact,.cs-gal{padding-top:52px}
  .cs-impact{padding-bottom:56px}
  .cs-fig--wide{padding-top:44px}
  .cs-zoom__hint{opacity:1;right:10px;top:10px}
  .cs-vertrow{grid-template-columns:1fr;gap:24px;padding:22px}
  .cs-vert img{max-height:none;width:100%}
  .cs-vert .cs-zoom{width:100%}
  .cs-impact__list{margin-top:34px}
  .cs-impact3{grid-template-columns:1fr}
  .cs-impact3>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding:22px 0}
  .cs-impact3>div:first-child{border-top:0}
  .cs-impact__list li{grid-template-columns:34px 1fr;gap:12px}
  .cs-scope{padding:40px 0 44px}
  .cs-cta{padding:64px 0 72px}
  .cs-foot__in{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ---------- lane page: Start a Business ---------- */
.ln-hero{padding:86px 0 0}
.ln-hero .dsp{font-size:clamp(2.5rem,8.6vw,6.6rem);margin:34px 0 0}
.cs .ln-hero__deck{margin-top:30px;font-size:clamp(1.1rem,2vw,1.45rem);color:#C0C0BA;
  max-width:44ch;line-height:1.42}
.ln-hero__row{margin-top:38px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.cs .ln-hero__note{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid)}

/* the reassurance band */
.ln-calm{margin-top:76px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:44px 0 48px}
.ln-calm h2{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.18;color:var(--white);max-width:22ch;margin:0}
.ln-calm__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.cs .ln-calm p{font-size:17px;color:#C0C0BA;max-width:50ch;line-height:1.5}
.cs .ln-calm p + p{margin-top:18px}

/* what you actually need */
.ln-need{padding:78px 0 0}
.ln-need__grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  margin-top:40px}
.ln-need__grid>div{padding:26px 22px 30px 0;border-left:1px solid var(--line);padding-left:22px}
.ln-need__grid>div:first-child{border-left:0;padding-left:0}
.ln-need b{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--mid);font-weight:400;margin-bottom:12px}
.ln-need h3{font-family:"Archivo",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0 0 8px}
.cs .ln-need__grid p{font-size:14.5px;color:#C0C0BA;line-height:1.5}
.cs .ln-need__foot{margin-top:30px;font-size:15px;color:var(--mid);max-width:62ch}

/* three ways to start */
.ln-ways{padding:82px 0 0}
.ln-ways__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.ln-way{border:1px solid var(--line);padding:32px 30px 34px;background:var(--panel);
  display:flex;flex-direction:column;min-width:0}
.ln-way__no{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--mid)}
.ln-way h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--white);margin:16px 0 0;line-height:1.15}
.cs .ln-way__for{margin-top:12px;font-size:15px;color:#C0C0BA;line-height:1.5}
.ln-way ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.ln-way li{font-size:14.5px;color:#C0C0BA;padding:11px 0 11px 20px;border-bottom:1px solid var(--line);
  position:relative}
.ln-way li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:#5A5A55}
.cs .ln-ways__foot{margin-top:32px;font-size:15px;color:var(--mid);max-width:66ch}

/* yes you can do it yourself */
.ln-diy{margin-top:84px;background:var(--panel);padding:78px 0 84px}
.ln-diy__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ln-diy .dsp{font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:.94;color:var(--white)}
.cs .ln-diy p{font-size:17px;color:#C0C0BA;max-width:48ch;line-height:1.5}
.cs .ln-diy p + p{margin-top:18px}
.cs .ln-diy p b{color:var(--white);font-weight:600}

/* how it works */
.ln-steps{padding:84px 0 0}
.ln-steps__list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.ln-steps__list li{display:grid;grid-template-columns:70px 1fr 1fr;gap:34px;align-items:baseline;
  padding:26px 0 28px;border-bottom:1px solid var(--line)}
.ln-steps__no{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--mid)}
.ln-steps h3{font-family:"Archivo",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0}
.cs .ln-steps__list p{font-size:15.5px;color:#C0C0BA;max-width:50ch;line-height:1.5}

/* proof */
.ln-proof{padding:84px 0 0}
.ln-proof__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.ln-proof a{display:block;border:1px solid var(--line);background:var(--panel)}
.ln-proof figure{margin:0}
.ln-proof__shot{aspect-ratio:16/9;overflow:hidden;background:var(--well);border-bottom:1px solid var(--line)}
.ln-proof__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:saturate(.92) brightness(.9);transition:filter .3s ease}
.ln-proof a:hover .ln-proof__shot img{filter:saturate(1) brightness(1)}
.ln-proof__txt{padding:24px 26px 28px}
.ln-proof h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:20px;
  color:var(--white);margin:12px 0 0}
.cs .ln-proof__txt p{font-size:15px;color:#C0C0BA;margin-top:8px;max-width:36ch}
.ln-proof__go{display:inline-block;margin-top:18px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--line);
  padding-bottom:3px}
.ln-proof a:hover .ln-proof__go{border-color:var(--white)}

/* questions */
.ln-q{padding:84px 0 0}
.ln-q__list{margin-top:40px;border-top:1px solid var(--line)}
.ln-q__list>div{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;padding:26px 0 28px;
  border-bottom:1px solid var(--line);align-items:baseline}
.ln-q h3{font-family:"Archivo",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0;max-width:26ch}
.cs .ln-q__list p{font-size:15.5px;color:#C0C0BA;max-width:56ch;line-height:1.5}

.ln-sec__h{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.18;color:var(--white);margin:18px 0 0;max-width:24ch}
.cs .ln-sec__d{margin-top:16px;font-size:17px;color:#C0C0BA;max-width:54ch;line-height:1.5}

.ln-end{padding:84px 0 0}

@media (max-width:1024px){
  .ln-hero{padding:58px 0 0}
  .ln-calm{margin-top:56px}
  .ln-calm__grid,.ln-diy__grid,.ln-q__list>div{grid-template-columns:1fr;gap:24px}
  .ln-need__grid{grid-template-columns:1fr 1fr}
  .ln-need__grid>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding:20px 0}
  .ln-need__grid>div:nth-child(-n+2){border-top:0}
  .ln-need__grid>div:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
  .ln-ways__grid{grid-template-columns:1fr;gap:16px}
  .ln-steps__list li{grid-template-columns:56px 1fr;gap:18px}
  .cs .ln-steps__list p{grid-column:2}
  .ln-need,.ln-ways,.ln-steps,.ln-proof,.ln-q,.ln-end{padding-top:58px}
  .ln-diy{margin-top:58px;padding:56px 0 62px}
}
@media (max-width:767px){
  .ln-hero{padding:40px 0 0}
  .cs .ln-hero__deck{margin-top:22px}
  .ln-calm{margin-top:42px;padding:32px 0 36px}
  .ln-need__grid{grid-template-columns:1fr}
  .ln-need__grid>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding:18px 0}
  .ln-need__grid>div:first-child{border-top:0}
  .ln-need__grid>div:nth-child(even){padding-left:0;border-left:0}
  .ln-way{padding:26px 22px 28px}
  .ln-proof__grid{grid-template-columns:1fr}
  .ln-steps__list li{grid-template-columns:1fr;gap:8px}
  .cs .ln-steps__list p{grid-column:1;margin-top:6px}
  .ln-need,.ln-ways,.ln-steps,.ln-proof,.ln-q,.ln-end{padding-top:44px}
  .ln-diy{margin-top:44px;padding:44px 0 48px}
}

/* symptom / meaning rows, specific to the Grow page */
.ln-sym{margin-top:40px;border-top:1px solid var(--line)}
.ln-sym>div{display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:baseline;
  padding:24px 0 26px;border-bottom:1px solid var(--line)}
.ln-sym h3{font-family:"Archivo",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0;max-width:30ch}
.cs .ln-sym p{font-size:15.5px;color:#C0C0BA;max-width:58ch;line-height:1.5}
.cs .ln-sym__foot{margin-top:30px;font-size:15px;color:var(--mid);max-width:64ch}

@media (max-width:1024px){
  .ln-sym>div{grid-template-columns:1fr;gap:10px}
}

/* pointer from Grow to the paid media page */
.gr-pm{padding:70px 0 0}
.gr-pm__card{border:1px solid var(--line);background:var(--panel);padding:34px 36px 38px;max-width:72ch}
.gr-pm__card h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:22px;
  color:var(--white);margin:12px 0 0;max-width:24ch}
.cs .gr-pm__card p{margin-top:12px;font-size:16px;color:#C0C0BA;max-width:60ch;line-height:1.5}
.gr-pm__go{display:inline-block;margin-top:22px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--line);
  padding-bottom:3px}
.cs .gr-pm__go:hover{border-color:var(--white)}

@media (max-width:1024px){
  .gr-pm{padding-top:58px}
  .gr-pm__card{padding:26px 24px 28px;max-width:none}
}
@media (max-width:767px){
  .gr-pm{padding-top:44px}
  .gr-pm__card{padding:24px 22px 26px}
}

/* single featured project, wide */
.cs .ln-feat{margin-top:40px;border:1px solid var(--line);background:var(--panel);
  display:grid;grid-template-columns:52% 48%;align-items:stretch}
.ln-feat__shot{position:relative;overflow:hidden;background:var(--well);
  border-right:1px solid var(--line);min-height:420px}
.ln-feat__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:saturate(.92) brightness(.9);transition:filter .3s ease}
.ln-feat:hover .ln-feat__shot img{filter:saturate(1) brightness(1)}
.ln-feat__txt{padding:40px 40px 42px;display:flex;flex-direction:column;justify-content:center}
.ln-feat h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.05;color:var(--white);margin:14px 0 0}
.cs .ln-feat__txt p.d{margin-top:14px;font-size:17px;color:#C0C0BA;max-width:38ch;line-height:1.45}
.ln-feat__nums{margin-top:28px;border-top:1px solid var(--line);display:grid;
  grid-template-columns:1fr 1fr;gap:0}
.ln-feat__nums>div{padding:18px 18px 18px 0;border-right:1px solid var(--line);min-width:0}
.ln-feat__nums>div:nth-child(even){border-right:0;padding-left:18px}
.ln-feat__nums>div:nth-child(n+3){border-top:1px solid var(--line)}
.ln-feat__nums b{display:block;font-family:"Archivo Black",sans-serif;font-weight:400;font-size:26px;
  letter-spacing:-.03em;color:var(--white);line-height:1}
.cs .ln-feat__nums span{display:block;margin-top:6px;font-family:"DM Mono",monospace;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mid);line-height:1.5}
.ln-feat__go{display:inline-block;margin-top:28px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--line);
  padding-bottom:3px;align-self:flex-start}
.ln-feat:hover .ln-feat__go{border-color:var(--white)}

@media (max-width:1024px){
  .cs .ln-feat{grid-template-columns:1fr}
  .ln-feat__shot{position:relative;border-right:0;border-bottom:1px solid var(--line);
    aspect-ratio:16/9;min-height:0}
  .ln-feat__txt{padding:30px 28px 34px}
}
@media (max-width:767px){
  .ln-feat__txt{padding:24px 22px 28px}
  .ln-feat__nums{grid-template-columns:1fr}
  .ln-feat__nums>div{border-right:0;padding:14px 0;border-top:1px solid var(--line)}
  .ln-feat__nums>div:first-child{border-top:0}
  .ln-feat__nums>div:nth-child(even){padding-left:0}
}

/* honest side-by-side: do it yourself vs handled */
.ln-vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:42px;border:1px solid var(--line)}
.ln-vs>div{padding:34px 32px 38px;min-width:0}
.ln-vs>div:first-child{border-right:1px solid var(--line)}
.ln-vs>div:last-child{background:var(--panel)}
.ln-vs__lab{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid)}
.ln-vs h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--white);margin:14px 0 0;line-height:1.15}
.cs .ln-vs p.s{margin-top:12px;font-size:15px;color:#C0C0BA;line-height:1.5;max-width:38ch}
.ln-vs ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.ln-vs li{font-size:14.5px;color:#C0C0BA;padding:11px 0 11px 20px;border-bottom:1px solid var(--line);
  position:relative}
.ln-vs li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:#5A5A55}

/* the "these are the real jobs" scenario rows */
.ln-jobs{margin-top:40px;border-top:1px solid var(--line)}
.ln-jobs>div{display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:baseline;
  padding:24px 0 26px;border-bottom:1px solid var(--line)}
.ln-jobs h3{font-family:"Archivo",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0;max-width:30ch}
.cs .ln-jobs p{font-size:15.5px;color:#C0C0BA;max-width:58ch;line-height:1.5}

/* hand-off to the three lanes */
.ln-lanes{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cs .ln-lane{display:block;border:1px solid var(--line);padding:28px 26px 30px;background:var(--panel)}
.cs .ln-lane:hover{border-color:#4E4E4A}
.ln-lane b{display:block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);font-weight:400}
.ln-lane h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:20px;
  color:var(--white);margin:12px 0 0}
.cs .ln-lane p{margin-top:10px;font-size:15px;color:#C0C0BA;line-height:1.5}
.ln-lane span{display:inline-block;margin-top:18px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--line);
  padding-bottom:3px}
.cs .ln-lane:hover span{border-color:var(--white)}

@media (max-width:1024px){
  .ln-vs{grid-template-columns:1fr}
  .ln-vs>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .ln-jobs>div{grid-template-columns:1fr;gap:10px}
  .ln-lanes{grid-template-columns:1fr;gap:16px}
}
@media (max-width:767px){
  .ln-vs>div{padding:26px 22px 28px}
  .cs .ln-lane{padding:24px 22px 26px}
}

/* about hero with a portrait slot */
.ab-hero__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:end}
.ab-port{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--well);
  aspect-ratio:4/5}
.ab-port img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.ab-port figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#D6D6D0;background:linear-gradient(to bottom, rgba(20,20,19,0), rgba(20,20,19,.82))}

/* three things the years buy */
.ab-three{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:40px}
.ab-three>div{padding:28px 26px 32px 0;border-left:1px solid var(--line);padding-left:26px}
.ab-three>div:first-child{border-left:0;padding-left:0}
.ab-three b{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--mid);font-weight:400;margin-bottom:12px}
.ab-three h3{font-family:"Archivo",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0 0 8px}
.cs .ab-three p{font-size:15px;color:#C0C0BA;line-height:1.5}

/* how I work, as plain rules */
.ab-rules{margin-top:40px;border-top:1px solid var(--line)}
.ab-rules>div{display:grid;grid-template-columns:70px 1fr 1.2fr;gap:34px;align-items:baseline;
  padding:24px 0 26px;border-bottom:1px solid var(--line)}
.ab-rules__no{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--mid)}
.ab-rules h3{font-family:"Archivo",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0}
.cs .ab-rules p{font-size:15.5px;color:#C0C0BA;max-width:56ch;line-height:1.5}

/* what I do, as a plain wrapped list */
.ab-disc{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:42px;border:1px solid var(--line)}
.ab-disc>div{padding:32px 30px 36px;min-width:0}
.ab-disc>div:first-child{border-right:1px solid var(--line);background:var(--panel)}
.ab-disc__lab{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid)}
.ab-disc h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:20px;
  color:var(--white);margin:14px 0 0}
.ab-disc ul{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.ab-disc li{font-size:15px;color:#C0C0BA;padding:11px 0 11px 20px;border-bottom:1px solid var(--line);
  position:relative}
.ab-disc li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:#5A5A55}

/* the other portfolio */
.ab-other{margin-top:40px;border:1px solid var(--line);padding:34px 36px 38px;max-width:78ch}
.ab-other h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:20px;
  color:var(--white);margin:12px 0 0}
.cs .ab-other p{margin-top:12px;font-size:16px;color:#C0C0BA;max-width:60ch;line-height:1.5}
.ab-other a.go{display:inline-block;margin-top:20px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--line);
  padding-bottom:3px}
.cs .ab-other a.go:hover{border-color:var(--white)}

@media (max-width:1024px){
  .ab-hero__grid{grid-template-columns:1fr;gap:34px}
  .ab-port{aspect-ratio:3/2;max-width:420px}
  .ab-port img{object-position:50% 14%}
  .ab-three{grid-template-columns:1fr}
  .ab-three>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding:22px 0}
  .ab-three>div:first-child{border-top:0}
  .ab-rules>div{grid-template-columns:56px 1fr;gap:18px}
  .cs .ab-rules p{grid-column:2}
  .ab-disc{grid-template-columns:1fr}
  .ab-disc>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:767px){
  .ab-port{aspect-ratio:4/5;max-width:250px}
  .ab-port img{object-position:50% 10%}
  .ab-rules>div{grid-template-columns:1fr;gap:8px}
  .cs .ab-rules p{grid-column:1;margin-top:6px}
  .ab-disc>div{padding:26px 22px 28px}
  .ab-other{padding:26px 22px 28px}
}

/* ---------- the sentence builder ---------- */
.ct-form{margin-top:52px;border-top:1px solid var(--line);padding-top:46px}
.ct-sent{font-family:"Archivo",sans-serif;font-weight:500;letter-spacing:-.022em;
  font-size:clamp(1.22rem,2.45vw,1.95rem);line-height:1.62;color:#8E8E88;max-width:46ch}
.ct-sent .fixed{color:#8E8E88}

.cs .ct-in,
.cs .ct-sel{
  font:inherit;letter-spacing:inherit;color:var(--white);background:transparent;
  border:0;border-bottom:1px solid #4A4A45;border-radius:0;padding:0 2px 2px;margin:0 2px;
  outline:none;-webkit-appearance:none;appearance:none;max-width:100%;
}
.cs .ct-in::placeholder{color:#5E5E58}
.cs .ct-in:focus,
.cs .ct-sel:focus{border-bottom-color:var(--white);background:rgba(255,255,255,.045)}
.cs .ct-in:hover,
.cs .ct-sel:hover{border-bottom-color:#7A7A73}
.cs .ct-sel{cursor:pointer;padding-right:16px;
  background-image:linear-gradient(45deg,transparent 50%,#7A7A73 50%),
                   linear-gradient(135deg,#7A7A73 50%,transparent 50%);
  background-position:calc(100% - 8px) calc(50% + 2px), calc(100% - 3px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cs .ct-sel option{background:#1E1E1D;color:#EDEDEA;font-size:15px}
.ct-mirror{position:absolute;visibility:hidden;white-space:pre;left:-9999px;top:-9999px}

.ct-more{margin-top:52px;border-top:1px solid var(--line);padding-top:34px;max-width:74ch}
.ct-more label{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid)}
.cs .ct-more textarea{display:block;width:100%;margin-top:16px;min-height:120px;resize:vertical;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:16px 18px;
  color:var(--text);font-family:"Archivo",sans-serif;font-size:16px;line-height:1.5;outline:none}
.cs .ct-more textarea::placeholder{color:#6A6A64}
.cs .ct-more textarea:focus{border-color:#5E5E58}

.ct-send{margin-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cs .ct-send__note{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid)}
.cs button.btn{border:0;cursor:pointer;font-family:"Archivo",sans-serif}

/* the confirmation state */
.ct-done{border:1px solid var(--line);background:var(--panel);padding:44px 44px 48px;margin-top:52px}
.ct-done h2{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.4rem,2.9vw,2.1rem);line-height:1.15;color:var(--white);margin:16px 0 0}
.cs .ct-done__echo{margin-top:26px;border-left:1px solid var(--line);padding-left:22px;
  font-size:17px;color:#C0C0BA;line-height:1.55;max-width:60ch}
.cs .ct-done__note{margin-top:28px;font-size:15px;color:var(--mid);max-width:60ch}
.cs .ct-done__again{margin-top:26px;background:transparent;border:1px solid var(--line);
  color:var(--text);font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 16px;border-radius:2px;cursor:pointer}
.cs .ct-done__again:hover{border-color:#7A7A73;color:var(--white)}

/* what happens next */
.ct-next{margin-top:0}
.ct-next__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  margin-top:40px}
.ct-next__grid>div{padding:26px 24px 30px 0;border-left:1px solid var(--line);padding-left:24px}
.ct-next__grid>div:first-child{border-left:0;padding-left:0}
.ct-next b{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--mid);font-weight:400;margin-bottom:12px}
.ct-next h3{font-family:"Archivo",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0 0 8px}
.cs .ct-next__grid p{font-size:15px;color:#C0C0BA;line-height:1.5}

/* other ways */
.ct-ways{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.ct-way{border:1px solid var(--line);padding:30px 28px 32px;background:var(--panel);min-width:0}
.ct-way b{display:block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid);font-weight:400}
.ct-way h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:19px;
  color:var(--white);margin:12px 0 0;word-break:break-word}
.cs .ct-way p{margin-top:10px;font-size:15px;color:#C0C0BA;line-height:1.5}

@media (max-width:1024px){
  .ct-sent{max-width:none;line-height:1.66}
  .ct-next__grid{grid-template-columns:1fr}
  .ct-next__grid>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding:20px 0}
  .ct-next__grid>div:first-child{border-top:0}
  .ct-ways{grid-template-columns:1fr;gap:16px}
  .ct-done{padding:32px 30px 36px}
}
@media (max-width:767px){
  .ct-form{margin-top:34px;padding-top:32px}
  /* on a phone the sentence breaks into short lines instead of shrinking to nothing */
  .ct-sent{font-size:1.24rem;line-height:1.95}
  .cs .ct-in,.cs .ct-sel{margin:0 1px}
  .ct-more{margin-top:36px}
  .ct-done{padding:26px 22px 30px}
  .ct-way{padding:24px 22px 26px}
}

/* ---------- paid media page ---------- */

/* the ad / landing page pair */
.pm-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;align-items:end}
.pm-pair figure{margin:0;min-width:0}
.pm-pair__shot{border:1px solid var(--line);background:var(--well);overflow:hidden;
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:22px}
.pm-pair__shot--lp{background:var(--panel)}
.pm-pair__shot img{width:auto;height:100%;max-width:100%;object-fit:contain;
  filter:saturate(.94) brightness(.94);transition:filter .3s ease}
.pm-pair figure:hover .pm-pair__shot img{filter:saturate(1) brightness(1)}
.pm-pair figcaption{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.pm-pair figcaption b{font-family:"Archivo",sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.02em;color:var(--white)}
.pm-pair figcaption span{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid)}
.cs .pm-pair__note{margin-top:28px;font-size:15.5px;color:#C0C0BA;max-width:68ch;line-height:1.5}

/* the wider set */
.pm-more{margin-top:56px;border-top:1px solid var(--line);padding-top:42px}
.pm-more h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:21px;
  color:var(--white);margin:0;max-width:34ch}
.cs .pm-more>p{margin-top:12px;font-size:15.5px;color:#C0C0BA;max-width:64ch;line-height:1.5}

.pm-ads{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.pm-ads figure{margin:0;min-width:0}
.pm-ads__shot{border:1px solid var(--line);background:var(--panel);overflow:hidden;aspect-ratio:640/1143}
.pm-ads__shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) brightness(.94);transition:filter .3s ease}
.pm-ads figure:hover .pm-ads__shot img{filter:saturate(1) brightness(1)}
.pm-ads figcaption{margin-top:12px;display:flex;flex-direction:column;gap:3px}
.pm-ads figcaption b{font-family:"Archivo",sans-serif;font-size:14.5px;font-weight:700;
  letter-spacing:-.015em;color:var(--white)}
.pm-ads figcaption span{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);line-height:1.5}

/* single case study link card */
.pm-link{margin-top:48px}
.pm-link a{display:block;border:1px solid var(--line);background:var(--panel);
  padding:32px 34px 34px;max-width:64ch}
.pm-link h3{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.025em;font-size:22px;
  color:var(--white);margin:12px 0 0}
.cs .pm-link p{font-size:15.5px;color:#C0C0BA;line-height:1.5;max-width:52ch}
.cs .pm-link h3 + p{margin-top:10px}
.pm-link a:hover{border-color:#5A5A55}
.pm-link a:hover .ln-proof__go{border-color:var(--white)}

@media (max-width:1024px){
  .pm-pair{grid-template-columns:1fr;gap:28px}
  .pm-pair__shot{aspect-ratio:5/4}
  .pm-ads{grid-template-columns:repeat(2,1fr);gap:14px}
  .pm-more{margin-top:44px;padding-top:34px}
  .pm-link a{padding:26px 24px 28px;max-width:none}
}
@media (max-width:767px){
  .pm-pair__shot{aspect-ratio:1/1;padding:14px}
  .pm-ads{grid-template-columns:repeat(2,1fr);gap:10px}
  .cs .pm-pair__note{margin-top:22px}
}

/* ---------- work index ---------- */
.wk-head{padding:78px 0 0}
.wk-head .dsp{font-size:clamp(2.4rem,8.4vw,6.4rem);margin:34px 0 0}
.cs .wk-head__deck{margin-top:28px;font-size:clamp(1.05rem,1.9vw,1.35rem);color:#C0C0BA;
  max-width:46ch;line-height:1.45}

/* lane filter */
.wk-filter{margin-top:52px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wk-filter b{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);font-weight:400;margin-right:12px}
.cs .wk-chip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px;border:1px solid var(--line);
  border-radius:2px;background:transparent;cursor:pointer;font-family:"Archivo",sans-serif;
  font-size:13.5px;font-weight:500;color:#C0C0BA;letter-spacing:-.005em}
.cs .wk-chip i{font-style:normal;font-family:"DM Mono",monospace;font-size:10px;color:var(--mid)}
.cs .wk-chip:hover{border-color:#4E4E4A;color:var(--white)}
.cs .wk-chip[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--black)}
.cs .wk-chip[aria-pressed="true"] i{color:#55554F}

/* the list */
.wk-list{padding:0 0 20px}
.wk-item{border-bottom:1px solid var(--line)}
.wk-item[hidden]{display:none}
.wk-item__a{display:grid;grid-template-columns:1.32fr 1fr;gap:56px;align-items:center;padding:54px 0 58px}
.wk-item__shot{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--well);
  aspect-ratio:16/10}
.wk-item__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:saturate(.92) brightness(.9);transition:filter .3s ease}
.wk-item__a:hover .wk-item__shot img{filter:saturate(1) brightness(1)}
.wk-item__no{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--mid)}
.wk-item__lane{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);border:1px solid var(--line);padding:5px 9px;border-radius:2px}
.wk-item__top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wk-item h2{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.55rem,3.4vw,2.5rem);line-height:1.05;color:var(--white);margin:20px 0 0}
.wk-item__a:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.cs .wk-item__deck{margin-top:16px;font-size:17px;color:#C0C0BA;max-width:36ch;line-height:1.45}
.wk-item__meta{margin-top:26px;border-top:1px solid var(--line);padding-top:16px;
  display:flex;flex-wrap:wrap;gap:22px}
.wk-item__meta div{min-width:0}
.wk-item__meta p{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid)}
.cs .wk-item__meta p + p{margin-top:6px;font-family:"Archivo",sans-serif;font-size:14px;
  letter-spacing:0;text-transform:none;color:#C0C0BA}
.wk-item__go{margin-top:24px;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--line);
  padding-bottom:3px;display:inline-block}
.wk-item__a:hover .wk-item__go{border-color:var(--white)}

.cs .wk-empty{padding:60px 0;color:var(--mid);font-size:16px}

@media (max-width:1024px){
  .wk-head{padding:56px 0 0}
  .wk-item__a{grid-template-columns:1fr;gap:26px;padding:40px 0 44px}
  .cs .wk-item__deck{max-width:52ch}
  .wk-item__meta{gap:26px}
}
@media (max-width:767px){
  .wk-head{padding:38px 0 0}
  .cs .wk-head__deck{margin-top:22px}
  /* the filters wrap onto two lines rather than scrolling out of sight:
     on a phone a sideways scroll strip hides half the options with no hint */
  .wk-filter{margin-top:34px;padding:14px 0;gap:8px;
    flex-wrap:wrap;overflow-x:visible}
  .wk-filter b{display:none}
  .cs .wk-chip{flex:0 1 auto;padding:9px 13px;font-size:12.5px}
  .wk-item__a{padding:30px 0 34px;gap:20px}
  .wk-item__shot{aspect-ratio:16/11}
  .wk-item__meta{gap:0;margin-top:20px}
  .wk-item__meta div{flex:1 1 100%;border-top:1px solid var(--line);padding:12px 0;
    display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .wk-item__meta div:first-child{border-top:0}
  .cs .wk-item__meta p + p{margin-top:0;text-align:right}
}

/* impact */
.cs-impact{padding:80px 0 84px}
.cs-impact h2{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;color:var(--white);margin:20px 0 0;max-width:22ch}
.cs-impact__list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line);max-width:80ch}
.cs-impact__list li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cs-impact__list b{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--mid);font-weight:400}
.cs-impact__list p{font-size:17px;color:#C0C0BA}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .cs .wrap{padding:0 28px}
  .cs-meta__in{grid-template-columns:1fr 1fr}
  .cs-meta__in>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .cs-meta__in>div:nth-child(-n+2){border-top:0}
  .cs-body__grid,.cs-quote__in{grid-template-columns:1fr;gap:34px}
  .cs-quote__note{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
  .cs-nav .btn{display:none}
  .cs-gal__grid{grid-template-columns:1fr}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  .cs .wrap{padding:0 20px}
  .cs-nav__in{height:60px;gap:14px;position:relative}
  .cs-nav__links,.cs-nav .btn{display:none}
  .cs-menu{display:inline-flex;margin-left:auto;font-family:"DM Mono",monospace;font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;border:1px solid #4A4A46;color:var(--text);padding:9px 14px}
  .cs-head{padding:34px 0 0}
  .cs-crumb{margin-bottom:26px}
  .cs-head h1{font-size:clamp(2rem,11vw,2.8rem)}
  .cs .cs-deck{font-size:1.1rem;max-width:none}
  .cs-meta{margin-top:32px}
  .cs-meta__in{grid-template-columns:1fr}
  .cs-meta__in>div{border-top:1px solid var(--line);padding:16px 0}
  .cs-meta__in>div:first-child{border-top:0}
  .cs-fig{padding:34px 0 0}
  .cs-lead{padding:44px 0 0}
  .cs-lead p{max-width:none}
  .cs-body{padding:40px 0}
  .cs-quote{padding:52px 0}
  .cs-quote blockquote{max-width:none}
  .cs-impact,.cs-gal{padding-top:52px}
  .cs-impact{padding-bottom:56px}
  .cs-fig--wide{padding-top:44px}
  .cs-zoom__hint{opacity:1;right:10px;top:10px}
  .cs-vertrow{grid-template-columns:1fr;gap:24px;padding:22px}
  .cs-vert img{max-height:none;width:100%}
  .cs-vert .cs-zoom{width:100%}
  .cs-impact__list{margin-top:34px}
  .cs-impact__list li{grid-template-columns:34px 1fr;gap:12px}
  .cs-scope{padding:40px 0 44px}
  .cs-cta{padding:64px 0 72px}
  .cs-foot__in{flex-direction:column;align-items:flex-start;gap:18px}
}


/* ============================================================
   HOME PAGE
   Its own system, scoped to .c1 instead of .cs
   Put the class "c1" on the outermost container of the home page.
   Every other page uses "cs".
   ============================================================ */

/* ============================================================
   CONCEPT 01 — "CARLOS", DARK
   Same layout and typography as the light version. Charcoal is
   now the ground; white is the accent, spent on two full-width
   flips (the empathy band and the closing CTA) and on the type.
   Display: Archivo Black  /  Text: Archivo  /  Utility: DM Mono
   ============================================================ */
.c1{
  --ground:#1E1E1D;   /* main charcoal ground */
  --panel:#252524;    /* one step up, for lifted sections */
  --well:#161615;     /* one step down, for the work section */
  --black:#111110;
  --line:#373734;
  --text:#EDEDEA;
  --mid:#93938C;
  --white:#FFFFFF;
  --ink:#222222;      /* type color on the white flips */
  --ph-bg:#242423; --ph-line:#302F2E; --ph-fg:#84847E;
  background:var(--ground);color:var(--text);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;
}
.c1 .lab{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);margin:0;
}
.c1 .dsp{
  font-family:"Archivo Black","Archivo",Helvetica,sans-serif;
  font-weight:400;letter-spacing:-.035em;line-height:.88;
  text-transform:uppercase;text-wrap:balance;margin:0;color:var(--white);
}
.c1 .wrap{max-width:1360px;margin:0 auto;padding:0 40px}
.c1 p{margin:0}
.c1 a{text-decoration:none;color:inherit}

/* nav */
.c1-nav{position:sticky;top:54px;z-index:30;background:var(--ground);border-bottom:1px solid var(--line)}
.c1-nav__in{display:flex;align-items:center;gap:34px;height:72px}
.c1-logo{height:15px;width:auto;filter:invert(1)}
.c1-nav__links{display:flex;gap:26px;margin-left:auto}
.c1-nav__links a{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);padding:4px 0;
  border-bottom:1px solid transparent;
}
.c1-nav__links a:hover{color:var(--white);border-bottom-color:var(--white)}
.c1 .c1-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--white);color:var(--black);padding:14px 22px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
}
.c1 .c1-btn:hover{background:#D9D9D4}
.c1 .c1-btn--ghost{background:none;color:var(--text);border:1px solid #4A4A46}
.c1 .c1-btn--ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.c1-menu{display:none}

/* hero */
/* type-only hero: the headline gets the full measure, the reel below
   carries the visual weight */
.c1-hero{border-bottom:1px solid var(--line)}
.c1-hero__in{padding:92px 0 46px}
.c1-hero .dsp{font-size:clamp(2.6rem,11.5vw,11rem);margin-top:30px}
.c1-hero .dsp em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--white)}
.c1-hero__foot{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;
  border-top:1px solid var(--line);margin-top:64px;padding-top:34px;
}
.c1-hero__sub{max-width:52ch;font-size:18px;line-height:1.5;color:#C8C8C2}
.c1-hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.c1-hero__note{font-family:"DM Mono",monospace;font-size:11px;color:var(--mid);letter-spacing:.06em;margin-top:28px;line-height:1.7}

/* ---------- the reel ---------- */
.c1-reel{padding:84px 0 92px;border-bottom:1px solid var(--line)}
.c1-reel__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:34px}
.c1-reel__head h2{font-size:clamp(1.9rem,4vw,3.4rem);margin-top:20px}
.c1-reel__frame{position:relative;margin:0;border:1px solid var(--line)}
.c1-reel__frame .ph{aspect-ratio:16/9;--ph-bg:#1B1B1A;--ph-line:#282827}
.c1-reel__video{width:100%;display:block}
.c1-reel__play{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:#fff;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s;
}
.c1-reel__play:hover{background:rgba(255,255,255,.05)}
.c1-reel__play i{
  width:74px;height:74px;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  display:grid;place-items:center;transition:background .25s,border-color .25s;
}
.c1-reel__play i::after{
  content:"";display:block;margin-left:4px;
  border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.c1-reel__play:hover i{background:#fff;border-color:#fff}
.c1-reel__play:hover i::after{border-left-color:var(--black)}
.c1-reel__cap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:16px}
.c1-reel__cap .lab{max-width:64ch}
.c1-reel__link{border-bottom:1px solid var(--line);padding-bottom:3px;white-space:nowrap}
.c1-reel__link:hover{color:var(--white);border-bottom-color:var(--white)}
.c1-work__link{border-bottom:1px solid var(--line)}
.c1-work__link:hover{color:var(--white);border-bottom-color:var(--white)}

/* capability rail */
.c1-rail{border-bottom:1px solid var(--line)}
.c1-rail__in{display:grid;grid-template-columns:repeat(4,1fr)}
.c1-rail__in>div{padding:26px 0 28px;border-left:1px solid var(--line);padding-left:22px}
.c1-rail__in>div:first-child{border-left:0;padding-left:0}
.c1-rail h3{
  font-family:"Archivo Black",sans-serif;font-weight:400;font-size:20px;
  letter-spacing:-.02em;margin:0 0 6px;text-transform:uppercase;color:var(--white);
}
.c1-rail p{font-size:13.5px;color:var(--mid);max-width:24ch}

/* empathy — white flip */
.c1-empathy{background:var(--white);color:var(--ink);padding:96px 0}
.c1-empathy .lab{color:#707070}
.c1-empathy h2{
  font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.8rem,3.6vw,3.1rem);line-height:1.12;margin:22px 0 0;max-width:20ch;color:var(--ink);
}
.c1-empathy p{margin-top:26px;max-width:52ch;color:#3B3B39;font-size:17px}

/* three paths */
.c1-paths{border-bottom:1px solid var(--line)}
.c1-paths__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:74px 0 34px}
.c1-paths__head h2{font-size:clamp(1.9rem,4vw,3.4rem)}
.c1-paths__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.c1-path{border-left:1px solid var(--line);padding:34px 26px 40px;display:flex;flex-direction:column;min-height:420px;transition:background .25s}
.c1-path:first-child{border-left:0;padding-left:0}
.c1-path:hover{background:var(--panel)}
.c1-path__n{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--mid)}
.c1-path h3{
  font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.03em;margin:16px 0 10px;color:var(--white);
}
.c1-path__q{font-size:17px;color:#C8C8C2;font-style:italic;margin-bottom:22px}
.c1-path ul{list-style:none;margin:0;padding:0;columns:2;column-gap:18px;font-size:13.5px;color:var(--mid)}
.c1-path li{padding:5px 0;break-inside:avoid}
.c1-path__go{margin-top:auto;padding-top:26px;font-size:13px;font-weight:600;display:inline-flex;gap:10px;align-items:center;color:var(--white)}
.c1-path__go span{transition:transform .2s}
.c1-path__go:hover span{transform:translateX(4px)}

/* capabilities list */
.c1-caps{background:var(--panel);padding:88px 0 96px}
.c1-caps__row{
  display:grid;grid-template-columns:.9fr 1.4fr auto;gap:32px;align-items:baseline;
  border-top:1px solid var(--line);padding:30px 0;
}
.c1-caps__row:last-of-type{border-bottom:1px solid var(--line)}
.c1-caps__row h3{
  font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,4rem);letter-spacing:-.04em;margin:0;line-height:.9;
  color:var(--white);transition:transform .25s;
}
.c1-caps__row:hover h3{transform:translateX(10px)}
.c1-caps__row p{color:#C0C0BA;font-size:16px;max-width:52ch}
.c1-caps__row .lab{white-space:nowrap}

/* DIY */
.c1-diy{padding:96px 0}
.c1-diy__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
/* the headline block is tuned to finish level with the body copy beside it */
.c1-diy .dsp{font-size:clamp(2.1rem,calc(2.75rem + 1.875vw),5rem)}
/* YES is the concession the whole section rests on, so it is set solid
   and close to twice the size of the three lines that follow it */
.c1-diy__h{color:var(--white)}
.c1-diy__h em{
  display:block;font-style:normal;
  font-size:1.85em;line-height:.86;margin-bottom:.06em;
}
.c1-diy p{font-size:17px;color:#C0C0BA;margin-bottom:20px;max-width:56ch}
.c1-diy__pull{border-left:3px solid var(--white);padding-left:22px;font-weight:600;font-size:19px;color:var(--white)}

/* the same argument, made scannable */
.c1-compare{margin-top:72px}
.c1-compare__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:14px}
.c1-compare__row{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  border-top:1px solid var(--line);padding:20px 0;
}
.c1-compare__row:last-child{border-bottom:1px solid var(--line)}
.c1-compare__row p{font-size:16px;margin:0}
.c1-compare__row p:first-child{color:var(--mid)}
.c1-compare__row p:last-child{color:var(--white)}

/* the four things people are actually worried about */
.c1-commit{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);margin-top:64px;
}
.c1-commit>div{padding:24px 24px 0 0;border-left:1px solid var(--line);padding-left:24px}
.c1-commit>div:first-child{border-left:0;padding-left:0}
.c1-commit strong{
  display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--white);margin-bottom:6px;
}
.c1-commit span{font-size:13.5px;color:var(--mid)}

/* work */
.c1-work{background:var(--well);padding:88px 0 96px}
.c1-work__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:38px}
.c1-work__head h2{font-size:clamp(1.9rem,4vw,3.4rem)}
.c1-work__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px}
.c1-work__col{display:grid;gap:28px}
.c1-card{background:#232322;display:block;border:1px solid #2C2C2A;transition:border-color .25s}
.c1-card:hover{border-color:#4A4A46}
.c1-card .ph{--ph-bg:#1B1B1A;--ph-line:#282827}
.c1-card--lead .ph{aspect-ratio:4/3}
.c1-card--sm .ph{aspect-ratio:16/10}
.c1-card__meta{padding:20px 22px 24px}
.c1-card h3{font-family:"Archivo",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;margin:8px 0 6px;color:var(--white)}
.c1-card p{font-size:14px;color:var(--mid);max-width:46ch}
.c1-work__foot{margin-top:30px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* experience */
.c1-exp{padding:92px 0;border-bottom:1px solid var(--line)}
.c1-exp__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.c1-exp h2{font-size:clamp(1.9rem,4vw,3.2rem)}
.c1-exp__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.c1-exp__list li{
  list-style:none;border:1px solid var(--line);padding:8px 14px;
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C0C0BA;
}
.c1-exp p{font-size:17px;color:#C0C0BA;margin-bottom:18px;max-width:52ch}

/* personal */
.c1-person{background:var(--panel);padding:90px 0}
.c1-person__in{display:grid;grid-template-columns:.55fr 1fr;gap:56px;align-items:center}
.c1-person .ph{aspect-ratio:1/1}
.c1-person h2{font-size:clamp(1.8rem,3.6vw,3rem);margin-bottom:22px}
.c1-person p{font-size:17px;color:#C0C0BA;margin-bottom:18px;max-width:52ch}
.c1-person__sig{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--mid);margin-top:26px}

/* final CTA — white flip */
.c1-cta{background:var(--white);color:var(--ink);padding:110px 0}
.c1-cta .lab{color:#707070}
.c1-cta .dsp{font-size:clamp(2.4rem,7vw,6.4rem);color:var(--ink)}
.c1-cta p{margin-top:26px;color:#3B3B39;font-size:18px;max-width:46ch}
.c1-cta__row{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.c1-cta .c1-btn{background:var(--ink);color:var(--white)}
.c1-cta .c1-btn:hover{background:var(--black)}
.c1-cta__mail{font-family:"DM Mono",monospace;font-size:13px;color:#5A5A57;border-bottom:1px solid #C9C9C5;padding-bottom:2px}

/* footer */
.c1-foot{background:var(--black);color:#8E8E8A;padding:60px 0 44px}
.c1-foot__in{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px}
.c1-foot .inv{filter:invert(1);height:15px;width:auto}
.c1-foot h4{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#E8E8E8;margin:0 0 16px;font-weight:400}
.c1-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px}
.c1-foot a:hover{color:#fff}
.c1-foot__bar{margin-top:56px;padding-top:22px;border-top:1px solid #2A2A28;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.c1-foot__blurb{font-size:13.5px;max-width:34ch;margin-top:18px}

/* sticky mobile CTA */
.c1-sticky{display:none}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .c1-nav .c1-btn{display:none}
  .c1 .wrap{padding:0 28px}
  .c1-hero__in{padding:64px 0 40px}
  .c1-hero__foot{margin-top:44px;padding-top:28px;gap:30px}
  .c1-rail__in{grid-template-columns:1fr 1fr}
  .c1-rail__in>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .c1-rail__in>div:nth-child(-n+2){border-top:0}
  .c1-paths__grid{grid-template-columns:1fr}
  .c1-path{border-left:0;border-top:1px solid var(--line);min-height:0;padding:30px 0 34px}
  .c1-path:first-child{border-top:0}
  .c1-path:hover{background:none}
  .c1-diy__in,.c1-exp__grid,.c1-person__in{grid-template-columns:1fr;gap:34px}
  .c1-commit{grid-template-columns:1fr 1fr}
  .c1-commit>div:nth-child(3){border-left:0;padding-left:0}
  .c1-commit>div:nth-child(n+3){border-top:1px solid var(--line);padding-top:24px;margin-top:24px}
  .c1-work__grid{grid-template-columns:1fr}
  .c1-caps__row{grid-template-columns:1fr;gap:12px}
  .c1-caps__row .lab{order:-1}
}
/* ---------- phone ---------- */
@media (max-width:767px){
  .c1 .wrap{padding:0 20px}
  .c1-nav__in{height:60px;gap:14px}
  .c1-nav__links,.c1-nav .c1-btn{display:none}
  .c1-menu{display:inline-flex;margin-left:auto;font-family:"DM Mono",monospace;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    border:1px solid #4A4A46;color:var(--text);padding:9px 14px}
  .c1-rail__in{grid-template-columns:1fr}
  .c1-rail__in>div{border-top:1px solid var(--line);padding:18px 0}
  .c1-rail__in>div:first-child{border-top:0}
  .c1-rail p{max-width:none}
  .c1-hero__in{padding:44px 0 32px}
  .c1-hero .dsp{font-size:clamp(2.2rem,11.5vw,3.4rem);margin-top:22px}
  .c1-hero .dsp em{-webkit-text-stroke-width:1.5px}
  .c1-hero__foot{grid-template-columns:1fr;gap:26px;margin-top:34px;padding-top:26px}
  .c1-hero__sub{font-size:16.5px}
  .c1-reel{padding:56px 0 62px}
  .c1-reel__head{flex-direction:column;gap:6px}
  .c1-reel__head p.lab{text-align:left !important}
  .c1-reel__play i{width:58px;height:58px}
  .c1-reel__play span{font-size:10px}
  .c1-reel__cap{gap:10px}
  .c1-hero__cta{gap:10px}
  .c1-hero__cta .c1-btn{width:100%;justify-content:center}
  .c1-empathy{padding:64px 0}
  .c1-path ul{columns:1}
  .c1-caps{padding:60px 0 66px}
  .c1-caps__row h3{font-size:2.3rem}
  .c1-diy,.c1-exp,.c1-person{padding:64px 0}
  .c1-diy__h em{font-size:1.7em}
  /* the table stacks into pairs, each half labeled, so the comparison
     survives without two columns to hold it */
  .c1-compare{margin-top:48px}
  .c1-compare__head{display:none}
  .c1-compare__row{grid-template-columns:1fr;gap:14px;padding:20px 0}
  .c1-compare__row p{position:relative;padding-left:0}
  .c1-compare__row p::before{
    content:attr(data-lab);display:block;
    font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--mid);margin-bottom:5px;
  }
  .c1-compare__row p:last-child::before{color:#6E6E68}
  .c1-commit{grid-template-columns:1fr;margin-top:48px}
  .c1-commit>div{border-left:0;padding-left:0;padding-top:20px;padding-bottom:4px}
  .c1-commit>div:nth-child(n+2){border-top:1px solid var(--line);margin-top:0}
  .c1-commit>div:nth-child(3){padding-left:0}
  .c1-work{padding:60px 0 72px}
  .c1-work__head{flex-direction:column;gap:8px}
  .c1-cta{padding:76px 0 88px}
  .c1-cta .dsp{font-size:clamp(2.2rem,11vw,3.2rem)}
  .c1-foot__in{grid-template-columns:1fr 1fr;gap:30px}
  .c1-sticky{display:flex;position:sticky;bottom:0;z-index:25;background:var(--white)}
  .c1 .c1-sticky a{flex:1;color:var(--black);text-align:center;padding:16px;font-size:14px;font-weight:600}
  .c1 .c1-sticky a:first-child{flex:0 0 auto;padding:16px 18px;border-right:1px solid #C9C9C5;
    font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
  .c1-nav.open{border-bottom-color:var(--white)}
  .c1-nav.open .c1-nav__links{
    display:grid;gap:0;position:absolute;left:0;right:0;top:60px;
    background:var(--black);padding:8px 20px 22px;margin:0;z-index:31;
  }
  .c1-nav.open .c1-nav__links a{color:var(--text);font-size:13px;padding:14px 0;border-bottom:1px solid #2C2C2A}
  .c1-nav.open .c1-nav__links a:last-child{border-bottom:0}
  .c1-nav__in{position:relative}
}

.c1-card__shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;
  filter:saturate(.92) brightness(.88);transition:filter .3s ease}
.c1-card__shot--lead{aspect-ratio:4/3}
.c1-card:hover .c1-card__shot{filter:saturate(1) brightness(1)}
.c1 .c1-card__go{display:inline-block;margin-top:16px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  border-bottom:1px solid var(--line);padding-bottom:3px}
.c1-card:hover .c1-card__go{border-bottom-color:var(--white)}

.c1-reel__frame{position:relative}
.c1-reel__video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ground)}
.c1-reel__play[hidden]{display:none}
.c1 .c1-reel__play{background:rgba(17,17,16,.42);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.c1 .c1-reel__play:hover{background:rgba(17,17,16,.30)}
.c1-reel__play i{background:rgba(17,17,16,.35);backdrop-filter:blur(2px)}


/* home page portrait, replacing the old placeholder box */
.c1-portrait{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--well);
  aspect-ratio:1/1}
.c1-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;
  filter:saturate(.96) brightness(.96);transition:filter .4s ease}
.c1-portrait:hover img{filter:saturate(1) brightness(1)}
@media (max-width:1024px){
  .c1-portrait{aspect-ratio:3/2;max-width:460px}
  .c1-portrait img{object-position:50% 16%}
}
@media (max-width:767px){
  .c1-portrait{aspect-ratio:4/5;max-width:260px}
  .c1-portrait img{object-position:50% 12%}
}

/* contact form: the honeypot a human never sees, and error notices */
.ct-hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
.cs .ct-warn{margin-top:30px;border-left:3px solid #B08A4E;background:rgba(176,138,78,.09);
  padding:16px 20px;font-size:15.5px;color:#DCD6C6;max-width:62ch}
.cs a.ct-done__again{display:inline-block;text-decoration:none}

/* ---------- CalState motion section ----------
   These rules existed only in the published prototype and were missing
   from the extracted stylesheet, which let the videos render at their
   intrinsic width and push the page sideways on tablet and phone. */
.cs-motion{padding:76px 0 84px;background:var(--panel)}
.cs-motion h2{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.15;color:var(--white);margin:20px 0 0;max-width:24ch}
.cs .cs-motion__d{margin-top:20px;font-size:17px;color:#C0C0BA;max-width:58ch;line-height:1.5}

.cs-motion__wide{margin:44px 0 0}
.cs-motion__wide video{display:block;width:100%;height:auto;max-width:100%;
  aspect-ratio:16/9;background:var(--well);border:1px solid var(--line)}
.cs-motion__wide figcaption{margin-top:14px;display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.cs .cs-motion__wide figcaption p{font-size:14.5px;color:#C0C0BA;max-width:58ch;line-height:1.5}

.cs-motion__row{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:44px;align-items:center;margin-top:56px;
  border-top:1px solid var(--line);padding-top:48px}
.cs-motion__sq{min-width:0}
.cs .cs-sqvid{display:block;width:100%;height:auto;max-width:100%;
  aspect-ratio:1/1;object-fit:cover;background:var(--well);border:1px solid var(--line)}
.cs-motion__txt{min-width:0}
.cs .cs-motion__txt p:not(.lab){margin-top:12px;font-size:16px;color:#C0C0BA;
  max-width:50ch;line-height:1.5}

@media (max-width:1024px){
  .cs-motion{padding:56px 0 62px}
  .cs-motion__row{grid-template-columns:1fr;gap:26px;margin-top:40px;padding-top:36px}
  .cs-motion__sq{max-width:420px}
}
@media (max-width:767px){
  .cs-motion{padding:44px 0 50px}
  .cs-motion__wide{margin-top:30px}
  .cs-motion__sq{max-width:none}
}