@font-face{font-family:"Clash Display";src:url("fonts/ClashDisplay-Variable.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
:root{
  --black:#000;--teal:#064343;--teal-2:#0A5050;--teal-3:#043333;
  --cream:#FFFAED;--c80:rgba(255,250,237,.8);--c64:rgba(255,250,237,.64);--c40:rgba(255,250,237,.4);--c22:rgba(255,250,237,.22);--c12:rgba(255,250,237,.12);
  --amber:#F0B357;--amber-2:#FFC774;
  --fog:#EAEBED;--ink:#1B1B1B;--i72:rgba(27,27,27,.74);--i40:rgba(27,27,27,.4);--i16:rgba(27,27,27,.16);
  --f:"Clash Display","Helvetica Neue",Arial,sans-serif;
  --max:1320px;--pad:max(24px,env(safe-area-inset-left));--pad-r:max(24px,env(safe-area-inset-right));
  --edge:calc(max(0px,(100vw - var(--max)) / 2) + var(--pad));
  --rail:190px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:#000;color:var(--ink);font:400 18px/1.62 var(--f);letter-spacing:.002em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--f);font-weight:500;margin:0;letter-spacing:-.02em;line-height:1.08}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--cream);color:#000;padding:12px 18px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad-r)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;padding:16px 28px;border:1px solid var(--c40);
  background:transparent;color:var(--cream);font:500 16px/1.1 var(--f);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{background:var(--cream);border-color:var(--cream);color:#000}
.btn.solid{background:var(--amber);border-color:var(--amber);color:#000}
.btn.solid:hover{background:var(--cream);border-color:var(--cream)}
.btn svg{width:20px;height:20px;flex:none}
.fog .btn,.white .btn{border-color:var(--ink);color:var(--ink)}
.fog .btn:hover,.white .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fog .btn.solid,.white .btn.solid{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fog .btn.solid:hover,.white .btn.solid:hover{background:var(--teal);border-color:var(--teal)}
.acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tlink{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--amber);text-decoration-thickness:2px}
.tlink:hover{color:var(--amber)}
.fog .tlink,.white .tlink{text-decoration-color:var(--teal)}
.fog .tlink:hover,.white .tlink:hover{color:var(--teal)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:80;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.hdr.solid{background:#000;border-bottom-color:var(--c12)}
.hdr .wrap{display:flex;align-items:center;gap:26px;min-height:104px;transition:min-height .3s}
.hdr.solid .wrap{min-height:82px}
.brand{display:block;flex:none;color:var(--cream)}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav>a,.dd>button{display:flex;align-items:center;gap:7px;padding:12px 15px;background:none;border:0;color:var(--cream);font:400 16px/1 var(--f);
  letter-spacing:.015em;text-decoration:none;cursor:pointer;white-space:nowrap}
.nav>a:hover,.dd>button:hover,.dd.open>button{color:var(--amber)}
.nav>a[aria-current=page],.dd.cur>button{color:var(--amber)}
.dd{position:relative}
.dd>button svg{width:13px;height:13px;transition:transform .2s}
.dd.open>button svg{transform:rotate(180deg)}
.dd-panel{position:absolute;left:0;top:100%;padding-top:14px;display:none}
.dd.open .dd-panel{display:block}
@media (hover:hover){.dd:hover .dd-panel{display:block}.dd:hover>button{color:var(--amber)}}
.dd-menu{background:#000;border:1px solid var(--c22);min-width:300px;padding:10px 0}
.dd-menu.two{display:grid;grid-template-columns:1fr 1fr;min-width:560px}
.dd-menu a{display:block;padding:12px 24px;color:var(--cream);text-decoration:none;font-size:16px;line-height:1.3}
.dd-menu a small{display:block;color:var(--c64);font-size:13.5px;margin-top:3px}
.dd-menu a:hover{background:var(--teal)}
.dd-menu .all{grid-column:1/-1;border-top:1px solid var(--c22);margin-top:8px;padding-top:16px;color:var(--amber)}
.hdr-cta{display:flex;align-items:center;gap:20px;flex:none}
.h-phone{color:var(--cream);text-decoration:none;font-size:16px;white-space:nowrap}
.h-phone:hover{color:var(--amber)}
.hdr .btn{min-height:56px;padding:14px 22px}
.nav-toggle{display:none;margin-left:auto;width:52px;height:52px;border:1px solid var(--c40);background:transparent;color:var(--cream);cursor:pointer;place-items:center}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded=true] .x{display:block}
.nav-toggle[aria-expanded=true] .b{display:none}
.mnav{display:none}
@media (max-width:1380px){.h-phone{display:none}}
@media (max-width:1180px){
  .nav,.hdr-cta{display:none}
  .nav-toggle{display:grid}
  .hdr .wrap{min-height:84px}
  .mnav{display:block;position:fixed;inset:0;top:var(--hdr-h,84px);background:#000;overflow-y:auto;padding:10px 0 48px;border-top:1px solid var(--c12)}
  .mnav[hidden]{display:none}
  .mnav .wrap{display:block!important;min-height:0!important}
  .mnav a,.mnav summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;color:var(--cream);text-decoration:none;font-size:22px;
    border-bottom:1px solid var(--c12);cursor:pointer;list-style:none}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav summary svg{width:16px;height:16px;transition:transform .2s}
  .mnav details[open] summary svg{transform:rotate(180deg)}
  .mnav details a{font-size:18px;padding:14px 0 14px 18px;color:var(--c80)}
  .mnav .btns{display:grid;gap:12px;margin-top:28px}
}

/* ---------- hero (every page) ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;background:#000;color:var(--cream);overflow:hidden;isolation:isolate}
.hero.inner{min-height:max(620px,78svh)}
.hero.short{min-height:max(500px,58svh)}
.hero .bgi,.hero .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 55% at 50% 52%,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 75%),linear-gradient(180deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.52) 22%,rgba(0,0,0,.52) 60%,rgba(0,0,0,.86) 100%)}
.hero .in{width:100%;max-width:1320px;padding:150px var(--pad-r) 110px var(--pad)}
.hero h1{font-size:clamp(46px,7.2vw,112px);line-height:1.02;letter-spacing:-.03em;font-weight:500;color:var(--cream);max-width:1180px;margin:0 auto}
.hero.inner h1{font-size:clamp(42px,6vw,92px)}
.hero .sub{font-size:clamp(18px,1.55vw,22px);line-height:1.55;color:var(--c80);max-width:760px;margin:30px auto 0;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.hero .acts{justify-content:center;margin-top:42px}
.crumb{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;list-style:none;font-size:15px;color:var(--c64);margin:0 0 26px}
.crumb a{color:var(--c80);text-decoration:none}
.crumb a:hover{color:var(--amber)}
.crumb li+li::before{content:"/";margin-right:10px;color:var(--c40)}
.hero .meta{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--c22);z-index:1}
.hero .meta .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;font-size:15px;color:var(--c80)}
.hero .meta b{color:var(--cream);font-weight:500}
@media (max-width:760px){.hero .meta{display:none}.hero .in{padding-top:130px;padding-bottom:80px}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(84px,10vw,150px) 0}
.sec.tight{padding:clamp(60px,7vw,96px) 0}
.teal{background:var(--teal);color:var(--cream)}
.black{background:#000;color:var(--cream)}
.fog{background:var(--fog);color:var(--ink)}
.white{background:#fff;color:var(--ink)}
.title{font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-.025em;text-transform:uppercase;font-weight:500}
.h2{font-size:clamp(32px,3.6vw,54px);line-height:1.08;letter-spacing:-.022em}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.55;max-width:780px}
.teal .lead,.black .lead{color:var(--c80)}
.fog .lead,.white .lead{color:var(--i72)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;align-items:end;margin-bottom:clamp(54px,6vw,90px)}
.head.one{grid-template-columns:1fr}
@media (max-width:900px){.head{grid-template-columns:1fr}}

/* vertical rail title + line art, as on the reference site */
.lined::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--edge) + var(--rail) - 56px);width:1px;background:var(--c22);pointer-events:none}
.fog.lined::before,.white.lined::before{background:var(--i16)}
.rail{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.rail>.vt{position:relative}
.rail>.vt h2{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;margin-left:-8px;
  font-size:clamp(54px,5.6vw,84px);font-weight:400;letter-spacing:.005em;text-transform:uppercase;line-height:.9}
@media (max-width:1000px){
  .lined::before{display:none}
  .rail{grid-template-columns:1fr}
  .rail>.vt{margin-bottom:48px}
  .rail>.vt h2{writing-mode:horizontal-tb;transform:none;margin-left:0;font-size:clamp(38px,8vw,60px);line-height:1.02}
}

/* columns with line icons (no boxes) */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 56px}
.cols.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 44px}
.cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.col{text-align:center}
.col .ico{width:68px;height:68px;margin:0 auto 34px;color:inherit}
.col h3{font-size:clamp(21px,1.7vw,25px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;margin-bottom:24px}
.col p{font-size:17.5px;line-height:1.62}
.teal .col p,.black .col p{color:var(--c80)}
.fog .col p,.white .col p{color:var(--i72)}
.col .tlink{display:inline-block;margin-top:22px}
.cols.left .col{text-align:left}
.cols.left .col .ico{margin:0 0 30px}
@media (max-width:1100px){.cols.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.cols,.cols.four,.cols.two{grid-template-columns:1fr;gap:64px}}

/* edge-bleeding photo splits */
.bleed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(78vh,760px)}
.bleed .txt{padding:clamp(80px,9vw,140px) clamp(32px,6vw,110px) clamp(80px,9vw,140px) var(--edge);display:flex;flex-direction:column;justify-content:center}
.bleed.rev .txt{order:2;padding:clamp(80px,9vw,140px) var(--edge) clamp(80px,9vw,140px) clamp(32px,6vw,110px)}
.bleed .pic{position:relative;min-height:460px;overflow:hidden;background:#111}
.bleed .pic img,.bleed .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed .h2{margin-bottom:28px}
.bleed .txt>p{font-size:19px;line-height:1.62;max-width:600px}
.teal .bleed .txt>p,.black .bleed .txt>p,.bleed.teal .txt>p,.bleed.black .txt>p{color:var(--c80)}
.bleed .acts,.bleed .tlink{margin-top:34px}
@media (max-width:900px){
  .bleed{grid-template-columns:1fr;min-height:0}
  .bleed .txt,.bleed.rev .txt{order:2;padding:72px var(--pad-r) 80px var(--pad)}
  .bleed .pic{order:1;min-height:0;aspect-ratio:4/3}
}

/* industry list with hover photo */
.ilist{border-top:1px solid var(--c22)}
.irow{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 46px;gap:36px;align-items:center;padding:38px 0;
  border-bottom:1px solid var(--c22);color:var(--cream);text-decoration:none;isolation:isolate}
.irow .ph{position:absolute;inset:0 calc(-1 * var(--pad));z-index:-1;opacity:0;transition:opacity .35s;overflow:hidden;pointer-events:none}
.irow .ph img{width:100%;height:100%;object-fit:cover}
.irow .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.5))}
.irow:hover .ph,.irow:focus-visible .ph{opacity:1}
@media (hover:none){.irow .ph{opacity:.42}}
.irow .nm{font-size:clamp(30px,3.6vw,56px);line-height:1;letter-spacing:-.025em;text-transform:uppercase;font-weight:500}
.irow .ds{font-size:17.5px;color:var(--c80);max-width:460px}
.irow .go{width:46px;height:46px;border:1px solid var(--c40);display:grid;place-items:center;transition:background .2s,border-color .2s}
.irow .go svg{width:20px;height:20px}
.irow:hover .nm{color:var(--amber)}
.irow:hover .go{background:var(--amber);border-color:var(--amber);color:#000}
@media (max-width:820px){.irow{grid-template-columns:1fr 46px;gap:14px 20px;padding:30px 0}.irow .ds{grid-column:1;grid-row:2}.irow .go{grid-row:1/3;grid-column:2}}

/* sequence steps (real sequences only) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px;list-style:none;counter-reset:s}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{border-top:1px solid var(--c22);padding-top:28px}
.fog .steps li,.white .steps li{border-top-color:var(--i16)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font-size:64px;font-weight:300;line-height:1;color:var(--amber);margin-bottom:26px;letter-spacing:-.03em}
.fog .steps li::before,.white .steps li::before{color:var(--teal)}
.steps h3{font-size:23px;line-height:1.2;margin-bottom:12px}
.steps p{font-size:17px;line-height:1.6}
.teal .steps p,.black .steps p{color:var(--c80)}
.fog .steps p,.white .steps p{color:var(--i72)}
@media (max-width:1000px){.steps,.steps.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps,.steps.three{grid-template-columns:1fr}}

/* figures with sources */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c22)}
.figs.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.fog .figs,.white .figs{border-top-color:var(--i16)}
.fig{padding:40px 40px 0 0;margin-right:40px;border-right:1px solid var(--c22)}
.fog .fig,.white .fig{border-right-color:var(--i16)}
.fig:last-child{border-right:0;margin-right:0}
.fig b{display:block;font-size:clamp(46px,5vw,78px);line-height:1;letter-spacing:-.035em;font-weight:500;white-space:nowrap}
.figs.four .fig b{font-size:clamp(40px,4.1vw,62px)}
.teal .fig b,.black .fig b{color:var(--amber)}
.fog .fig b,.white .fig b{color:var(--teal)}
.fig p{margin:20px 0 16px;font-size:17.5px;line-height:1.55}
.fig small{display:block;font-size:14px;line-height:1.5;opacity:.7}
.fig small a{color:inherit}
@media (max-width:980px){.figs,.figs.four{grid-template-columns:1fr 1fr}.fig:nth-child(2n){border-right:0;margin-right:0}}
@media (max-width:600px){.figs,.figs.four{grid-template-columns:1fr}.fig{border-right:0;margin-right:0;border-bottom:1px solid var(--c22);padding-bottom:36px}.fog .fig,.white .fig{border-bottom-color:var(--i16)}}
.note{font-size:15.5px;line-height:1.6;margin-top:30px;max-width:820px;opacity:.75}

