/* Electrician by Ram — "The Wall Plate". Dela Gothic One / Hind Madurai. Scale 1.25. */
@font-face{font-family:"Dela Gothic One";src:url(../fonts/dela.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Hind Madurai";src:url(../fonts/hind.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hind Madurai";src:url(../fonts/hind600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--navy:#14213D;--yel:#FFD60A;--white:#fff;--wall:#F2F3F5;--h:"Dela Gothic One",Impact,sans-serif;--b:"Hind Madurai",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--navy);font:400 1.125rem/1.6 var(--b)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.ph{white-space:nowrap}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 6px var(--yel)}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:12px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:var(--h);font-weight:400;line-height:1.1;margin:0}
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #D9DCE3}
.top-in{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);font:400 1.125rem/1 var(--h);min-height:44px}
.brand-plate{width:22px;height:30px;border:2px solid var(--navy);border-radius:4px;background:linear-gradient(var(--yel),var(--yel)) center/6px 12px no-repeat}
.nav{margin-left:auto;display:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 .8rem;font-weight:600;text-decoration:none}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--yel);text-decoration-thickness:4px}
@media (min-width:760px){.nav{display:flex}}
/* hero */
.hero{background:var(--wall);padding:2.5rem 0 3.5rem;border-bottom:1px solid #D9DCE3}
.hero-in{display:grid;gap:2rem;justify-items:center}
@media (min-width:900px){.hero-in{grid-template-columns:auto 1fr auto;align-items:center;justify-items:start;gap:3rem}.hero{padding:4.5rem 0}}
.plate{position:relative;width:min(300px,78vw);aspect-ratio:3/4.6;background:linear-gradient(160deg,#fff,#EDEEF1);border-radius:22px;box-shadow:0 1px 0 #fff inset,0 18px 40px rgba(20,33,61,.18),0 2px 0 #C9CDD6;display:grid;place-items:center}
.screw{position:absolute;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#C9CDD6 31% 100%);box-shadow:inset 0 0 0 1px #9AA1AE}
.screw::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;background:#7E8696;transform:rotate(-30deg)}
.s1{top:18px}.s2{bottom:18px}
.plate-face{text-align:center}
.by{margin:0;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.875rem}
.plate h1{font-size:clamp(4rem,16vw,6.1rem);line-height:1;letter-spacing:-.02em}
.slots{display:inline-flex;gap:14px;margin-top:1rem;align-items:center}
.slots i{width:9px;height:30px;border-radius:3px;background:var(--navy)}
.slots b{position:absolute;margin-top:60px;left:50%;margin-left:-9px;width:18px;height:14px;border-radius:9px 9px 2px 2px;background:var(--navy)}
.slots{position:relative}
.kicker{margin:0 0 .5rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.875rem}
.lede{font-size:1.375rem;line-height:1.45;max-width:30ch;margin:0 0 1.5rem}
.hero-copy{max-width:520px}
/* the call switch */
.switch{display:inline-flex;align-items:center;gap:.9rem;min-height:60px;padding:.4rem 1.4rem .4rem .5rem;background:var(--navy);color:#fff;border-radius:14px;font:400 1.25rem/1 var(--h);text-decoration:none}
.toggle{position:relative;width:34px;height:48px;border-radius:8px;background:#2A3A5E;box-shadow:inset 0 0 0 2px #3C4D74}
.toggle::after{content:"";position:absolute;left:5px;right:5px;top:5px;height:20px;border-radius:5px;background:#8E9AB5;transition:top .18s,background .18s}
.switch:hover .toggle::after,.switch:focus-visible .toggle::after,.on .switch .toggle::after{top:23px;background:var(--yel)}
.switch:hover,.switch:focus-visible{box-shadow:0 0 0 4px var(--yel)}
.hero-photo{margin:0;width:min(300px,60vw)}
.hero-photo img{border-radius:12px;border:8px solid #fff;box-shadow:0 10px 24px rgba(20,33,61,.15)}
.hero-photo figcaption{font-size:.9375rem;margin-top:.5rem}
/* switch plates */
section{padding:3.5rem 0}
.sec-h{font-size:clamp(1.95rem,5.5vw,3.05rem);margin-bottom:2rem}
.row{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
@media (min-width:640px){.row{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.row{grid-template-columns:repeat(4,1fr)}}
.sp{background:linear-gradient(160deg,#fff,#F1F2F5);border:1px solid #D9DCE3;border-radius:18px;padding:1.5rem;box-shadow:0 8px 20px rgba(20,33,61,.08)}
.gang{display:flex;gap:10px;height:58px;margin-bottom:1rem}
.gang i{width:26px;border-radius:5px;background:var(--navy);position:relative}
.gang i::after{content:"";position:absolute;left:4px;right:4px;top:4px;height:22px;border-radius:3px;background:var(--yel)}
.gang.dim i{width:46px;border-radius:50%;height:46px;margin-top:6px}
.gang.dim i::after{left:19px;right:auto;width:8px;height:18px;top:4px}
.sp h3{font-size:1.5625rem;margin-bottom:.5rem}
.sp p{margin:0}
.work{background:var(--navy);color:#fff}
.work .sec-h{color:#fff}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{display:flex;gap:1rem;align-items:flex-start}
.steps p{margin:0}
.n{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yel);color:var(--navy);font:400 1.25rem/1 var(--h)}
.quotes{display:grid;gap:1.5rem}
@media (min-width:900px){.quotes{grid-template-columns:1fr 1.3fr}}
.q{margin:0;padding:1.75rem;border-left:10px solid var(--yel);background:var(--wall);border-radius:0 18px 18px 0}
.q blockquote{margin:0;font-size:1.25rem}.q p{margin:0}
.q figcaption{margin-top:1rem;font-weight:600}
.callout{background:var(--yel)}
.callout h2{font-size:clamp(1.95rem,6vw,3.8rem)}
.callout p{font-size:1.25rem;margin:.75rem 0 1.5rem}
.foot{padding:2rem 0 7rem;font-size:.9375rem}
@media (min-width:760px){.foot{padding-bottom:2rem}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px;background:#fff;border-top:1px solid #D9DCE3}
.bar a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:52px;border-radius:12px;background:var(--navy);color:#fff;font:400 1.125rem/1 var(--h);text-decoration:none;box-shadow:inset 0 -5px 0 var(--yel)}
@media (min-width:760px){.bar{display:none}}