/*
Theme Name: SubTone Keys
Theme URI: https://subtonellc.com
Author: SUBTONE LLC
Description: One-page studio site for SubTone LLC (Keys direction) with a built-in contact form, plus Privacy and App support pages created on activation.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: subtone-keys
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.wrap{width:min(1180px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.top nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem);flex-wrap:wrap}
.top nav a{text-decoration:none}
.mark{text-decoration:none}
.tags{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.work-list{list-style:none;margin:0;padding:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:.4rem;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;width:100%}
.form textarea{min-height:9rem;resize:vertical}
.form-status{grid-column:1/-1;margin:0;min-height:1.5em}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.doc{max-width:68ch}
@media (max-width:720px){.form{grid-template-columns:1fr}}

:root{--bg:#0B4F6C;--deep:#083B51;--ink:#FFFFFF;--soft:#CFE7F1;--pink:#FF4F8B;--yellow:#FFD23F;--lime:#B8F35A;--sky:#7CC8FF;--orange:#FF9E5E;--lilac:#C9A4FF;--red:#FF5D73;--navy:#0B2A3A}
body{background:var(--bg);color:var(--ink);font:500 1.15rem/1.55 'Fredoka',system-ui,sans-serif}
h1,h2,.mark,.w-name,.steps li::before,.key{font-family:'Rubik Mono One',system-ui,sans-serif;font-weight:400}
h2,h3{letter-spacing:-.01em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.skip{background:var(--yellow);color:var(--navy)}
.top{padding:1.4rem 0}
.mark{font-size:1.1rem}
.top nav a{font-weight:600;color:var(--soft)}.top nav a:hover{color:#fff}
.nav-cta{background:var(--yellow);color:var(--navy)!important;padding:.45rem 1.1rem;border-radius:999px;box-shadow:0 4px 0 #B88E00}
.hero{text-align:center;padding-block:clamp(2.5rem,7vw,5rem) clamp(4rem,8vw,6rem)}
.keys{display:flex;justify-content:center;gap:clamp(6px,1.4vw,18px);margin-bottom:clamp(2rem,5vw,3.5rem)}
.key{width:clamp(40px,10.5vw,160px);aspect-ratio:160/250;border:0;border-radius:clamp(10px,2vw,28px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(8px,2vw,28px) 0 clamp(6px,1.2vw,16px);font-size:clamp(1.6rem,7.5vw,7.4rem);line-height:1;color:var(--bg);box-shadow:0 clamp(6px,1.1vw,16px) 0 rgba(0,0,0,.35);cursor:pointer;transform:translateY(var(--y)) rotate(var(--r));transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.key small{font:600 clamp(.6rem,1.2vw,1.1rem) 'Fredoka',sans-serif;opacity:.7}
.key.hit{transform:translateY(calc(var(--y) + 10px)) rotate(var(--r));box-shadow:0 4px 0 rgba(0,0,0,.35)}
.hero h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 .4rem}
.hero p{color:var(--soft);font-size:clamp(1.1rem,1.8vw,1.35rem);margin:0 auto 2rem;max-width:40ch}
.btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:.9rem 1.6rem;border-radius:999px;font:700 1.1rem 'Fredoka',sans-serif;text-decoration:none;cursor:pointer;border:0;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px)}
.btn-primary{background:var(--yellow);color:var(--navy);box-shadow:0 7px 0 #B88E00}
.btn-primary:active{box-shadow:0 2px 0 #B88E00}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 3px #fff}
section{padding-block:clamp(3.5rem,8vw,6rem)}
h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.05;margin:0 0 2.4rem}
.make{background:var(--deep)}
.make-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
.disc{border-radius:28px;padding:1.8rem;color:var(--navy);box-shadow:0 12px 0 rgba(0,0,0,.3)}
.disc-apps{background:var(--pink);transform:rotate(-2deg)}.disc-experiences{background:var(--lime);transform:rotate(1.5deg)}.disc-media{background:var(--sky);transform:rotate(-1deg)}
.disc h3{font:700 2rem 'Fredoka',sans-serif;margin:0 0 .5rem}
.disc p{margin:0}
.tags li{background:rgba(11,42,58,.14);border-radius:999px;padding:.15rem .75rem;font-size:.92rem;font-weight:600}
.lede{color:var(--soft);max-width:52ch;margin:-1.6rem 0 2.4rem}
.work-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.work-list li{background:#fff;color:var(--navy);border-radius:22px;padding:1.4rem 1.5rem;display:grid;gap:.3rem;box-shadow:0 8px 0 rgba(0,0,0,.25)}
.work-list li:nth-child(1){border-top:10px solid var(--orange)}.work-list li:nth-child(2){border-top:10px solid var(--lilac)}.work-list li:nth-child(3){border-top:10px solid var(--yellow)}.work-list li:nth-child(4){border-top:10px solid var(--red)}
.w-name{font-size:1.3rem}
.w-status{font-size:.9rem;font-weight:700;color:#3B6B80}
.process{background:var(--deep)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:4.2rem;height:5.4rem;border-radius:16px;font-size:2.2rem;color:var(--bg);margin-bottom:1rem;box-shadow:0 8px 0 rgba(0,0,0,.3)}
.steps li:nth-child(1)::before{background:var(--yellow);transform:rotate(-4deg)}.steps li:nth-child(2)::before{background:var(--sky);transform:rotate(3deg)}.steps li:nth-child(3)::before{background:var(--lime);transform:rotate(-2deg)}.steps li:nth-child(4)::before{background:var(--pink);transform:rotate(4deg)}
.steps h3{font:700 1.3rem 'Fredoka',sans-serif;margin:0 0 .3rem}
.steps p{margin:0;color:var(--soft)}
.about{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start}
.about p{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.45;margin:0}
.contact{background:var(--yellow);color:var(--navy);border-radius:36px;margin-inline:clamp(8px,1.5vw,20px)}
.contact .lede{color:var(--navy)}
.form label{font-weight:700}
.form input,.form select,.form textarea{background:#fff;border:3px solid var(--navy);border-radius:16px;padding:.8rem .9rem;color:var(--navy);box-shadow:0 4px 0 var(--navy)}
.contact :focus-visible{outline-color:var(--pink)}
.contact .btn-primary{background:var(--navy);color:#fff;box-shadow:0 7px 0 #000}
.alt{margin-top:2rem}
.form-status{font-weight:700}
.foot{padding:2.4rem 0;color:var(--soft);font-size:.95rem}
.doc{padding-block:3rem 4rem}
.doc h1{font-family:'Fredoka';font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem)}.doc h2{font:700 1.7rem 'Fredoka';margin:2.4rem 0 .6rem}.doc h3{font-size:1.25rem;margin:1.6rem 0 .3rem}
.doc a{color:var(--yellow)}
@media (max-width:900px){.make-grid,.steps{grid-template-columns:1fr 1fr}.work-list,.about{grid-template-columns:1fr}}
@media (max-width:600px){.make-grid,.steps{grid-template-columns:1fr}.top nav a:not(.nav-cta){display:none}}
@media (prefers-reduced-motion:reduce){.key{transform:none!important}}