/* Turnover Crew site styles v2. Tokens from shared/projects/turnover-crew/_brand.json (v2, 2026-09-19).
   Layout reference: locked with Jordan 2026-09-19 (dark ground, accent word, estimate card, photo tiles). */
:root{
  --deep:#14303A;--deep-2:#1C3F4B;--deep-3:#25505D;--white:#FFFFFF;--mist:#EAF6F5;--mist-2:#D6EEEC;
  --ink:#14303A;--ink-soft:#4A5C63;--aqua:#3FB9A6;--aqua-deep:#2A9B8A;--aqua-soft:#A8E3DA;
  --on-dark:rgba(255,255,255,.82);--line-dark:rgba(255,255,255,.12);
  --display:'Gabarito','Hanken Grotesk',sans-serif;--body:'Hanken Grotesk',-apple-system,sans-serif;
  --maxw:1160px;--r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--deep);color:var(--white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 520px at 50% -120px,rgba(63,185,166,.22),transparent 70%)}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.8vw,4.3rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:.8rem}
h3{font-size:1.2rem;margin-bottom:.4rem}
.acc{color:var(--aqua)}
p{color:var(--on-dark);margin-bottom:1rem;max-width:62ch}
.lead{font-size:clamp(1.05rem,1.7vw,1.2rem)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}
.btn{display:inline-block;background:var(--aqua);color:var(--deep);text-decoration:none;font-weight:700;padding:.9rem 1.6rem;border-radius:999px;border:0;font-size:1rem;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;font-family:var(--body);box-shadow:0 8px 24px -10px rgba(63,185,166,.7)}
.btn:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.btn:hover{background:var(--aqua-deep);transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(63,185,166,.8)}
.btn.ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.block{display:block;width:100%;text-align:center}
.pill{display:inline-block;font-size:.8rem;font-weight:600;color:var(--aqua-soft);background:rgba(63,185,166,.12);border:1px solid rgba(63,185,166,.35);border-radius:999px;padding:.35rem 1rem;margin-bottom:1.3rem}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(20,48,58,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:70px}
.wordmark{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--white);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.wordmark em{font-style:normal;color:var(--aqua)}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{color:var(--on-dark);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--white)}
.hdr-right{display:flex;align-items:center;gap:.8rem}
.hdr-phone{color:var(--white);text-decoration:none;font-weight:600;font-size:.95rem;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:.55rem 1rem}
@media(max-width:900px){.nav{display:none}}
@media(max-width:640px){.hdr-phone{display:none}.hdr .btn{padding:.6rem 1rem;font-size:.9rem}}

/* hero */
.hero{position:relative;padding:clamp(2.5rem,6vw,4.5rem) 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:230px 1fr 230px;gap:1.2rem;align-items:center}
.tiles{display:grid;gap:1.1rem}
.tiles img{width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:18px;box-shadow:0 24px 50px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.tiles.left img:first-child{transform:rotate(-3deg)}.tiles.left img:last-child{transform:rotate(2deg) translateX(10px)}
.tiles.right img:first-child{transform:rotate(3deg)}.tiles.right img:last-child{transform:rotate(-2deg) translateX(-10px)}
.tiles.left{justify-items:start}.tiles.right{justify-items:end}
.tiles.left img:nth-child(2),.tiles.right img:nth-child(1){width:84%}
.hero-copy{text-align:center;padding:0 .5rem}
.hero-copy h1{color:var(--white);margin-bottom:1rem}
.hero-copy .lead{max-width:54ch;margin:0 auto 1.4rem;color:rgba(255,255,255,.9)}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;margin:0 0 .5rem;padding:0}
.hero-points li{font-size:.92rem;color:var(--on-dark);position:relative;padding-left:1.2rem}
.hero-points li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--aqua)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr;order:2;margin-top:1.5rem}.tiles.right{display:none}.tiles.left img{width:100%!important}}

