/* ============================================
   iDesign V146 — "Two-Color Print Job"
   Ink on paper. One spot color. Typography does the work.
   ============================================ */
:root{
  --paper:#f9f7f1;
  --ink:#0d0d0d;
  --ink-60:rgba(13,13,13,0.60);
  --ink-45:rgba(13,13,13,0.58);
  --hair:rgba(13,13,13,0.14);
  --accent:#8DC63F;        /* fills, rules, the one pill */
  --accent-text:#4f7222;   /* green as text on paper: 5.21:1, passes AA 4.5:1 */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Sora',-apple-system,sans-serif;
  --measure:680px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--ink)}
img{max-width:100%;height:auto;display:block}

/* ---- Links: green, underlined, like marked-up proofs ---- */
a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}

/* ---- Page column ---- */
.page{max-width:var(--measure);margin:0 auto;padding:0 24px}
.page-wide{max-width:880px;margin:0 auto;padding:0 24px}

/* ---- Nav: wordmark, five words, one pill ---- */
.bar{border-bottom:1px solid var(--hair)}
.bar-in{max-width:880px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-0.5px;color:var(--ink);text-decoration:none}
.bar-links{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.bar-links a{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);text-decoration:none}
.bar-links a:hover{color:var(--accent-text);text-decoration:underline}

/* ---- The one button ---- */
.pill{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;background:var(--accent);color:var(--ink);text-decoration:none;padding:12px 26px;border-radius:980px}
.pill:hover{background:var(--ink);color:var(--paper)}
.bar .pill{padding:8px 18px;font-size:11px}

/* ---- Statement (hero) ---- */
.statement{padding:88px 0 56px}
.kicker{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-text);margin-bottom:22px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(52px,9vw,104px);line-height:0.98;letter-spacing:-2.5px;margin-bottom:26px}
.lede{font-size:23px;line-height:1.5;color:var(--ink-60);max-width:560px;margin-bottom:34px}
.actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.textlink{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0.6px}

/* ---- Section label: numbered, like a contents page ---- */
.sec{padding:54px 0 8px}
.sec-label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:26px}
.sec-label .num{color:var(--accent-text)}

/* ---- Prose ---- */
.prose p{margin-bottom:22px}
.sec .prose>p:last-child{margin-bottom:0}
.prose strong{font-weight:600}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.6vw,42px);letter-spacing:-1px;line-height:1.12;margin-bottom:18px}

/* ---- Index list: the card-killer ---- */
.index{list-style:none}
.index li{border-bottom:1px solid var(--hair)}
.index>li>a,.index .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 2px;text-decoration:none;color:var(--ink)}
.index .t{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-0.3px}
.index .d{font-family:var(--sans);font-size:12.5px;color:var(--ink-45);text-align:right;flex-shrink:0;max-width:46%}
.index>li>a:hover .t{color:var(--accent-text)}
.index>li>a:hover .d::after,.index>li>a .d::after{content:" \2192"}

/* ---- Numbered steps ---- */
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--accent-text);letter-spacing:1px}
.steps .t{font-family:var(--serif);font-size:21px;font-weight:600}
.steps .d{font-family:var(--sans);font-size:13px;color:var(--ink-60);margin-left:auto;text-align:right;max-width:50%}

/* ---- Colophon: clients as typeset text ---- */
.colophon{font-size:21px;line-height:1.85;color:var(--ink-60)}
.colophon b{color:var(--ink);font-weight:600}

/* ---- Pull quote ---- */
.quote{font-size:clamp(24px,3.6vw,31px);line-height:1.35;font-style:italic;letter-spacing:-0.3px;border-left:2px solid var(--accent);padding-left:24px;margin:8px 0 10px}
.cite{font-family:var(--sans);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-45);padding-left:26px}

/* ---- Comma index (the 28 industries) ---- */
.comma{font-family:var(--sans);font-size:13.5px;line-height:2.05;color:var(--ink-60)}
.comma a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.comma a:hover{color:var(--accent-text);border-bottom-color:var(--accent-text)}

/* ---- CTA block ---- */
.cta{padding:72px 0 84px;text-align:left}
.cta h2{font-size:clamp(38px,6vw,58px);letter-spacing:-1.6px}
.cta .sub{font-family:var(--sans);font-size:13px;color:var(--ink-60);margin-top:22px;letter-spacing:0.4px}

