/* ============================================================
   PARDO PRODUCTIONS LLC
   Light theme. White primary, grey blocks, photo-forward.
   Shared by every page. Edit here, then run build.py.
   ============================================================ */

:root{
  --white:#ffffff;
  --grey:#f4f4f2;
  --grey-2:#ebebe7;
  --ink:#101012;
  --ink-2:#3a3a42;
  --soft:#6e6e78;
  --line:#e3e3de;
  --accent:#c2410c;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;image-orientation:from-image}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 20px}}

h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:0 0 20px;text-transform:uppercase}
h1{font-size:clamp(38px,6.4vw,76px)}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(17px,1.7vw,20px);letter-spacing:.005em}
p{margin:0 0 20px;color:var(--ink-2)}
.lede{font-size:clamp(17px,1.75vw,20px);color:var(--ink-2);max-width:60ch}
.soft{color:var(--soft)}
.small{font-size:15px;line-height:1.65}

.eyebrow{
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;
  color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

section{padding:clamp(72px,9vw,124px) 0}
.band-grey{background:var(--grey)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:16px 30px;font:inherit;font-size:14px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border-radius:2px;transition:background .2s,color .2s,transform .18s var(--ease);
}
.btn:hover{background:#2c2c33;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:#c9c9c2}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
header.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:82px}
.nav .logo{height:26px;width:auto;flex-shrink:0}
.navlinks{display:flex;align-items:center;gap:32px;margin-left:auto}
.navlinks a{
  text-decoration:none;font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);transition:color .2s;white-space:nowrap;
}
.navlinks a:hover{color:var(--accent)}
/* `.navlinks a` (0,1,1) outranks `.btn` (0,1,0), so without these the CTA
   inherited dark grey text on its near-black background and was unreadable. */
.navlinks a.btn{color:#fff}
.navlinks a.btn:hover{color:#fff}
.nav .btn{padding:13px 24px;font-size:12px}
.burger{display:none;background:none;border:1px solid var(--line);width:46px;height:42px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;border-radius:2px;margin-left:auto}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:980px){
  .navlinks{position:fixed;inset:82px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:6px 24px 22px;
    transform:translateY(calc(-100% - 120px));visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s .35s}
  .navlinks.open{transform:translateY(0);visibility:visible;transition:transform .35s var(--ease)}
  .navlinks a{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
  .navlinks .btn{margin-top:18px;width:100%}
  .burger{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,72px)}
/* The logo JPEG is cropped tight to the artwork. multiply drops its white
   background out so it sits invisibly on white AND on the grey footer. */
.logo,.logo-big{filter:brightness(1.01);mix-blend-mode:multiply}
/* Logo sits across from the headline, vertically centred against it.
   Below 900px it stacks back on top, which is where it reads best on a phone. */
/* 1.1/.9 with a 48px gap is the widest the logo can go while the headline
   still breaks onto two lines rather than three. */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,3.4vw,48px);align-items:center}
.hero-mark{display:flex;justify-content:flex-end}
.hero .logo-big{width:100%;max-width:560px;height:auto;margin:0}
.hero h1{max-width:15ch;margin-bottom:26px}
/* Laptop band: two columns are active but narrow, so ease the headline down
   just enough to keep it on two lines instead of three. */
@media(min-width:901px) and (max-width:1280px){
  .hero h1{font-size:clamp(34px,4.6vw,58px)}
}
.hero .lede{max-width:54ch}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-mark{order:-1;justify-content:flex-start;margin-bottom:40px}
  .hero .logo-big{width:min(430px,88%)}
}

/* full-bleed photo */
.full{position:relative;overflow:hidden;background:var(--grey-2)}
.full img{width:100%;height:clamp(340px,58vw,660px);object-fit:cover;object-position:center 45%}