/* estimate card */
.est{margin:2.4rem auto 0;max-width:1000px;background:var(--white);color:var(--ink);border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.est-tabs{display:flex;border-bottom:1px solid var(--mist-2)}
.est-tabs button{flex:1;background:var(--mist);border:0;font:inherit;font-weight:600;padding:1.05rem;color:var(--ink-soft);cursor:pointer;border-bottom:3px solid transparent;transition:background .2s}
.est-tabs button.on{color:var(--ink);background:var(--white);border-bottom-color:var(--aqua)}
.est form{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:0;align-items:stretch}
.est .f{padding:1.05rem 1.2rem;border-right:1px solid var(--mist-2)}
.est .f label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem}
.est input,.est select{width:100%;font:inherit;font-size:1.05rem;font-weight:500;border:0;outline:0;background:transparent;color:var(--ink);padding:.15rem 0}
.est .f:focus-within{background:var(--mist)}
.est input::placeholder{color:#8a979c}
.est .go{padding:.75rem 1rem;display:flex;align-items:center}
.est .go .btn{padding:1rem 1.7rem}
.est .go .btn{white-space:nowrap}
.est .hidden{display:none}
.est .qmsg{grid-column:1/-1;padding:.7rem 1.1rem;font-size:.92rem;display:none}
.est .qmsg.err{display:block;background:#FFF3E0;color:#7a4a00}
.est .fine{grid-column:1/-1;padding:.6rem 1.1rem .9rem;font-size:.8rem;color:var(--ink-soft);margin:0}
@media(max-width:860px){.est form{grid-template-columns:1fr 1fr}.est .f{border-right:0;border-bottom:1px solid var(--mist-2)}.est .go{grid-column:1/-1}.est .go .btn{width:100%;text-align:center}}
.areas-line{text-align:center;font-size:.9rem;color:var(--on-dark);margin:1.2rem 0 0}
.areas-line b{color:var(--white);font-weight:600}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* sections */
section{padding:clamp(3.5rem,7vw,5.5rem) 0}
section.light{background:linear-gradient(180deg,#EEF8F6,var(--mist));color:var(--ink)}
section.light h2,section.light h3{color:var(--ink)}
section.light p{color:var(--ink-soft)}
section.light .acc{color:var(--aqua-deep)}
.tickcard{background:linear-gradient(160deg,var(--deep-2),#183945);border-radius:22px;padding:clamp(1.6rem,3.5vw,2.6rem);border:1px solid rgba(63,185,166,.18)}
.tickcard h3{font-size:1.35rem;margin-bottom:1.2rem;color:var(--white)}
.ticks{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem 1.6rem;padding:0}
.ticks li{position:relative;padding-left:2.1rem;font-size:.97rem;color:var(--on-dark)}
.ticks li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:rgba(63,185,166,.18)}
.ticks li::after{content:"";position:absolute;left:7px;top:.42em;width:9px;height:5px;border-left:2.5px solid var(--aqua);border-bottom:2.5px solid var(--aqua);transform:rotate(-45deg)}
@media(max-width:860px){.ticks{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.stat{background:linear-gradient(160deg,var(--deep-3),var(--deep-2));border-radius:20px;padding:1.8rem 1.4rem;text-align:center;border:1px solid rgba(63,185,166,.18)}
.stat .n{font-family:var(--display);font-size:2.8rem;font-weight:800;color:var(--white);line-height:1;letter-spacing:-.03em}
.stat .n span{color:var(--aqua)}
.stat p{margin:.6rem 0 0;font-size:.95rem;max-width:none}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split.rev>div:first-child{order:2}
.split img{width:100%;aspect-ratio:1.1;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.6rem;margin-top:1.2rem}
.feat .ic{width:40px;height:40px;border-radius:50%;background:rgba(63,185,166,.16);border:1px solid rgba(63,185,166,.4);display:flex;align-items:center;justify-content:center;margin-bottom:.6rem;color:var(--aqua);font-weight:800;font-family:var(--display);font-size:1rem}
section.light .feat .ic{background:rgba(42,155,138,.12);color:var(--aqua-deep)}
.feat b{display:block;color:var(--white);margin-bottom:.2rem}
.feat p{font-size:.92rem;margin:0}
section.light .feat b{color:var(--ink)}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev>div:first-child{order:0}.feats{grid-template-columns:1fr}}

/* pricing on light */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.lcard{background:var(--white);border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--mist-2);box-shadow:0 20px 40px -30px rgba(20,48,58,.35)}
.price-table{width:100%;border-collapse:collapse;font-size:.97rem}
.price-table th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:.5rem 0;border-bottom:1px solid var(--mist-2)}
.price-table td{padding:.75rem 0;border-bottom:1px solid var(--mist);color:var(--ink-soft);vertical-align:top}
.price-table td:first-child{color:var(--ink);font-weight:600}
.price-table .amt{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--aqua-deep);white-space:nowrap}
.addon{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--mist)}
.addon:last-child{border-bottom:0}
.addon b{display:block;color:var(--ink)}
.addon small{color:var(--ink-soft);font-size:.9rem}
.addon .amt{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--aqua-deep);white-space:nowrap}
.note{font-size:.9rem;color:var(--ink-soft);margin-top:1rem}
@media(max-width:860px){.cards2{grid-template-columns:1fr}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.5rem}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,rgba(63,185,166,.6),rgba(63,185,166,.15))}
.step{position:relative;padding-top:1.4rem}
.step::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--deep);border:3px solid var(--aqua);box-shadow:0 0 0 4px var(--deep)}
.step .k{font-family:var(--display);font-weight:800;color:var(--aqua);margin-bottom:.3rem}
.step b{display:block;color:var(--white);margin-bottom:.3rem}
.step p{font-size:.92rem;margin:0}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* area cards */
.acards{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.5rem}
.acards.three{grid-template-columns:repeat(3,1fr);margin-top:1rem}
.acards.three .acard img{aspect-ratio:2.4}
.acard{position:relative;background:var(--deep-2);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--white);display:block;transition:transform .25s,box-shadow .25s;box-shadow:0 20px 40px -28px rgba(0,0,0,.8)}
.acard:hover{transform:translateY(-3px)}
.acard img{width:100%;aspect-ratio:1.05;object-fit:cover;transition:transform .6s}
.acard:hover img{transform:scale(1.05)}
.acard div{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .9rem;background:linear-gradient(0deg,rgba(14,36,44,.95),rgba(14,36,44,0))}
.acard b{display:block;font-family:var(--display)}
.acard small{color:var(--on-dark);font-size:.85rem}
@media(max-width:960px){.acards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.acards{grid-template-columns:1fr 1fr}}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{background:var(--white);border-radius:14px;padding:1.05rem 1.3rem;margin-bottom:.7rem;border:1px solid var(--mist-2);transition:box-shadow .2s}
.faq details[open]{box-shadow:0 16px 30px -24px rgba(20,48,58,.4)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.05rem;margin:0;color:var(--ink)}
.faq summary::after{content:"+";color:var(--aqua-deep);font-size:1.4rem;font-weight:700;flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.6rem 0 0;font-size:.95rem;color:var(--ink-soft);max-width:none}