/* ---- Footer: a typeset index ---- */
footer{border-top:1px solid var(--ink);margin-top:30px}
.foot-in{max-width:880px;margin:0 auto;padding:34px 24px 56px;font-family:var(--sans);font-size:12.5px;line-height:2;color:var(--ink-60)}
.foot-in b{color:var(--ink);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:11px}
.foot-in a{color:var(--ink-60)}
.foot-in a:hover{color:var(--accent-text)}
.foot-id{color:var(--ink);font-size:13px;margin-bottom:14px}

/* ---- Mobile ---- */
@media(max-width:600px){
  body{font-size:18px}
  .statement{padding:56px 0 40px}
  h1{letter-spacing:-1.5px}
  .lede{font-size:20px}
  .index>li>a,.index .row{flex-direction:column;gap:3px;align-items:flex-start}
  .index .d{text-align:left;max-width:100%}
  .steps .d{max-width:100%;margin-left:0}
  .steps li{flex-wrap:wrap}
  .bar-links{margin-left:0}
}

.bar .logo img{height:44px;width:auto;display:block}
.bar .logo{text-decoration:none}

/* ---- legacy var bridge (heads with inline styles, e.g. manifesto) ---- */
:root{--font-serif:var(--serif);--font-display:var(--serif);--black:var(--ink);--gray-400:#737373;--gray-500:#525252;--gray-700:#303030}
.team-photo{width:140px;height:140px;object-fit:cover;border-radius:50%;filter:grayscale(1)}
.manifesto-text{font-family:var(--serif);font-weight:600;font-size:clamp(40px,8vw,96px);letter-spacing:-3px;line-height:1.02}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-text)}
.mft-hero{max-width:880px;margin:0 auto}
/* ---- nav details menus ---- */
.menu{position:relative;display:inline-block}
.menu summary{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;list-style:none;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:none}
.menu summary::after{content:" \2193";color:var(--accent-text)}
.menu[open] summary{color:var(--accent-text)}
.menu[open] summary::after{content:" \2191"}
.menu .panel{position:absolute;left:0;top:calc(100% + 12px);background:var(--paper);border:1px solid var(--ink);padding:18px 22px;min-width:320px;max-width:calc(100vw - 48px);z-index:50}
.menu .panel a{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:0.4px;text-transform:none;color:var(--ink);text-decoration:none;padding:5px 0;font-weight:500}
.menu .panel a:hover{color:var(--accent-text);text-decoration:underline}
.menu .panel a.all{margin-top:8px;border-top:1px solid var(--hair);padding-top:10px;color:var(--accent-text)}
.panel.cols2{column-count:2;column-gap:34px;min-width:480px}
.panel.cols2 a.all{column-span:all}
@media(max-width:700px){.menu .panel{position:static;border:none;border-left:2px solid var(--accent);padding:10px 0 4px 14px;min-width:0}.panel.cols2{column-count:1;min-width:0}}
/* ---- grouped directory (industries index) ---- */
.dir{display:grid;gap:13px}
.dir-row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline}
.dir-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-text)}
.dir-row .comma{line-height:1.9}
@media(max-width:600px){.dir-row{grid-template-columns:1fr;gap:3px}.dir{gap:18px}}
/* ---- forms ---- */
.formwrap label{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-60);margin:18px 0 6px}
.formwrap input[type=text],.formwrap input[type=email],.formwrap input[type=tel],.formwrap select,.formwrap textarea{width:100%;background:var(--paper);border:1px solid var(--hair);border-bottom:1px solid var(--ink);padding:12px 12px;font-family:var(--serif);font-size:18px;color:var(--ink)}
.formwrap textarea{min-height:140px}
.formwrap input:focus,.formwrap textarea:focus,.formwrap select:focus{outline:none;border-bottom-color:var(--accent)}
.formwrap button,.formwrap input[type=submit]{margin-top:24px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;background:var(--accent);color:var(--ink);border:none;padding:14px 30px;border-radius:980px;cursor:pointer}
.formwrap button:hover{background:var(--ink);color:var(--paper)}
.formwrap .hidden{display:none}
/* ---- faq ---- */
.faq dt{font-family:var(--serif);font-size:21px;font-weight:600;margin-top:18px}
.faq dd{font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--ink-60);margin:6px 0 0}
/* ---- figure ---- */
.fig{margin:10px 0 6px;border:1px solid var(--ink);padding:10px;background:#fff}
.fig img{width:100%}
.fig figcaption{font-family:var(--sans);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-45);padding-top:9px}