/* ruled lists (no check icons, no boxes) */
.rl{list-style:none;border-top:1px solid var(--c22)}
.rl li{padding:17px 0 17px 30px;border-bottom:1px solid var(--c22);font-size:18px;line-height:1.5;position:relative}
.rl li::before{content:"";position:absolute;left:0;top:28px;width:14px;height:1px;background:var(--amber)}
.fog .rl,.white .rl,.fog .rl li,.white .rl li{border-color:var(--i16)}
.fog .rl li::before,.white .rl li::before{background:var(--teal)}
.rl.no li::before{background:var(--c40)}
.fog .rl.no li::before,.white .rl.no li::before{background:var(--i40)}
.rl.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:0}
.rl.cols2 li:nth-child(-n+2){border-top:1px solid var(--c22)}
.fog .rl.cols2 li:nth-child(-n+2),.white .rl.cols2 li:nth-child(-n+2){border-top-color:var(--i16)}
@media (max-width:700px){.rl.cols2{grid-template-columns:1fr}.rl.cols2 li:nth-child(2){border-top:0}}
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:56px 80px}
.two-lists h3{font-size:28px;margin-bottom:24px}
@media (max-width:820px){.two-lists{grid-template-columns:1fr}}

/* quote-style notes */
.aside{border-left:2px solid var(--amber);padding:6px 0 6px 26px;font-size:19px;line-height:1.6;max-width:880px}
.fog .aside,.white .aside{border-left-color:var(--teal)}
.aside b{font-weight:500}