/* closing form */
.close-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.qcard{background:var(--white);color:var(--ink);border-radius:22px;padding:1.8rem;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.qcard h3{color:var(--ink);font-size:1.3rem}
.qcard .qsub{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.qform .full{grid-column:1/-1}
.qform label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem}
.qform input,.qform select,.qform textarea{width:100%;font:inherit;font-size:.98rem;padding:.8rem .9rem;border:1px solid var(--mist-2);border-radius:10px;background:var(--mist);color:var(--ink);transition:border-color .2s,background .2s}
.qform input:hover,.qform select:hover,.qform textarea:hover{border-color:var(--aqua-soft)}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid var(--aqua);border-color:var(--aqua)}
.qform textarea{min-height:76px;resize:vertical}
.qform .fine{font-size:.8rem;color:var(--ink-soft);grid-column:1/-1;margin:0}
.qmsg{display:none;grid-column:1/-1;padding:.9rem 1rem;border-radius:10px;font-size:.95rem}
.qmsg.err{display:block;background:#FFF3E0;color:#7a4a00}
@media(max-width:860px){.close-grid{grid-template-columns:1fr}}
@media(max-width:520px){.qform{grid-template-columns:1fr}}

/* footer */
footer{background:#0E242C;color:var(--on-dark);padding:3rem 0 5.5rem;font-size:.92rem}
footer .fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;margin-top:1.2rem}
footer a{color:var(--white);text-decoration:none}
footer a:hover{color:var(--aqua)}
footer ul{list-style:none;display:grid;gap:.35rem;padding:0}
footer .fk{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:.6rem;font-weight:700}
footer .fine{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:2rem;max-width:none}
@media(max-width:760px){footer .fgrid{grid-template-columns:1fr}}

/* sticky call bar */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--aqua);padding:.75rem 1rem;box-shadow:0 -6px 20px rgba(0,0,0,.3)}
.callbar a{color:var(--deep);text-decoration:none;font-weight:800;display:flex;justify-content:center;gap:.6rem;align-items:center}
@media(max-width:760px){.callbar{display:block}}