/* ---- titled pairs (challenge lists etc.) ---- */
.pairs dt{font-family:var(--serif);font-size:21px;font-weight:600;margin-top:18px}
.pairs dd{font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--ink-60);margin:6px 0 0}
.prose h3{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-0.3px;margin:28px 0 8px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-0.3px;margin:30px 0 8px;line-height:1.25}
/* ---- essay headings (long-form landing pages) ---- */
.prose h2.essay{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-0.4px;line-height:1.2;margin:40px 0 10px}
.prose h2.essay:first-child{margin-top:0}
/* ---- article prose (journal posts) ---- */
.prose h2{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-0.4px;line-height:1.2;margin:40px 0 10px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:7px 0;line-height:1.75}
.tm{font-size:0.55em;vertical-align:super;letter-spacing:0}
/* ---- form validation states ---- */
.formwrap .form-group.error input,.formwrap .form-group.error select{border-bottom-color:#a43a2a}
.formwrap .form-group.error label{color:#a43a2a}
.submit-error{display:none;font-family:var(--sans);font-size:13px;color:#a43a2a;margin-top:14px}
.submit-error.show{display:block}
/* ---- headline wrap quality ---- */
main h1,h1.manifesto-text,.cta h2,.prose h2,.prose h3,.kicker,.sec-label,.index .t,.faq dt,.pairs dt{text-wrap:balance}
.lede,.quote,.prose p,.faq dd,.index .d,.cta .sub{text-wrap:pretty}
/* ---- homepage hero monument ---- */
.statement h1[data-fit="off"]{font-size:clamp(40px,7.8vw,90px)}
/* ---- animated hero headline ------------------------------------------------
   The variable word sits on its own line above the constant, so nothing after
   it can ever be pushed: "Built to Perform." is a separate block that never
   moves. .ha-var keeps exactly one line of height even while empty, which is
   what holds the composition still on the opening frame.
   Both lines fit inside the normal 680px measure, so the hero keeps the site's
   own column width. --------------------------------------------------------- */
.hero-anim{line-height:0.98}
.hero-anim .ha-var{display:block;min-height:0.98em}
.hero-anim .ha-const{display:block}
.hero-anim .ha-word{display:inline-block;will-change:opacity,transform,filter}
/* Below 360px the 40px floor makes "Built to Perform." wrap, which would put a
   second constant line under the word and break the one-line promise. The
   column is 100vw less 24px left and 44px right padding; 7.6 is the string's
   width-to-font-size ratio plus a safety margin. Only ever smaller than the
   floor, never larger. */
@media(max-width:359px){
  .statement h1[data-fit="off"].hero-anim{font-size:min(40px,calc((100vw - 68px)/7.6))}
}


/* ---- typewriter cursor ----
   Created by JS only, so the no-JS and reduced-motion views never see it.
   The green echoes the dot in the iD mark. Solid while typing, blinking
   while idle, fades out for good after "Everything" lands. */
.hero-anim .ha-cursor{display:inline-block;width:0.05em;height:0.74em;margin-left:0.07em;background:var(--accent);transform:translateY(0.06em);animation:ha-blink 1.06s steps(1,end) infinite}
.hero-anim .ha-cursor.typing{animation:none;opacity:1}
.hero-anim .ha-cursor.done{animation:none;opacity:0;transition:opacity 0.5s ease}
@keyframes ha-blink{0%,54%{opacity:1}55%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-anim .ha-cursor{display:none}}


/* ==== accessibility: skip link + visible keyboard focus ==== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0.5px;padding:12px 20px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:3px}
.formwrap input:focus-visible,.formwrap textarea:focus-visible,.formwrap select:focus-visible,.labs-form .form-group input:focus-visible,.wrap-quote .form-group input:focus-visible,.wrap-quote .form-group select:focus-visible,.wrap-quote .form-group textarea:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

/* ==== chat widget: keep the hero CTA clear on narrow phones ====
   The injected chat stylesheet loads after this one, so these selectors
   carry extra specificity instead of using importance. ==== */
@media(max-width:380px){
  html body .chat-cta-label,html body .chat-proactive{display:none}
  html body .chat-toggle{transform:scale(0.85);right:12px;bottom:12px}
}

/* ==== mobile navigation (<=880px) ==== */
.nav-burger{display:none;background:none;border:1px solid var(--ink,#0d0d0d);border-radius:980px;padding:9px 16px;min-height:44px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink,#0d0d0d);cursor:pointer;align-items:center;gap:8px;margin-left:auto}
.nav-burger .bars{display:inline-block;width:16px}
.nav-burger .bars span{display:block;height:2px;background:var(--ink,#0d0d0d);margin:3px 0}
@media(max-width:880px){
  .bar-in nav.bar-links{display:none}
  .bar-in>a.pill{display:none}
  .nav-burger{display:flex}
  .bar-in{flex-wrap:nowrap}
}
.mnav{position:fixed;inset:0;background:var(--paper,#f9f7f1);z-index:9998;transform:translateX(102%);transition:transform .38s cubic-bezier(.16,1,.3,1);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:18px 22px 34px}
.mnav.open{transform:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mnav-close{background:none;border:1px solid var(--ink);border-radius:980px;width:40px;height:40px;font-size:18px;line-height:1;color:var(--ink);cursor:pointer}
.mnav a.big{display:block;font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-0.5px;color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(13,13,13,0.14)}
.mnav details{border-bottom:1px solid rgba(13,13,13,0.14)}
.mnav summary{list-style:none;cursor:pointer;font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-0.5px;color:var(--ink);padding:13px 0;display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font-family:var(--sans);font-size:22px;font-weight:400;color:var(--ink-60,#6b6b5f)}
.mnav details[open] summary::after{content:"\2212"}
.mnav .sub{padding:2px 0 16px}
.mnav .sub .msublabel{display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-text);padding:14px 0 4px;}
.mnav .sub .msublabel:first-child{padding-top:4px}
.mnav .sub a{display:block;font-family:var(--sans);font-size:15px;color:var(--ink);text-decoration:none;padding:7px 0 7px 2px}
.mnav .sub a.all{color:var(--accent-text,#3e8a14);font-weight:600}
.mnav-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.mnav-foot{margin-top:auto;padding-top:30px;font-family:var(--sans);font-size:12px;letter-spacing:0.6px;color:var(--ink-60,#6b6b5f)}
.mnav-foot a{color:inherit}
body.mnav-lock{overflow:hidden}

/* ==== booking slide-out (Calendly) ==== */
.book-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;background:var(--ink,#0d0d0d);color:var(--paper,#f9f7f1);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:16px 9px;border:none;border-radius:6px 0 0 6px;cursor:pointer;z-index:9600;box-shadow:0 6px 22px rgba(13,13,13,0.22)}
.book-ovl{position:fixed;inset:0;background:rgba(13,13,13,0.38);opacity:0;pointer-events:none;transition:opacity .3s;z-index:9980}
.book-ovl.show{opacity:1;pointer-events:auto}
.book-panel{position:fixed;top:0;right:0;height:100%;width:min(480px,100vw);background:var(--paper,#f9f7f1);border-left:1px solid var(--ink,#0d0d0d);transform:translateX(103%);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:9990;display:flex;flex-direction:column}
.book-panel.open{transform:none}
.book-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--ink,#0d0d0d)}
.book-head h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-0.3px;color:var(--ink)}
.book-close{background:none;border:1px solid var(--ink);border-radius:980px;width:36px;height:36px;font-size:16px;color:var(--ink);cursor:pointer}
.book-body{flex:1;min-height:0}
.book-body iframe{width:100%;height:100%;border:0}
/* mobile tap target: logo link */
.bar .logo{display:inline-flex;align-items:center;min-height:44px}

/* ---- grouped mega-dropdown (Services / Industries) ---- */
.menu .panel.grouped{display:flex;flex-wrap:wrap;gap:0 46px;min-width:560px}
.menu .panel.grouped .mcol{display:flex;flex-direction:column;gap:18px;flex:1;min-width:200px}
.menu .panel.grouped .mgroup{display:flex;flex-direction:column}
.menu .panel.grouped .mglabel{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-text);padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--hair)}
.menu .panel.grouped a{padding:4px 0}
.menu .panel.grouped a.megafoot{flex-basis:100%;width:100%;margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);font-weight:600;color:var(--accent-text)}
.menu .panel.grouped a.megafoot:hover{color:var(--ink)}
@media(max-width:700px){.menu .panel.grouped{flex-direction:column;min-width:0;gap:16px}.menu .panel.grouped .mcol{min-width:0}}
/* ---- custom builds callout (Print page) ---- */
.callout-box{border:1px solid var(--ink);border-left:4px solid var(--accent);padding:26px 30px;background:rgba(141,198,63,0.04)}
.callout-kicker{display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.callout-text{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ink);margin:0}
@media(max-width:700px){.callout-box{padding:20px 22px}.callout-text{font-size:16px}}
/* ---- iDesign Labs interest form ---- */
.labs-form{max-width:640px;margin-top:8px}
.labs-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.labs-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:8px}
.labs-check{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer}
.labs-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.labs-submit{margin-top:24px;border:none;cursor:pointer;font-family:var(--sans)}
.labs-disclaimer{font-family:var(--sans);font-size:12.5px;color:rgba(13,13,13,0.5);font-style:italic;margin:0;max-width:640px}
@media(max-width:600px){.labs-form-row{grid-template-columns:1fr}.labs-checks{grid-template-columns:1fr}}

/* labs form-group: label above input */
.labs-form .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.labs-form .form-group label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:rgba(13,13,13,0.6)}
.labs-form .form-group input[type=text],.labs-form .form-group input[type=email]{font-family:var(--sans);font-size:15px;padding:11px 14px;border:1px solid rgba(13,13,13,0.2);background:var(--paper);color:var(--ink);border-radius:0}
.labs-form .form-group input:focus{outline:none;border-color:var(--accent)}
/* ---- All Industries directory: compact multi-column ---- */
.index.compact{columns:3;column-gap:40px}
.index.compact li{break-inside:avoid;border-bottom:1px solid rgba(13,13,13,0.08)}
.index.compact li a{padding:11px 0;display:block}
.index.compact .t{font-size:17px}
@media(max-width:760px){.index.compact{columns:2;column-gap:24px}}
@media(max-width:480px){.index.compact{columns:1}}

/* ---- Generic image slideshow + lightbox (shared: any page with .img-slideshow) ---- */
.img-slideshow{position:relative;width:100%;max-width:520px;margin:24px auto 4px;aspect-ratio:4/3;background:var(--paper);border:1px solid rgba(13,13,13,0.15);overflow:hidden}
.iss-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.5s ease;display:flex;align-items:center;justify-content:center;padding:28px;cursor:zoom-in;z-index:0}
.iss-slide.active{opacity:1;z-index:1}
.iss-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.iss-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(249,247,241,0.92);border:1px solid rgba(13,13,13,0.15);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:2;transition:background 0.2s}
.iss-btn:hover{background:#fff}
.iss-prev{left:10px}
.iss-next{right:10px}
.iss-counter{position:absolute;bottom:10px;right:14px;font-family:var(--sans);font-size:11px;color:rgba(13,13,13,0.45);z-index:2;background:rgba(249,247,241,0.85);padding:2px 7px}
.img-slideshow-caption{font-family:var(--sans);font-size:12.5px;color:rgba(13,13,13,0.5);text-align:center;margin:10px 0 0}

.lightbox{position:fixed;inset:0;background:rgba(13,13,13,0.94);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:opacity 0.25s ease;padding:40px;box-sizing:border-box}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-img{max-width:88vw;max-height:82vh;object-fit:contain;background:#fff;padding:34px;box-sizing:border-box}
.lightbox-close{position:absolute;top:22px;right:26px;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;font-family:var(--sans);padding:6px 10px}
.lightbox-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-family:var(--sans);font-size:12px}
@media(max-width:640px){.img-slideshow{max-width:100%}.lightbox-img{padding:18px}}

/* ---- Photo slideshow variant (wider frame, dark backdrop, for real photography like vehicle wraps and portfolio work) ---- */
.photo-slideshow{aspect-ratio:4/3;background:#0d0d0d;max-width:none}
.photo-slideshow .iss-slide{padding:0}
.photo-slideshow .iss-slide img{width:100%;height:100%;object-fit:cover}
/* mixed-aspect galleries: letterbox instead of cropping signage or product shots */
.photo-slideshow.fit-contain .iss-slide img{object-fit:contain}

/* ---- Vehicle wrap quote form (Printing page) ---- */
.midcta{border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);padding:38px 0 30px;margin:56px 0 0}
.midcta h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,4vw,34px);letter-spacing:-0.8px;line-height:1.13;margin:0}
.midcta .midcta-s{font-family:var(--sans);font-size:14.5px;color:var(--ink-60);line-height:1.55;margin:12px 0 0;max-width:54ch}
.midcta .actions{margin-top:24px}
.midcta .index{margin-top:28px;padding-left:0}
.midcta .index li:last-child{border-bottom:none}
.midcta .index .t{font-size:20px}
.wrap-quote.incl p:last-child{margin-bottom:0}
.wrap-quote{border:1px solid var(--ink);border-left:4px solid var(--accent);padding:30px 32px;background:rgba(141,198,63,0.04);margin-top:28px}
.wrap-quote h3{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-0.3px;margin:0 0 8px}
.wrap-quote p{font-family:var(--sans);font-size:15px;color:rgba(13,13,13,0.6);margin:0 0 22px;line-height:1.5}
.wrap-quote-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.wrap-quote .form-group{display:flex;flex-direction:column;gap:6px}
.wrap-quote .form-group label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:rgba(13,13,13,0.6)}
.wrap-quote .form-group input,.wrap-quote .form-group select,.wrap-quote .form-group textarea{font-family:var(--sans);font-size:15px;padding:11px 14px;border:1px solid rgba(13,13,13,0.2);background:var(--paper);color:var(--ink);border-radius:0;width:100%;box-sizing:border-box}
.wrap-quote .form-group textarea{resize:vertical;font-family:var(--sans)}
.wrap-quote .form-group input:focus,.wrap-quote .form-group select:focus,.wrap-quote .form-group textarea:focus{outline:none;border-color:var(--accent)}
.wrap-quote-submit{margin-top:6px;border:none;cursor:pointer;font-family:var(--sans)}
@media(max-width:640px){.wrap-quote-form-row{grid-template-columns:1fr}.wrap-quote{padding:24px 22px}}

/* ---- Rotating client testimonials (homepage "What clients say") ---- */
.testi{position:relative}
.testi-stars{color:var(--accent-text);font-size:14px;letter-spacing:3px;margin-bottom:2px}
.testi-body{transition:opacity 0.4s ease}
.testi-body.is-hidden{opacity:0}
.testi-dots{display:flex;gap:8px;margin-top:20px}
.testi-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:none;background:var(--hair);cursor:pointer;position:relative}
.testi-dots button::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.testi-dots button.active{background:var(--accent-text)}
.testi-dots button:hover{background:var(--accent-text)}

/* ---- v152: mobile ergonomics ---- */
@media(max-width:700px){
  /* the fixed side tab overlapped the right edge of the type column and clipped
     line ends; the bottom-right corner is already taken by the chat widget, so
     keep the tab where it is and inset the column past it instead */
  .page,.page-wide{padding-right:44px}
  .pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .iss-btn{width:44px;height:44px}
  .actions .textlink{display:inline-block;padding:11px 0}
  .kicker a{display:inline-block;padding:6px 0}
}
@media(max-width:600px){
  /* team rows kept a 140px portrait beside the name, squeezing it to ~173px */
  .team-row{flex-direction:column;align-items:flex-start;gap:14px}
  .team-photo{width:104px;height:104px}
}
@media(max-width:400px){
  /* 52px floor was fragmenting hero headlines into 4-5 short lines */
  h1{font-size:clamp(42px,11vw,104px)}
}

/* ---- v172: scroll-reveal system. Classes are applied by site.js only when
   motion is allowed, so without JS (or with reduced motion) nothing is hidden. ---- */
.rvl{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0ms)}
.rvl.in{opacity:1;transform:none}
.rulefx{position:relative}
.rulefx::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.rulefx.in::after{animation:rulesweep 1.25s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes rulesweep{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
#readbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:200;transition:width .12s linear}
@media print{.rvl{opacity:1;transform:none;transition:none}.rulefx::after{display:none}#readbar{display:none}}

/* ---- v173: shared portfolio/work card grid (was inline on portfolio.html) ---- */
.pfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px 26px;margin-top:10px}
.pfcard{display:block;text-decoration:none;color:var(--ink)}
.pfcard img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;background:rgba(13,13,13,.06)}
.pfgrid.sites .pfcard img{aspect-ratio:8/5}
.pfcard .t{display:block;margin-top:13px;font-family:var(--serif);font-size:25px;line-height:1.12}
.pfcard .d{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-60)}
.pfcard:hover .t,.pfcard:focus-visible .t{color:var(--accent-text)}