/* camera views list */
.views{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.views li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--i16);align-items:start}
.views li:nth-child(-n+2){border-top:1px solid var(--i16)}
.views svg{width:34px;height:34px;color:var(--teal)}
.views b{display:block;font-weight:500;font-size:19px;line-height:1.3}
.views span{color:var(--i72);font-size:16px}
.views.never svg{color:#9A2B2B}
.teal .views li,.black .views li{border-color:var(--c22)}
.teal .views svg,.black .views svg{color:var(--amber)}
.teal .views span,.black .views span{color:var(--c64)}
@media (max-width:760px){.views{grid-template-columns:1fr}.views li:nth-child(2){border-top:0}}

/* pricing (columns, no cards) */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--i16)}
.plans.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:940px}
.plan{display:flex;flex-direction:column;padding:46px 44px 6px 0;margin-right:44px;border-right:1px solid var(--i16)}
.plan:last-child{border-right:0;margin-right:0}
.plan .pt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:30px}
.plan h3{font-size:30px}
.plan .tag{font-size:14.5px;color:var(--teal);font-weight:500;text-align:right}
.plan .hrs{color:var(--i72);font-size:17px;margin-top:8px}
.plan .price{font-size:clamp(64px,6vw,92px);font-weight:500;letter-spacing:-.045em;line-height:1;margin:38px 0 10px}
.plan .price small{font-size:18px;letter-spacing:0;font-weight:400;color:var(--i72);margin-left:6px}
.plan .per{font-size:15px;color:var(--i72);margin-bottom:28px}
.plan .desc{font-size:17.5px;margin-bottom:26px;min-height:84px}
.plan .rl{margin-bottom:36px}
.plan .rl li{font-size:16.5px;padding:13px 0 13px 28px}
.plan .rl li::before{top:24px}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan.feat .price{color:var(--teal)}
.teal .plans,.black .plans{border-top-color:var(--c22)}
.teal .plan,.black .plan{border-right-color:var(--c22)}
.teal .plan .hrs,.teal .plan .per,.teal .plan .price small,.black .plan .hrs,.black .plan .per,.black .plan .price small{color:var(--c64)}
.teal .plan .tag,.black .plan .tag,.teal .plan.feat .price,.black .plan.feat .price{color:var(--amber)}
@media (max-width:980px){.plans,.plans.two{grid-template-columns:1fr}.plan{border-right:0;margin-right:0;border-bottom:1px solid var(--i16);padding:40px 0}.teal .plan,.black .plan{border-bottom-color:var(--c22)}.plan .desc{min-height:0}}