/* photo with copy laid over it */
.overlay{position:relative;overflow:hidden;display:flex;align-items:flex-end;background:#101012}
.overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%}
.overlay::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.15) 0%,rgba(10,10,12,.45) 50%,rgba(10,10,12,.88) 100%)}
.overlay .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(200px,32vw,340px);padding-bottom:clamp(48px,6vw,76px)}
.overlay h2,.overlay p{color:#fff}
.overlay p{max-width:46ch;color:#e4e4e2}
.overlay .eyebrow{color:#ffb86b}
.overlay .eyebrow::after{background:rgba(255,255,255,.28)}
.overlay .btn{background:#fff;color:var(--ink);border-color:#fff}
.overlay .btn:hover{background:#e9e9e5;border-color:#e9e9e5}

/* ============================================================
   SERVICES, plain statements, no lists
   ============================================================ */
/* Six columns so five cards still fill complete rows: three cards span 2 each,
   then the last two span 3 each. No orphan cell. */
.svc{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  margin-top:60px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc > div{background:var(--white);padding:38px 34px 42px;grid-column:span 2;display:flex;flex-direction:column}
.svc > div.half{grid-column:span 3}
.band-grey .svc > div{background:var(--grey)}
.svc h3{margin-bottom:12px}
.svc p{margin:0;font-size:15.5px;color:var(--soft);line-height:1.62}
.svc .num{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--accent);margin-bottom:20px}
@media(max-width:900px){.svc{grid-template-columns:1fr 1fr}
  .svc > div,.svc > div.half{grid-column:span 1}}
@media(max-width:600px){.svc{grid-template-columns:1fr}
  .svc > div{padding:30px 24px 34px}}

/* ============================================================
   SPLIT, image beside copy
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center;margin-top:56px}
.split + .split{margin-top:clamp(48px,6vw,88px)}
.split.flip .ph{order:2}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:30px}.split.flip .ph{order:0}}
.ph{position:relative;overflow:hidden;background:var(--grey-2)}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease)}
.ph:hover img{transform:scale(1.035)}
.ph .tag{
  position:absolute;top:0;left:0;z-index:2;background:#fff;color:var(--ink);
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:10px 16px;
}
.split h2{font-size:clamp(24px,2.9vw,36px)}
.split p{font-size:16px}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:56px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--grey-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{
  position:absolute;left:0;bottom:0;z-index:2;background:#fff;color:var(--ink);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px;
}
.gal .c4{grid-column:span 4}
.gal .c6{grid-column:span 6}
.gal .c8{grid-column:span 8}
/* Aspect ratio lives on the figure so each tile has a definite height and the
   image can simply fill it. Ratios are chosen so tiles sharing a row resolve to
   the same height: an 8-col 3:2 and a 4-col 3:4 are equal height, as are 3×4-col
   3:4 and 2×6-col 3:2. */
.gal .r-tall{aspect-ratio:3/4}
.gal .r-wide{aspect-ratio:3/2}
.gal .r-sq{aspect-ratio:1/1}
@media(max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal .c4,.gal .c6,.gal .c8{grid-column:span 1}
  .gal .r-tall,.gal .r-wide,.gal .r-sq{aspect-ratio:1/1}
}


/* ============================================================
   FAQ  (text here must stay identical to the FAQPage JSON-LD)
   ============================================================ */
.faq{margin-top:56px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;
  font-size:clamp(16px,1.9vw,19px);font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 44px 28px 0;margin:0;font-size:16px;color:var(--soft);max-width:70ch}

/* ============================================================
   CONTACT
   ============================================================ */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  margin-top:52px;border:1px solid var(--line)}
.cgrid > div{background:var(--white);padding:40px 36px}
.cgrid .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:800;margin-bottom:18px}
.slot{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.02em;min-height:46px;
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;word-break:break-word}
.slot a{color:var(--ink);text-decoration:none;border-bottom:3px solid var(--accent)}
.slot a:hover{color:var(--accent)}
.reveal-btn{background:transparent;border:1px dashed #c4c4bc;color:var(--ink-2);
  padding:13px 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  border-radius:2px;transition:.2s;letter-spacing:.03em}
.reveal-btn:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}
.copy-btn{background:none;border:0;color:var(--soft);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.copy-btn:hover{color:var(--ink)}
.cgrid .note{margin:22px 0 0;font-size:14px;color:var(--soft)}
@media(max-width:780px){.cgrid{grid-template-columns:1fr}.cgrid > div{padding:32px 24px}}

/* ============================================================
   QUESTIONNAIRE
   ============================================================ */
.qform{margin-top:34px}
.qform-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
@media(max-width:520px){.qform-nav .btn{flex:1;min-width:140px}}

.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f-grid .full-w{grid-column:1/-1}
@media(max-width:680px){.f-grid{grid-template-columns:1fr}}

label.fl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
label.fl .req{color:var(--accent)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;background:var(--white);border:1px solid #d6d6d0;border-radius:2px;
  padding:14px 15px;color:var(--ink);font:inherit;font-size:15.5px;transition:border-color .18s,box-shadow .18s;
}
textarea{min-height:110px;resize:vertical;line-height:1.6}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1em + 5px),calc(100% - 15px) calc(1em + 5px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,16,18,.08)}
input.err,select.err,textarea.err{border-color:#d33;box-shadow:0 0 0 3px rgba(221,51,51,.1)}
.hint{font-size:12.5px;color:var(--soft);margin-top:8px;line-height:1.5}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;border:1px solid #d6d6d0;padding:11px 18px;font-size:14px;
  font-weight:600;color:var(--ink-2);cursor:pointer;transition:.18s;user-select:none;border-radius:2px}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.chip span:hover{border-color:var(--ink)}

.subhead{margin:34px 0 16px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--accent);padding-top:26px;border-top:1px solid var(--line)}
.subhead.first{border-top:0;padding-top:0}

