/* Rick Schettino — shared stylesheet for all pages */
:root{
  --gold:oklch(0.80 0.12 78);--gold-hi:oklch(0.85 0.11 78);--gold-deep:oklch(0.70 0.12 78);
  --bg:#000;--bg-soft:#080603;--panel:#14120e;--card:#12100c;--field:#2a2620;
  --border:#3d382e;--border-soft:#2e2a22;--border-input:#3a352b;
  --ink:#fff;--ink-warm:#f6f2ea;--muted:#cfc8ba;--faint:#8f887a;--line:rgba(255,255,255,.08);
  --font:'Instrument Sans',Helvetica,Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --side:64px;
}
@media (max-width:699px){:root{--side:32px}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink-warm);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}
summary::-webkit-details-marker{display:none}
[id]{scroll-margin-top:80px}
[hidden]{display:none!important}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--side);padding-right:var(--side)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.btn-solid{background:var(--gold);color:#14120e;border:0;font-size:17px;padding:15px 26px;border-radius:10px}
.btn-solid:hover{background:var(--gold-hi);color:#14120e}
.btn-solid.small{font-size:15px;padding:10px 18px;border-radius:8px}
.btn-outline{background:#000;color:#fff;border:1.5px solid #fff;font-size:17px;padding:14px 24px;border-radius:10px}
.btn-outline:hover{background:#fff;color:#000}
.btn-pill{background:transparent;color:#fff;border:1.5px solid var(--gold);font-size:17px;line-height:1.2;padding:8px 32px;border-radius:999px;min-width:220px}
.btn-pill:hover{background:oklch(0.80 0.12 78 / .12);color:#fff}
.btn:disabled{opacity:.7;cursor:default}

/* ---------- Shared header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid var(--line)}
.site-header .bar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1.2;color:var(--ink-warm);white-space:nowrap}
.nav{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;gap:28px;font-size:15px;color:#fff;white-space:nowrap}
.nav-links a[aria-current="page"],.mobile-panel a[aria-current="page"]{color:var(--gold)}
.menu-btn{display:none;width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.site-header.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.menu-open .menu-btn span:nth-child(2){opacity:0}
.site-header.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-panel{display:none;position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -16px rgba(0,0,0,.6)}
.mobile-panel nav{padding:8px 24px 28px;display:flex;flex-direction:column}
.mobile-panel a{padding:14px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink-warm)}
.mobile-panel a.btn-solid{margin-top:24px;border:0;padding:15px 20px;color:#14120e}
@media (max-width:999px){
  .nav{display:none}
  .menu-btn{display:flex}
  .site-header.menu-open .mobile-panel{display:block}
}

/* ---------- Shared footer ---------- */
.site-footer{background:#000;border-top:1px solid var(--line)}
.site-footer .links{background:var(--bg-soft);border-bottom:1px solid var(--gold)}
.site-footer .links nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;padding-top:18px;padding-bottom:18px;font-size:15px;color:var(--ink-warm)}
.site-footer .meta{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:28px;padding-bottom:32px;text-align:center}
.site-footer .reach{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:15px;color:#fff}
.site-footer .reach .tel{letter-spacing:.06em}
.site-footer .copy{font-size:14px;color:var(--faint)}

/* ---------- Section building blocks ---------- */
.rule{max-width:1200px;margin:0 auto;padding:0 var(--side)}
.rule::before{content:"";display:block;height:1px;background:var(--gold)}
.sec{padding-top:64px;padding-bottom:64px}
.sec-56{padding-top:56px;padding-bottom:56px}
.sec-48{padding-top:48px;padding-bottom:48px}
@media (max-width:699px){.sec,.sec-56,.sec-48{padding-top:32px}.sec-48{padding-bottom:32px}}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px 56px;align-items:center}
.stack{display:flex;flex-direction:column;gap:20px;max-width:520px}
.stack.tight{gap:14px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.h2{margin:0;font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.025em;font-weight:600;text-wrap:balance;color:#fff}
.h2.compact{font-size:clamp(34px,3.6vw,38px)}
.lede{margin:0;font-size:26px;line-height:1.4;color:var(--gold);font-weight:500;text-wrap:pretty}
.body{margin:0;font-size:20px;line-height:1.6;color:#fff;text-wrap:pretty}
.body b,.body strong{color:#fff}
.cta-row{display:flex;margin-top:8px}
.list-title{font-size:26px;font-weight:600;color:var(--gold)}
.steps{margin:0;padding:0 0 4px;list-style:none;display:flex;flex-direction:column;gap:14px;line-height:1.5;color:#fff}
.steps li{display:flex;gap:16px;align-items:baseline}
.steps .num{flex:none;font-family:var(--mono);font-size:12px;color:var(--gold)}
.steps .txt{text-wrap:pretty;font-size:20px}
.steps strong{color:#fff;font-weight:600}
.lg-flex{display:flex}.sm-flex{display:none}.lg-block{display:block}.sm-block{display:none}
@media (max-width:699px){
  .lg-flex,.lg-block{display:none}.sm-flex{display:flex}.sm-block{display:block}
  .cta-row,.cta-center-sm{justify-content:center}
}

/* ---------- Accordion (FAQ / case studies) ---------- */
.qa{flex:1 1 240px;display:flex;flex-direction:column;gap:20px}
.qa-layout{display:flex;flex-wrap:wrap;gap:48px 56px;align-items:flex-start}
@media (min-width:1000px){.qa.sticky{position:sticky;top:140px}}
.acc{flex:2 1 440px;min-width:0;display:flex;flex-direction:column}
.acc details{border-bottom:1px solid rgba(255,255,255,.15)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;font-size:22px;font-weight:600;letter-spacing:-.01em;color:#fff}
.acc summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--gold)}
.acc .ans{padding:0 0 28px;display:flex;flex-direction:column;gap:14px;font-size:20px;line-height:1.6;color:#fff;max-width:680px}
.acc .ans p{margin:0;text-wrap:pretty}
.acc .ans strong{color:#fff;font-weight:600}
.acc.cases{border-top:1.5px solid #fff}
.acc.cases details{border-bottom-color:#3a352c}
.acc.cases summary{font-size:26px}
.acc.cases .ans{font-size:18px}
.acc .cite{color:#fff;font-weight:600;font-size:17px}
.note{margin:0;line-height:1.6;color:var(--gold);text-wrap:pretty;font-size:26px}

/* ---------- Contact block + forms ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px 56px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:20px;max-width:460px}
.contact-info h2{margin:0;font-size:48px;line-height:1.08;letter-spacing:-.025em;font-weight:600;color:#fff;text-wrap:balance}
.contact-info h2.compact{font-size:38px;line-height:1.1}
.contact-info .intro{margin:0;font-size:20px;line-height:1.6;color:var(--gold);text-wrap:pretty}
.contact-lines{display:flex;flex-direction:column;gap:8px;font-size:20px;margin-top:8px}
.contact-lines a{color:#fff}
.contact-lines .tel{letter-spacing:.06em}
.contact-lines .ul{text-decoration:underline;text-underline-offset:.15em}
.form{min-width:0;background:var(--field);border:1px solid var(--border);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:18px}
.form .row{display:flex;flex-wrap:wrap;gap:18px}
.form .row label{flex:1 1 200px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#fff}
.field{background:var(--panel);border:1px solid var(--border-input);border-radius:8px;padding:13px 14px;font:inherit;font-size:16px;font-weight:400;color:var(--ink-warm);outline:none}
.field:focus{border-color:var(--gold)}
textarea.field{resize:vertical;line-height:1.5}
.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:4px}
.form-msg{font-size:15px;color:var(--gold)}
.form-msg.err{color:#e8a598}
@media (max-width:699px){.form-actions{justify-content:center}}
/* Plain variant (home page) */
.form.plain{background:none;border:0;border-radius:0;padding:0}
.form.plain label{font-size:15px;font-weight:600}
.form.plain .field{font-size:17px;padding:14px 16px;border-color:var(--border);border-radius:10px;color:#fff}
.form.plain .field:focus{box-shadow:0 0 0 3px oklch(0.80 0.12 78 / .35)}
.form .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px}
.sent-box{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:10px}
.sent-box .t{font-size:26px;font-weight:600}
.sent-box p{margin:0;font-size:18px;line-height:1.6;color:var(--muted)}

/* ---------- Hero overlay lines (shared by /ai and /creative) ---------- */
.hero-lines{position:absolute;inset:0;pointer-events:none}
.hero-lines div{position:absolute;transform:translateY(-50%);line-height:1;white-space:nowrap;color:rgba(255,255,255,.85);font-weight:400;letter-spacing:-.005em}

/* ================= HOME ================= */
.home{min-height:calc(100vh - 73px);display:flex;flex-direction:column;background:var(--bg-soft)}
.home-hero{flex:1;width:100%;padding-top:clamp(28px,4vw,48px);padding-bottom:40px;display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px)}
.home-hero h1{margin:0;font-size:clamp(15px,4.6vw,60px);white-space:nowrap;line-height:1.1;letter-spacing:-.035em;font-weight:600;color:#fff;text-align:center}
.home-hero h1 br{display:none}
.home-panel{border:1px solid var(--gold);border-radius:24px;background:#0f0d0a;padding:clamp(20px,3vw,32px) clamp(24px,4vw,48px) clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:24px}
.home-choose{margin:0;font-size:clamp(28px,2.8vw,36px);line-height:1.1;letter-spacing:-.025em;color:var(--gold);font-weight:600;text-wrap:balance;text-align:center}
.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.home-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid #2a261f;border-radius:16px;overflow:hidden;color:var(--ink-warm);transition:transform .2s,border-color .2s,box-shadow .2s}
.home-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 24px 48px -20px rgba(0,0,0,.8);color:var(--ink-warm)}
.home-card .in{flex:1;padding:32px;display:flex;flex-direction:column;gap:14px}
.home-card h2{margin:0;font-size:clamp(28px,2.8vw,36px);line-height:1.1;letter-spacing:-.025em;font-weight:600;text-wrap:balance;color:#fff;text-align:center}
.home-card p{margin:0;font-size:19px;line-height:1.55;color:var(--muted);text-wrap:pretty;text-align:center}
.home-card .go{margin-top:auto;padding-top:16px;display:flex;justify-content:center}
.home-contact{background:#000;color:#fff;border-top:1px solid var(--line)}
.home-contact .inner{max-width:640px;margin:0 auto;padding:clamp(40px,4vw,48px) 24px clamp(56px,7vw,88px);display:flex;flex-direction:column;gap:40px}
.home-contact .head{display:flex;flex-direction:column;gap:14px;max-width:520px;width:100%;margin:0 auto;text-align:center}
.home-contact .head p{margin:0;font-size:18px;line-height:1.6;color:var(--muted);text-wrap:pretty}
@media (max-width:699px){
  .home-hero{padding-top:14px;padding-bottom:28px}
  .home-hero h1{font-size:24px;color:var(--gold)}
  .home-hero h1 br{display:inline}
  .home-choose,.home-card p{display:none}
  .home-card{background:transparent;border-color:transparent}
  .home-card .in{padding:4px 0}
  .home-card h2{font-size:24px}
}

/* ================= AI ASSISTANTS ================= */
.ai-hero-media{max-width:1200px;margin:0 auto;padding:0 64px}
.ai-hero-frame{position:relative;container-type:inline-size;border-radius:0 0 16px 16px;overflow:hidden}
.ai-hero-frame img{display:block;width:100%;height:auto}
.ai-lines-lg div{left:11%;font-size:2.2cqw}
.ai-lines-sm{display:none}
.ai-lines-sm div{left:42px;font-size:13px}
.ai-hero-copy{padding-top:32px;padding-bottom:64px}
.ai-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px 56px;align-items:start}
.ai-hero-grid h1{margin:0;font-size:clamp(44px,5.4vw,72px);line-height:1;letter-spacing:-.035em;font-weight:600;text-wrap:balance;color:#fff;text-align:right}
.ai-hero-grid h1 em{font-style:normal;text-decoration:underline .06em;text-underline-offset:.12em}
.ai-hero-side{display:flex;flex-direction:column;gap:16px;max-width:460px}
.ai-hero-side .big{margin:0;font-size:clamp(29px,3.6vw,48px);line-height:1.2;color:var(--gold);font-weight:600}
.ai-hero-side .sub{margin:0;font-size:clamp(19px,1.95vw,26px);line-height:1.6;color:#fff;text-wrap:pretty;font-weight:500}
.phone-rot{position:relative;width:100%;max-width:316px;justify-self:center;margin:-24px auto -40px;left:40px}
.phone-rot .frames{position:relative;aspect-ratio:941/1672}
.phone-rot .frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .8s ease}
.phone-rot .frames img.on{opacity:1}
.rot-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.rot-btn:hover{color:var(--gold)}
.rot-btn.prev{left:-4px}.rot-btn.next{right:-4px}
.roster{display:flex;flex-direction:column;gap:10px;min-width:0}
.roster-head{display:flex;align-items:center;gap:12px;padding:0 4px 6px}
.roster-head .t{font-size:26px;font-weight:600;color:#fff}
.roster-head .t span{font-weight:400;color:var(--muted);font-size:15px}
.roster-head .line{flex:1;height:1px;background:var(--border-soft)}
.roster-head .apps{font-size:26px;white-space:nowrap;color:var(--gold);font-weight:600}
.role{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;background:var(--card);border:1px solid var(--border-soft);border-radius:14px;transition:border-color .2s}
@media (hover:hover) and (min-width:700px){.role:hover{border-color:var(--gold)}}
.role .info{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:4px}
.role .name{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.role .desc{font-size:16px;line-height:1.4;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role .icons{flex:none;display:flex;gap:8px}
.role .icons img{display:block;width:36px;height:36px}
.go-img{display:block;width:min(513px,100%);max-width:none;height:auto;aspect-ratio:513/428;object-fit:cover;object-position:50% 45%;border-radius:16px}
.go-body{max-width:356px}
.ai-faq{padding-top:48px;padding-bottom:112px}
.ai-contact{padding-top:112px;padding-bottom:80px}
@media (max-width:699px){
  .ai-hero-media{padding:0}
  .ai-hero-frame{border-radius:0}
  .ai-lines-lg{display:none}.ai-lines-sm{display:block}
  .ai-hero-grid h1{text-align:center}
  .ai-hero-side{text-align:center;align-items:center;margin:0 auto}
  .phone-rot{max-width:100%;margin:-8px auto -24px;left:0;order:1}
  .roster{order:1}
  .roster-head{gap:8px}
  .roster-head .t,.roster-head .apps{font-size:18px}
  .roster-head .t span{font-size:12px}
  .go-img{width:calc(100% + 64px);margin:0 -32px -64px;aspect-ratio:16/9;border-radius:0;order:1}
  .ai-faq{padding-top:32px;padding-bottom:40px}
  .ai-contact{padding-top:32px;padding-bottom:32px}
}

/* ================= CREATIVE SERVICES ================= */
.cs-hero-media{position:relative;container-type:inline-size;padding:0 max(64px,calc((100vw - 1200px) / 2 + 64px)) 0 max(160px,calc((100vw - 1200px) / 2 + 160px))}
.cs-hero-frame{position:relative;border-radius:0 0 16px 16px;overflow:hidden}
.cs-hero-frame img{display:block;width:100%;height:auto}
.cs-hero-frame .fade{position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 50%,#000 100%)}
.cs-lines-lg div{left:24px;font-size:2cqw;font-weight:500}
.cs-lines-sm{display:none}
.cs-lines-sm div{left:32px;font-size:12px}
.cs-hero-copy{max-width:1200px;margin:-150px auto 0;position:relative;padding-top:20px;padding-bottom:64px}
.cs-hero-row{display:flex;flex-wrap:nowrap;justify-content:center;gap:16px 48px;align-items:flex-start}
.cs-hero-row h1{flex:0 1 440px;min-width:0;margin:0;font-size:clamp(44px,4.7vw,52px);line-height:1.2;letter-spacing:-.035em;font-weight:600;text-wrap:balance;color:#fff;text-align:right}
.cs-hero-side{flex:0 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px;max-width:460px}
.cs-hero-side .big{margin:0;font-size:calc(clamp(28px,3.2vw,38px) + 4px);line-height:1.15;color:var(--gold);font-weight:600}
.cs-hero-side .sub{margin:0;font-size:calc(clamp(17px,1.7vw,22px) - 1px);line-height:1.6;color:#fff;text-wrap:pretty;font-weight:500}
.menu-list .txt{font-size:18px}
.menu-list .txt.light{font-weight:100}
/* agency vs. me diagram */
.dg{--dg:24px;width:min(468px,100%);justify-self:center;display:flex;flex-direction:column;gap:20px}
.dg-box{transition:border-color .2s;border:2px solid transparent;border-radius:12px;box-shadow:0 18px 40px rgba(29,27,23,.22),0 4px 10px rgba(29,27,23,.12);padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.dg-agency{background:#000;color:var(--ink-warm)}
.dg-me{background:var(--panel);color:#fff}
.dg-agency:hover,body.hl-head .dg-agency{border-color:#fff}
.dg-me:hover,body.hl-body .dg-me{border-color:var(--gold)}
.dg-title{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em;padding-bottom:6px}
.dg-me .dg-title{color:var(--gold);padding-bottom:5px}
.dg-chart{display:flex;flex-direction:column;align-items:center;padding:4px 0}
.dg-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--dg);width:100%}
.dg-row.r1{margin-bottom:18px}
.dg-row.r1::before{content:"";position:absolute;top:50%;left:calc((100% - 2 * var(--dg)) / 6);right:calc((100% - 2 * var(--dg)) / 6);height:1.5px;background:rgba(255,255,255,.55)}
.dg-row.r2 .cell{padding:14px 0 18px}
.dg-row.r3 .cell{padding-top:14px}
.dg-row .cell{display:flex;flex-direction:column;align-items:center;min-width:0}
.chip{position:relative;z-index:1;width:100%;padding:5px 6px;white-space:nowrap;border:1px solid #fff;background:#000;border-radius:999px;font-size:12px;line-height:1.15;color:#fff;text-align:center}
.chip.you{background:#fff;color:#000;font-weight:600}
.tri{position:absolute;width:0;height:0}
.tri.at-r{left:100%;top:50%;transform:translateY(-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:6px solid rgba(255,255,255,.75)}
.tri.at-l{right:100%;top:50%;transform:translateY(-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid rgba(255,255,255,.75)}
.hlink{position:absolute;left:100%;top:50%;width:var(--dg);height:1.5px;transform:translateY(-50%);background:rgba(255,255,255,.55)}
.vlink{position:absolute;bottom:100%;left:50%;width:1.5px;height:32px;transform:translateX(-50%);background:rgba(255,255,255,.55)}
.hd-l,.hd-r,.hd-u,.hd-d{position:absolute;width:0;height:0}
.hd-l{left:0;top:50%;transform:translateY(-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:6px solid rgba(255,255,255,.75)}
.hd-r{right:0;top:50%;transform:translateY(-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid rgba(255,255,255,.75)}
.hd-u{top:0;left:50%;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid rgba(255,255,255,.75)}
.hd-d{bottom:0;left:50%;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid rgba(255,255,255,.75)}
.dg-foot{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.dg-foot span:last-child{white-space:nowrap}
.dg-me .dg-foot{color:var(--gold)}
.dg-me .dg-foot span:last-child{font-weight:600}
.dg-flow{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:8px 0}
.dg-flow .p{width:100%;text-align:center;padding:10px 4px;white-space:nowrap;background:#000;border:1.5px solid #fff;color:#fff;border-radius:999px;font-size:15px;font-weight:600;line-height:1}
.dg-flow .p.you{background:#fff;color:#000;border:0;font-size:16px}
.dg-flow .link{position:relative;display:block;height:1.5px;background:rgba(255,255,255,.75)}
/* why-me cycle */
.cycle{width:100%;max-width:380px;justify-self:center;position:relative;aspect-ratio:1;container-type:inline-size}
.cycle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb{position:absolute;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 14px 30px rgba(29,27,23,.20),0 3px 8px rgba(29,27,23,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;text-align:center;padding:0 3.5%}
.orb .n{font-size:8cqw;font-weight:600;line-height:.9;letter-spacing:-.04em}
.orb .l{font-size:clamp(11px,2.8cqw,14px);font-weight:500;line-height:1.2;text-wrap:balance}
.orb.a{left:50%;top:14%;background:var(--panel);color:var(--ink-warm);border:1.5px solid #3a352c}
.orb.a .n{color:var(--gold)}
.orb.b{left:81.18%;top:68%;background:var(--gold);color:#14120e}
.orb.c{left:18.82%;top:68%;background:#e8dfcd;color:#1d1b17}
.cycle .mid{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:30%;display:flex;flex-direction:column;align-items:center;gap:.3em;text-align:center}
.cycle .mid .h{font-size:27px;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--gold);text-wrap:balance}
.cycle .mid .s{font-size:18px;line-height:1.2;color:#fff}
.stars-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:#fff}
.stars-line .stars{display:inline-flex;gap:3px;color:var(--gold);font-size:24px;letter-spacing:0;line-height:1}
.tr-body{width:437px;max-width:100%}
.upwork{position:relative;width:min(380px,100%);justify-self:center;align-self:start;margin-top:35px;border-radius:16px;overflow:hidden;background:#fff}
.upwork img{display:block;width:100%;height:auto}
.upwork .mask{position:absolute;left:76.5%;right:0;top:29%;height:8%;background:#fff}
.upwork .badge{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#14a800;color:#fff;font-weight:700;font-size:clamp(15px,2vw,20px);letter-spacing:-.02em;line-height:1;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.upwork .badge span{font-weight:500;font-size:.75em;letter-spacing:0;opacity:.95}
.upwork .hit{position:absolute;inset:0;z-index:3;cursor:pointer}
.upwork .hit:hover{background:rgba(20,168,0,.06)}
.cases-h2 span{display:block;font-size:38.28px}
.cases-h2 span+span{margin-top:.4em}
.cs-note{line-height:1.4}
@media (max-width:699px){
  .cs-hero-media{padding:0 0 0 48px}
  .cs-hero-frame{border-radius:0 0 0 16px}
  .cs-lines-lg{display:none}.cs-lines-sm{display:block}
  .cs-hero-copy{margin-top:-48px}
  .cs-hero-row{flex-wrap:wrap}
  .cs-hero-row h1{min-width:min(100%,320px);font-size:clamp(36px,4vw,44px);text-align:center}
  .cs-hero-side{min-width:min(100%,320px);text-align:center;align-items:center;margin:0 auto}
  .cs-hero-side .big{font-size:clamp(19px,5.4vw,36px)}
  .cs-hero-side .sub{font-size:clamp(19px,1.95vw,26px)}
  .dg{--dg:10px;width:100%}
  .dg-box{padding:20px 14px}
  .dg-agency{border-color:#fff}
  .dg-me{border-color:var(--gold)}
  .cycle{order:1}
  .upwork{width:100%;margin:8px 0 16px;order:1;border-radius:12px}
}