/* tables */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--i16)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:17px}
th,td{text-align:left;padding:20px 22px 20px 0;border-bottom:1px solid var(--i16);vertical-align:top;line-height:1.45}
thead th{font-weight:500;font-size:17px;color:var(--ink)}
tbody th{font-weight:500}
td.us,th.us{color:var(--teal);font-weight:500}
.y{color:var(--teal);font-weight:500}.n{color:var(--i40)}.p{color:#8A5A12}
.swipe{display:none;font-size:15px;opacity:.7;margin-bottom:12px}
@media (max-width:760px){.swipe{display:block}}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px 90px}
.calc .row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--c22)}
.calc .row span{color:var(--c80);font-size:18px}
.calc .row b{font-size:clamp(30px,3vw,46px);font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.calc .row.save b{color:var(--amber)}
.calc small{display:block;margin-top:22px;font-size:15px;color:var(--c64);line-height:1.55}
@media (max-width:900px){.calc{grid-template-columns:1fr}}

/* forms (underline fields) */
.form{display:grid;gap:30px 40px;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
.field{display:grid;gap:6px}
.field label{font-size:15px;color:var(--c64);letter-spacing:.01em}
.field label i{font-style:normal;opacity:.8}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--c40);border-radius:0;color:var(--cream);
  font:400 20px/1.4 var(--f);padding:12px 0;transition:border-color .2s}