.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.sent-msg{display:none;margin-top:22px;border:1px solid #b9dcc4;background:#eefaf1;
  padding:16px 18px;font-size:14.5px;color:#1d5c33}
.sent-msg.show{display:block}
.sent-msg.is-error{border-color:#e7c2c2;background:#fdf0f0;color:#8a2b2b}

/* ---------- "Hablamos espanol" dropdown in the hero ---------- */
.es-drop{margin-top:26px;border:1px solid var(--line);max-width:560px}
.es-drop summary{
  cursor:pointer;list-style:none;padding:16px 46px 16px 20px;position:relative;
  font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.es-drop summary::-webkit-details-marker{display:none}
.es-drop summary::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.es-drop[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.es-drop summary:hover{color:var(--accent)}
.es-body{padding:0 20px 22px}
.es-body p{font-size:15.5px;margin:0 0 18px;color:var(--soft)}
.es-body .btn{padding:13px 22px;font-size:12.5px}

/* Spanish panel inside the drawer */
.es-sec{margin-top:6px}
.es-sec h3{margin:26px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.es-sec h3:first-child{margin-top:0;padding-top:0;border-top:0}
.es-sec p{font-size:15.5px;color:var(--soft);margin:0}

/* ============================================================
   SIDEBAR DRAWER
   Holds the questionnaire and the FAQ so they don't stretch the page.
   ============================================================ */
.drawer-handle{
  position:fixed;right:0;top:50%;z-index:70;transform:translateY(-50%) translateX(0);
  transform-origin:100% 50%;rotate:180deg;writing-mode:vertical-rl;
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  padding:20px 13px;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  border-radius:0 0 3px 3px;transition:background .2s,padding .2s;
}
.drawer-handle:hover{background:var(--accent);padding-right:17px}
@media(max-width:700px){.drawer-handle{display:none}}

.drawer-back{
  position:fixed;inset:0;z-index:80;background:rgba(16,16,18,.45);
  opacity:0;transition:opacity .35s var(--ease);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.drawer-back.show{opacity:1}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(720px,100%);background:var(--white);
  border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(0,0,0,.35);
  transform:translateX(101%);transition:transform .42s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}.drawer-back{transition:none}}

.drawer-head{
  display:flex;align-items:stretch;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);background:var(--white);flex-shrink:0;
}
.dtabs{display:flex}
.dtab{
  background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;
  padding:24px 26px;font:inherit;font-size:12.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:.2s;
}
.dtab:hover{color:var(--ink)}
.dtab.active{color:var(--ink);border-bottom-color:var(--accent)}
.dclose{
  background:none;border:0;cursor:pointer;font-size:30px;line-height:1;
  padding:0 26px;color:var(--soft);transition:color .2s;
}
.dclose:hover{color:var(--ink)}

.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dpanel{display:none;padding:38px 34px 46px}
.dpanel.active{display:block}
@media(max-width:640px){.dpanel{padding:28px 20px 36px}.dtab{padding:20px 18px;font-size:11.5px}.dclose{padding:0 18px}}

/* keep Send reachable without scrolling the panel back down */
.dpanel .qform-nav{position:sticky;bottom:-46px;z-index:2;background:var(--white)}
.dpanel .eyebrow{margin-bottom:14px}
.dpanel h2{font-size:clamp(24px,3.4vw,34px)}
.dpanel .lede{font-size:16px}
body.drawer-open{overflow:hidden}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--grey);border-top:1px solid var(--line);padding:64px 0 40px}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
footer .logo{height:38px;width:auto;margin-bottom:20px;mix-blend-mode:multiply}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--soft);text-decoration:none}
.foot-links a:hover{color:var(--accent)}
.ig{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-size:clamp(17px,2.1vw,23px);font-weight:800;letter-spacing:-.01em;transition:color .2s}
.ig svg{width:1.05em;height:1.05em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
.ig:hover{color:var(--accent)}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--soft)}