.reveal{opacity:1;transform:none}
.hero-copy,.est{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.est{animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-copy,.est{animation:none}.acard img,.btn{transition:none}}

/* points of difference */
.touch{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2rem;position:relative}
.touch::before{content:"";position:absolute;left:2%;right:2%;top:14px;height:2px;background:linear-gradient(90deg,var(--aqua),rgba(63,185,166,.25))}
.tp{position:relative;padding-top:2.2rem}
.tp::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:var(--white);border:3px solid var(--aqua);box-shadow:0 0 0 4px var(--mist)}
.tp .tk{font-size:.78rem;font-weight:700;color:var(--aqua-deep);margin-bottom:.25rem}
.tp b{display:block;color:var(--ink);font-family:var(--display);font-size:1.1rem;margin-bottom:.3rem}
.tp p{font-size:.9rem;margin:0;max-width:none}
.pod{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.podi{background:var(--white);border:1px solid var(--mist-2);border-radius:18px;padding:1.4rem 1.5rem;box-shadow:0 20px 40px -32px rgba(20,48,58,.4)}
.podi b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--ink);margin-bottom:.35rem}
.podi p{font-size:.93rem;margin:0;max-width:none}
@media(max-width:960px){.touch{grid-template-columns:1fr 1fr}.touch::before{display:none}.pod{grid-template-columns:1fr}}
@media(max-width:520px){.touch{grid-template-columns:1fr}}

/* who we work with */
.who{list-style:none;padding:0;margin:1.4rem auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.who li{font-size:.85rem;color:var(--on-dark);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.35rem .9rem;background:rgba(255,255,255,.04)}

/* 12-photo report */
.report{margin-top:2.4rem;background:var(--white);border:1px solid var(--mist-2);border-radius:18px;padding:1.4rem 1.5rem;box-shadow:0 20px 40px -32px rgba(20,48,58,.4)}
.rhead{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.9rem}
.rhead b{font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.rhead span{font-size:.92rem;color:var(--ink-soft)}
.shots{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem .9rem;counter-reset:shot}
.shots li{counter-increment:shot;position:relative;padding-left:2rem;font-size:.92rem;color:var(--ink)}
.shots li::before{content:counter(shot);position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;background:var(--aqua);color:var(--deep);font-family:var(--display);font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center}
@media(max-width:860px){.shots{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shots{grid-template-columns:1fr}}