.field select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(135deg,var(--cream) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%,calc(100% - 8px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px}
.field select option{color:#000}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--c40)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--amber)}
.field input[aria-invalid=true]{border-bottom-color:#FF8A73}
.fog .field label,.white .field label{color:var(--i72)}
.fog .field input,.fog .field select,.fog .field textarea,.white .field input,.white .field select,.white .field textarea{color:var(--ink);border-bottom-color:var(--i40)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.copy-link{background:none;border:0;padding:8px 0;color:var(--c80);font:400 16px/1.2 var(--f);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.copy-link:hover{color:var(--amber)}
.form-msg{margin:4px 0 0;font-size:16px;color:var(--amber)}
.form-msg.err{color:#FF9B85}
.form-note{font-size:14.5px;color:var(--c64);margin-top:8px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.start{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px 110px}
@media (max-width:1000px){.start{grid-template-columns:1fr}}
.contact-rows{list-style:none;margin-top:44px;border-top:1px solid var(--c22)}
.contact-rows li{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--c22)}
.contact-rows small{display:block;font-size:14.5px;color:var(--c64);margin-bottom:4px}
.contact-rows a,.contact-rows b{color:var(--cream);text-decoration:none;font-size:22px;font-weight:500;letter-spacing:-.01em;word-break:break-word}
.contact-rows a:hover{color:var(--amber)}
.copy{flex:none;background:none;border:0;color:var(--c64);font:400 15px/1 var(--f);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px 0}
.copy:hover,.copy.done{color:var(--amber)}

/* faq */
.faq{border-top:1px solid var(--i16)}
.faq details{border-bottom:1px solid var(--i16)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:30px 0;cursor:pointer;font-size:clamp(20px,1.7vw,25px);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:22px;height:22px;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .25s}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .a{padding:0 60px 32px 0;font-size:18px;line-height:1.65;color:var(--i72);max-width:900px}
.teal .faq,.black .faq,.teal .faq details,.black .faq details{border-color:var(--c22)}
.teal .faq .a,.black .faq .a{color:var(--c80)}
.faq-group+.faq-group{margin-top:80px}
.faq-group>h2{margin-bottom:26px}

/* sources */
details.src{border-top:1px solid var(--i16);border-bottom:1px solid var(--i16);margin-top:56px}
details.src summary{list-style:none;cursor:pointer;padding:22px 0;font-size:18px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
details.src summary::-webkit-details-marker{display:none}
details.src summary svg{width:18px;height:18px;transition:transform .2s}
details.src[open] summary svg{transform:rotate(180deg)}
details.src ol{padding:0 0 24px 22px;display:grid;gap:10px;font-size:15.5px;color:var(--i72)}
details.src a{color:inherit;word-break:break-word}
.teal details.src,.black details.src{border-color:var(--c22)}
.teal details.src ol,.black details.src ol{color:var(--c64)}

/* related + small link rows */
.related{display:flex;flex-wrap:wrap;gap:12px 34px;font-size:20px}
.related a{color:inherit;text-decoration:none;border-bottom:1px solid var(--i40);padding-bottom:4px}
.related a:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* video (explainer) */
.video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video video{width:100%;height:100%;object-fit:cover}
.video .play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:rgba(0,0,0,.28);cursor:pointer;color:var(--cream)}
.video .play span{display:flex;align-items:center;gap:18px;font-size:20px;font-weight:500}
.video .play i{width:84px;height:84px;border:1px solid var(--cream);border-radius:50%;display:grid;place-items:center;transition:background .2s}
.video .play i svg{width:18px;height:20px;fill:currentColor;margin-left:4px}
.video .play:hover i{background:var(--amber);border-color:var(--amber);color:#000}
.video-meta{font-size:15px;opacity:.7;margin-top:14px}

/* portfolio */
.filters{display:flex;flex-wrap:wrap;gap:8px 30px;margin-bottom:56px;border-bottom:1px solid var(--i16)}
.filter{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 0;font:400 18px/1 var(--f);color:var(--i72);cursor:pointer}
.filter span{font-size:14px;margin-left:6px;opacity:.7}
.filter:hover{color:var(--ink)}
.filter.on{color:var(--ink);border-bottom-color:var(--teal);font-weight:500}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 44px}
@media (max-width:1000px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cases{grid-template-columns:1fr}}
.case[hidden]{display:none}
.shot-btn{display:block;width:100%;height:440px;padding:0;border:0;background:#0F1A1A;cursor:zoom-in;overflow:hidden;position:relative}
.shot-btn img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.shot-btn:hover img{transform:scale(1.03)}
.case .cat{display:block;margin-top:24px;font-size:15px;color:var(--teal);font-weight:500}
.case h3{font-size:24px;line-height:1.2;margin:8px 0 12px}
.case p{font-size:17px;color:var(--i72);line-height:1.6}
.black .case .cat,.teal .case .cat{color:var(--amber)}
.black .case p,.teal .case p{color:var(--c80)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:28px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory}
.strip .case{scroll-snap-align:start}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.95);display:flex;flex-direction:column;color:var(--cream)}
.lightbox[hidden]{display:none}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);border-bottom:1px solid var(--c22)}
.lb-bar b{font-weight:500;font-size:18px}
.lb-btns{display:flex;gap:8px}
.lb-btn{width:50px;height:50px;border:1px solid var(--c40);background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center;font-size:26px;line-height:1}
.lb-btn svg{width:20px;height:20px}
#lb-prev svg{transform:rotate(180deg)}
.lb-btn:hover{background:var(--cream);color:#000}
.lb-scroll{flex:1;overflow:auto;padding:24px 16px 48px}
.lb-scroll img{margin:0 auto;max-width:min(720px,100%)}

/* prose */
.prose{max-width:820px;font-size:18px;line-height:1.75}
.prose h2{font-size:30px;margin:56px 0 16px}
.prose h3{font-size:22px;margin:30px 0 10px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1em}
.prose li{margin-bottom:10px}
.prose .meta{color:var(--i72)}
.prose a{color:var(--teal)}
.toc{position:sticky;top:110px;align-self:start;display:grid;gap:2px}
.toc a{color:var(--i72);text-decoration:none;padding:9px 0;border-bottom:1px solid var(--i16);font-size:17px}
.toc a:hover{color:var(--teal)}
.with-toc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:80px}
@media (max-width:900px){.with-toc{grid-template-columns:1fr}.toc{position:static}}
.tips-h{font-size:clamp(28px,3vw,40px);margin:72px 0 10px}
.tips-h:first-child{margin-top:0}
.tip{padding:26px 0;border-bottom:1px solid var(--i16)}
.tip h3{font-size:22px;margin-bottom:8px}
.tip p{color:var(--i72)}

/* media kit */
.logo-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.logo-blocks>div{min-height:300px;display:grid;place-items:center;padding:48px}
.logo-blocks .b1{background:#000;color:var(--cream)}
.logo-blocks .b2{background:var(--teal);color:var(--cream)}
.logo-blocks .b3{background:var(--cream);color:var(--ink)}
@media (max-width:900px){.logo-blocks{grid-template-columns:1fr}}
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.sw i{display:block;height:180px}
.sw div{padding:16px 16px 0 0;font-size:15.5px;line-height:1.5}
.sw b{font-weight:500;display:block}
@media (max-width:900px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
.specimen{font-size:clamp(64px,10vw,160px);line-height:.95;letter-spacing:-.04em}
.sitemap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px}
.sitemap h2{font-size:24px;margin-bottom:18px}
.sitemap ul{list-style:none;display:grid;gap:10px;font-size:18px}
.sitemap a{color:var(--i72);text-decoration:none}
.sitemap a:hover{color:var(--teal)}
@media (max-width:900px){.sitemap{grid-template-columns:1fr 1fr}}

/* closing call to action with footage */
.cta{position:relative;min-height:min(80vh,720px);display:grid;place-items:center;text-align:center;color:var(--cream);overflow:hidden;isolation:isolate;background:#000}
.cta .bgv,.cta .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.6)}
.cta .in{padding:120px var(--pad);max-width:1100px}
.cta h2{font-size:clamp(40px,5.6vw,88px);line-height:1.03;letter-spacing:-.03em}
.cta p{font-size:clamp(18px,1.5vw,21px);color:var(--c80);margin:26px auto 0;max-width:640px}
.cta .acts{justify-content:center;margin-top:40px}

/* footer, after the reference site */
.ftr{background:#000;color:var(--cream);padding:110px 0 44px;text-align:center}
.ftr .flogo{display:inline-block;color:var(--cream)}
.ftr nav.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;margin:64px 0 0;font-size:18px}
.ftr nav.fnav a{color:var(--cream);text-decoration:none}
.ftr nav.fnav a:hover{color:var(--amber)}
.ftr .fcontact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;margin-top:30px;font-size:17px;color:var(--c80)}
.ftr .fcontact a{color:inherit;text-decoration:none}
.ftr .fcontact a:hover{color:var(--amber)}
.ftr .fine{margin-top:72px;padding-top:30px;border-top:1px solid var(--c12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;font-size:14px;color:var(--c64);text-align:left}
.ftr .fine nav{display:flex;gap:24px}
.ftr .fine a{color:inherit;text-decoration:none}
.ftr .fine a:hover{color:var(--cream)}
.ftr .ind{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:22px;font-size:15.5px;color:var(--c64)}
.ftr .ind a{color:inherit;text-decoration:none}
.ftr .ind a:hover{color:var(--amber)}
.wa-float{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:70;width:58px;height:58px;border-radius:50%;
  background:#1FA855;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.wa-float:hover{background:#178A45}
.wa-float svg{width:28px;height:28px}

/* a plain statement after a hero */
.statement{font-size:clamp(27px,3vw,44px);line-height:1.24;letter-spacing:-.02em;font-weight:400;max-width:1120px}
.statement.center{margin:0 auto;text-align:center}
.statement span{color:var(--c64)}
.fog .statement span,.white .statement span{color:var(--i40)}

/* camera apps set as type */
.apps{list-style:none;display:flex;flex-wrap:wrap;font-size:clamp(28px,3.6vw,56px);line-height:1.22;letter-spacing:-.025em;font-weight:500}
.apps li:not(:last-child)::after{content:"/";margin:0 .3em;font-weight:300;color:var(--amber)}
.fog .apps li::after,.white .apps li::after{color:var(--teal)}
.bleed .apps{font-size:clamp(23px,2.1vw,32px);margin-top:30px}

/* camera types: photos with plain captions */
.types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 28px}
.types figure{margin:0}
.types img{width:100%;aspect-ratio:4/3;object-fit:cover}
.types figcaption{margin-top:18px;font-size:21px;font-weight:500;letter-spacing:-.01em}
.types figcaption small{display:block;font-size:16px;font-weight:400;margin-top:6px;opacity:.72}
@media (max-width:900px){.types{grid-template-columns:1fr 1fr}}

.vid-wrap{max-width:1120px;margin:0 auto}
.bleed .pic.top img{object-position:top}
.center{text-align:center}
.mt-s{margin-top:24px}.mt-m{margin-top:44px}.mt-l{margin-top:72px}
.head .tlink{justify-self:start}

/* numbered sequence inside a split (real sequences only) */
.seq{list-style:none;counter-reset:q;border-top:1px solid var(--c22);margin-top:8px}
.seq li{counter-increment:q;display:grid;grid-template-columns:58px 1fr;gap:8px;padding:22px 0;border-bottom:1px solid var(--c22)}
.seq li::before{content:counter(q,decimal-leading-zero);font-size:22px;font-weight:500;color:var(--amber);line-height:1.3}
.seq b{display:block;font-weight:500;font-size:20px;line-height:1.3;margin-bottom:6px}
.seq span{display:block;font-size:17px;line-height:1.55}
.teal .seq span,.black .seq span{color:var(--c80)}
.fog .seq,.white .seq,.fog .seq li,.white .seq li{border-color:var(--i16)}
.fog .seq li::before,.white .seq li::before{color:var(--teal)}
.fog .seq span,.white .seq span{color:var(--i72)}

/* lists inside a split */
.bleed .rl,.bleed .seq{margin-top:30px;max-width:640px}
.bleed .views{grid-template-columns:1fr;margin-top:30px;max-width:640px}
.bleed .views li:nth-child(2){border-top:0}
.never-h{font-size:22px;margin:44px 0 6px}
.bleed .rl.cols2{max-width:none}
.teal .rl,.teal .rl li,.black .rl,.black .rl li{border-color:var(--c22)}

/* faq page: group title left, questions right */
.fgrid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:28px 80px;align-items:start}
.fgrid+.fgrid{margin-top:96px}
.fgrid .h2{position:sticky;top:110px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr}.fgrid .h2{position:static}}

.rel-h{font-size:16px;color:var(--i72);margin-bottom:18px}

.nw{white-space:nowrap}
.hero h1,.h2,.cta h2,.title,.statement{text-wrap:balance}
.lead,.hero .sub,.cta p{text-wrap:pretty}
.ftr .fine nav{flex-wrap:wrap;gap:10px 24px}
.ftr .fine a{white-space:nowrap}
@media (max-width:480px){.contact-rows a,.contact-rows b{font-size:19px;word-break:normal;overflow-wrap:anywhere}}

/* SightGuard logo sizes */
.brand svg.logo{height:clamp(38px,3.3vw,48px);width:auto;max-width:none}
.ftr .flogo svg.logo{width:min(400px,72vw);height:auto}
.logo-blocks svg.logo{width:min(400px,100%);height:auto}
.logo-blocks svg.logo.stacked{width:min(300px,100%)}
.mk-row{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,.6fr) minmax(0,1.8fr);gap:28px}
.mk-row figure{margin:0}
.mk-row figure>div{min-height:220px;display:grid;place-items:center;padding:40px;background:#000}
.mk-row .mk-icon{background:var(--fog)}
.mk-row .mk-sym svg{width:110px;height:auto}
.mk-row .mk-icon svg{width:120px;height:auto}
.mk-row .mk-line svg{width:100%;height:auto}
.mk-row figcaption{margin-top:14px;font-size:16px;color:var(--i72)}
@media (max-width:900px){.mk-row{grid-template-columns:1fr 1fr}.mk-row figure:last-child{grid-column:1/-1}}
@media (max-width:1180px){.brand svg.logo{height:36px}}