/* ============================================================
   SCROLL REVEAL
   Content is visible by default. The hidden state only applies
   once JS proves it can un-hide it (html.anim), so a throttled
   tab, no JS, or printing can never leave the page blank.
   ============================================================ */
.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.anim .rv-img.in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  .anim .rv,.anim .rv-img{opacity:1;transform:none;clip-path:none;transition:none}
}
@media print{.anim .rv,.anim .rv-img{opacity:1;transform:none;clip-path:none}}

::selection{background:var(--ink);color:#fff}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */
.navlinks a[aria-current="page"]{color:var(--accent)}
.svc p{flex:1}
.svc .more{margin-top:22px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);align-self:flex-start}
.svc .more:hover{color:var(--accent)}
.svc .btn{margin-top:22px;align-self:flex-start;padding:12px 20px;font-size:12px}

/* sub-page hero: headline beside a photo */
.phero{padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px)}
.phero .split{margin-top:0}
.phero h1{font-size:clamp(34px,5vw,60px);max-width:16ch}
.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--soft);margin:0 0 22px}
.crumbs a{text-decoration:none;color:var(--soft)}
.crumbs a:hover{color:var(--accent)}

/* ---------- rental gear cards ---------- */
.gear{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:56px}
@media(max-width:980px){.gear{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gear{grid-template-columns:1fr}}
.gcard{background:var(--white);display:flex;flex-direction:column}
.gcard .gimg{aspect-ratio:4/3;overflow:hidden;background:var(--grey-2);position:relative}
.gcard .gimg img{width:100%;height:100%;object-fit:cover}
/* no photo yet: a clean type tile instead of a stock image */
.gcard .tile{display:flex;flex-direction:column;justify-content:flex-end;padding:22px 28px;aspect-ratio:auto;min-height:150px}
.gcard .tile b{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.gcard .tile span{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;text-transform:uppercase;color:var(--ink)}
.gcard .gbody{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.gcard .kind{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--soft);margin-bottom:8px}
.gcard h3{margin-bottom:10px}
.gcard p{font-size:15.5px;color:var(--soft);line-height:1.6;margin:0 0 22px;flex:1}
.gcard .btn{align-self:flex-start;padding:12px 20px;font-size:12px}

/* model list on the home page */
.models{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0;list-style:none}
.models li{border:1px solid #d6d6d0;background:var(--white);padding:10px 16px;font-size:14px;font-weight:700;color:var(--ink-2)}

/* plain bullet list used on service pages */
.ticks{list-style:none;margin:0 0 24px;padding:0}
.ticks li{position:relative;padding:0 0 10px 22px;color:var(--ink-2);font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--accent)}

/* call-to-action band */
.ctaband{background:var(--ink);color:#fff}
.ctaband h2{color:#fff}
.ctaband p{color:#c9c9cf;max-width:56ch}
.ctaband .btn{background:#fff;color:var(--ink);border-color:#fff}
.ctaband .btn:hover{background:#e9e9e5}
.ctaband .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.ctaband .btn.ghost:hover{background:#fff;color:var(--ink)}

/* reviews */
.reviews{margin-top:48px;border:1px solid var(--line);background:var(--white);padding:clamp(28px,4vw,48px)}
.reviews .stars{font-size:22px;letter-spacing:.2em;color:var(--accent);margin-bottom:14px}
.reviews p{max-width:60ch}
.reviews .btn-row{margin-top:24px}

/* Google profile link in the contact grid */
.gbp{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-size:clamp(17px,2.1vw,23px);font-weight:800;letter-spacing:-.01em;transition:color .2s}
.gbp svg{width:1.05em;height:1.05em;flex-shrink:0}
.gbp:hover{color:var(--accent)}

/* phones: a quote button always in reach, since the side tab is hidden there */
.mcta{display:none}
@media(max-width:700px){
  .mcta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:65;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
  body{padding-bottom:76px}
  body.drawer-open .mcta{display:none}
}

/* ---------- engineer roles on /live-sound/ ---------- */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media(max-width:880px){.roles{grid-template-columns:1fr}}
.role{background:var(--white);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;scroll-margin-top:100px}
.role h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:10px}
.role .who{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--accent);margin-bottom:16px}
.role p{font-size:16px;color:var(--soft);flex:1}
.role .btn{align-self:flex-start;padding:12px 20px;font-size:12px}
.svc .num{letter-spacing:.16em;text-transform:uppercase}