/* ===========================================================================
   OPTSY — COMPONENTS
   Every reusable section block, in the order a page tends to use them.
   Load after optsy-core.css.

   Each component's media queries sit with the component, not in a global
   block at the end. As templates accumulate, a single shared breakpoint
   section becomes impossible to reason about.

   Class names match the existing Features template wherever one already
   exists, so slick configs and any current handlers keep working.
   =========================================================================== */


/* ===========================================================================
   HERO — .op-hero
   Copy and form on the left, media on the right. The Features template runs
   a product video in the panel; industry templates run the trade photograph.
   =========================================================================== */
.op-hero{
  background:
    radial-gradient(1100px 520px at 82% 12%, rgba(30,63,109,.55), transparent 62%),
    linear-gradient(180deg, var(--op-navy-deep) 0%, var(--op-navy) 100%);
  color:var(--op-on-dark);
  padding:76px 0 84px;
  position:relative;
  overflow:hidden;
}
.op-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}

.op-hero .hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}

.op-hero .eyebrow{
  display:inline-block;
  font-size:.8125rem;font-weight:600;letter-spacing:.03em;
  color:var(--op-on-dark-accent);
  margin-bottom:14px;
}
.op-hero h1{color:#fff;margin-bottom:18px}
.op-hero .hero-lede{
  font-size:1.125rem;line-height:1.62;
  color:var(--op-on-dark-muted);
  max-width:56ch;margin:0 0 28px;
}
.op-hero .hero-note{margin:14px 0 0;font-size:.8125rem;color:var(--op-on-dark-faint)}

.op-hero .hero-panel{position:relative}
.op-hero .hero-media{
  border-radius:var(--op-r-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--op-shadow-hero);
  aspect-ratio:16/10;
  background:var(--op-navy-soft);
}
.op-hero .hero-media img,
.op-hero .hero-media iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}

@media (max-width:1024px){
  .op-hero{padding:64px 0 72px}
  .op-hero .hero{grid-template-columns:1fr;gap:40px}
  .op-hero .hero-lede{max-width:none}
}
@media (max-width:680px){
  .op-hero{padding:52px 0 60px}
  .op-hero .hero{gap:32px}
}


/* ===========================================================================
   SIBLING-PAGE SWITCHER — .op-below-hero / .dd-*
   The "Browse all …" menu under the hero. Features uses it for features,
   Industries for trades. Same component, different links.
   =========================================================================== */
.op-below-hero{
  padding:22px 0;
  border-bottom:1px solid var(--op-line-soft);
  background:var(--op-white);
}
.dd-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dd{position:relative}

.dd-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;
  border:1px solid var(--op-line);
  border-radius:var(--op-r-sm);
  background:var(--op-white);color:var(--op-ink);
  font-weight:600;font-size:.9375rem;cursor:pointer;
  transition:border-color var(--op-ease),background-color var(--op-ease);
}
.dd-btn::after{
  content:"";width:8px;height:8px;
  border-right:2px solid var(--op-muted);
  border-bottom:2px solid var(--op-muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.dd-btn:hover{border-color:#c2d2e4;background:var(--op-tint)}
.dd-btn[aria-expanded="true"]{border-color:var(--op-accent)}
.dd-btn[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}

.dd-panel{
  display:none;
  position:absolute;top:calc(100% + 8px);left:0;z-index:40;
  min-width:320px;padding:10px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  box-shadow:var(--op-shadow-lift);
}
.dd-panel.open{display:block}
.dd-panel a{
  display:block;padding:9px 12px;
  border-radius:var(--op-r-sm);
  color:var(--op-ink);font-size:.9375rem;
}
.dd-panel a:hover{background:var(--op-tint);color:var(--op-accent);text-decoration:none}
.dd-panel .dd-all-services{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--op-line-soft);
  color:var(--op-accent);font-weight:600;
}
.dd-note{margin:0;color:var(--op-muted);font-size:.875rem}

@media (max-width:680px){
  .dd-wrap{gap:12px}
  .dd{width:100%}
  .dd-btn{width:100%;justify-content:space-between}
  .dd-panel{min-width:0;width:100%}
}


/* ===========================================================================
   CARD GRID — .grid-3 / .fcard
   =========================================================================== */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.fcard{
  padding:30px 28px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  transition:border-color var(--op-ease),box-shadow var(--op-ease);
}
.fcard:hover{border-color:#c8d8ea;box-shadow:var(--op-shadow-card)}
.fcard .icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  border-radius:var(--op-r-sm);
  background:var(--op-tint);
}
.fcard .icon img{width:22px;height:22px}
.fcard p{font-size:.9375rem;line-height:1.65;margin:0}

@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .grid-3,.grid-2{grid-template-columns:1fr;gap:16px}
}


/* ===========================================================================
   CAROUSEL PRIMITIVE — .op-carousel
   One track implementation. Cards per view is set with --op-cards, so a new
   carousel on a future template needs a class for its cards and nothing else.

   Slick note: this is native scroll-snap, no dependency. If you'd rather keep
   slick, the child markup is unchanged — init slick on the track and drop
   .op-carousel from the element.
   =========================================================================== */
.op-carousel-wrap{position:relative}

.op-carousel{
  --op-cards:3;
  --op-card-gap:22px;
  display:flex;
  gap:var(--op-card-gap);
  align-items:stretch;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 4px 18px;
  margin:0 -4px;
  scrollbar-width:none;
}
.op-carousel::-webkit-scrollbar{display:none}

.op-carousel > *{
  flex:0 0 calc((100% - (var(--op-cards) - 1) * var(--op-card-gap)) / var(--op-cards));
  scroll-snap-align:start;
  display:flex;
}
.op-carousel > * > *{width:100%}

/* arrows sit above the track, right aligned. .car-btn is the existing
   Features template class; .op-industries-arrow is kept as an alias. */
.car-btn,
.op-industries-arrow{
  position:absolute;top:-62px;
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--op-line);
  border-radius:50%;
  background:var(--op-white);color:var(--op-ink);
  cursor:pointer;
  transition:border-color var(--op-ease),color var(--op-ease);
}
.car-btn:hover,
.op-industries-arrow:hover{border-color:var(--op-accent);color:var(--op-accent)}
.car-btn svg,
.op-industries-arrow svg{width:20px;height:20px}

.car-btn.prev,.op-industries-prev{right:60px}
.car-btn.next,.op-industries-next{right:0}

.car-btn[disabled],
.op-industries-arrow[disabled]{opacity:.35;cursor:default}
.car-btn[disabled]:hover,
.op-industries-arrow[disabled]:hover{border-color:var(--op-line);color:var(--op-ink)}

@media (max-width:1024px){
  .op-carousel{--op-cards:2}
}
@media (max-width:680px){
  /* one card with a peek of the next, and swipe instead of arrows */
  .op-carousel > *{flex:0 0 84%}
  .car-btn,.op-industries-arrow{display:none}
  .op-carousel-wrap{margin-left:calc(var(--op-gutter-sm) * -1);margin-right:calc(var(--op-gutter-sm) * -1)}
  .op-carousel{padding-left:var(--op-gutter-sm);padding-right:var(--op-gutter-sm);margin:0}
}


/* ===========================================================================
   FEATURE CAROUSEL — .car-wrap / .platform-carousel / .slide
   On a Feature page this points at industries; on an Industry page it points
   at features. Same component either way.
   =========================================================================== */
.car-wrap{margin-top:52px}
.platform-carousel{--op-card-gap:20px}

.slide{
  display:flex;flex-direction:column;
  padding:28px 26px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  min-height:248px;
}
.slide .icon{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  border-radius:var(--op-r-sm);
  background:var(--op-tint);
}
.slide .icon img{width:20px;height:20px}
.slide p{
  font-size:.9375rem;line-height:1.65;
  color:var(--op-body);
  flex:1 1 auto;margin:0 0 18px;
}
.slide .more{font-size:.9375rem;font-weight:600;color:var(--op-accent)}

@media (max-width:680px){
  .slide{min-height:0}
}


/* ===========================================================================
   IMAGE CARD CAROUSEL — .op-industries-* 
   Used for "other industries" on an Industry page and "industries we serve"
   on a Feature page.
   =========================================================================== */
.op-industries-heading{text-align:center;margin-bottom:52px}
.op-industries-intro{max-width:62ch;margin:0 auto;font-size:1.0625rem}
.op-industries-intro p{margin:0}

.op-industry-card{
  height:100%;
  display:flex;flex-direction:column;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  overflow:hidden;
  transition:border-color var(--op-ease),box-shadow var(--op-ease);
}
.op-industry-card:hover{border-color:#c8d8ea;box-shadow:var(--op-shadow-card)}

.op-industry-image{display:block;aspect-ratio:16/9;background:var(--op-tint)}
.op-industry-image img{width:100%;height:100%;object-fit:cover}

.op-industry-card-content{
  padding:24px 24px 26px;
  display:flex;flex-direction:column;flex:1 1 auto;
}
.op-industry-card-content h3{margin-bottom:8px;font-size:1.0625rem}
.op-industry-card-content h3 a{color:var(--op-ink)}
.op-industry-card-content h3 a:hover{color:var(--op-accent);text-decoration:none}

.op-industry-description{
  font-size:.9375rem;line-height:1.65;
  color:var(--op-body);
  flex:1 1 auto;margin-bottom:18px;
}
.op-industry-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9375rem;font-weight:600;color:var(--op-accent);
}
.op-industry-link svg{width:17px;height:17px;transition:transform var(--op-ease)}
.op-industry-link:hover{text-decoration:none}
.op-industry-link:hover svg{transform:translateX(3px)}

@media (max-width:680px){
  .op-industries-heading{margin-bottom:32px}
}


/* ===========================================================================
   TABBED LONG-FORM COPY — .about-page-content / .apc-*
   Holds the deep SEO copy without stacking it down the page.
   =========================================================================== */
.about-page-content{background:var(--op-white)}

.apc-intro{max-width:56ch;margin:0 auto 40px}
.apc-intro .h2{margin-bottom:0}

.apc-tabs{
  display:flex;gap:4px;flex-wrap:wrap;
  justify-content:center;
  border-bottom:1px solid var(--op-line);
  margin-bottom:44px;
}
.apc-tab{
  padding:14px 20px;
  border:0;background:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  color:var(--op-muted);font-weight:600;font-size:.9375rem;
  cursor:pointer;
  transition:color var(--op-ease),border-color var(--op-ease);
}
.apc-tab:hover{color:var(--op-ink)}
.apc-tab.active{color:var(--op-navy);border-bottom-color:var(--op-navy)}

.apc-panel{display:none}
.apc-panel.active{display:block}

.apc-panel-head{max-width:68ch;margin:0 auto 32px;text-align:center}
.apc-panel-head h3{font-size:1.5rem;line-height:1.3}
.apc-panel-head p{color:var(--op-body)}

.apc-copy{columns:2;column-gap:56px}
.apc-copy > :first-child{margin-top:0}
.apc-copy h4{color:var(--op-ink);break-after:avoid;margin-top:1.6em}
.apc-copy p{font-size:.9375rem;line-height:1.72;break-inside:avoid}

/* single-column variant for short panels */
.apc-copy--single{columns:1;max-width:68ch;margin:0 auto}

@media (max-width:1024px){
  .apc-copy{column-gap:40px}
}
@media (max-width:860px){
  .apc-copy{columns:1;max-width:68ch;margin:0 auto}
  .apc-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .apc-tabs::-webkit-scrollbar{display:none}
  .apc-tab{flex:0 0 auto}
}
@media (max-width:680px){
  .apc-tabs{margin-bottom:32px}
  .apc-panel-head{text-align:left}
  .apc-panel-head h3{font-size:1.25rem}
}


/* ===========================================================================
   CTA BAND — .op-cta-band
   Mid-page conversion point.
   =========================================================================== */
.op-cta-band{
  background:linear-gradient(100deg, var(--op-navy) 0%, var(--op-navy-soft) 100%);
  color:#fff;
  padding:64px 0;
}
.op-cta-band .cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
}
.op-cta-band h2{
  color:#fff;
  font-size:clamp(1.4rem,2.3vw,1.85rem);
  line-height:1.32;letter-spacing:-.015em;
  max-width:34ch;margin:0;
}
.op-cta-band p{
  color:var(--op-on-dark-muted);
  margin:10px 0 0;max-width:48ch;font-size:.9375rem;
}

@media (max-width:1024px){.op-cta-band{padding:56px 0}}
@media (max-width:860px){.op-cta-band .cta-inner{flex-direction:column;align-items:flex-start}}
@media (max-width:680px){.op-cta-band{padding:48px 0}}


/* ===========================================================================
   TESTIMONIALS — .op-voices
   =========================================================================== */
.op-voices{background:var(--op-tint)}
.op-voices-slider{--op-card-gap:22px}

.op-voice{
  display:flex;flex-direction:column;
  margin:0;
  padding:30px 28px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
}
.op-voice blockquote{
  margin:0 0 22px;
  font-size:.9375rem;line-height:1.7;
  color:var(--op-ink);
  flex:1 1 auto;
}
.op-voice figcaption{
  display:flex;align-items:center;gap:12px;
  padding-top:20px;
  border-top:1px solid var(--op-line-soft);
}
.op-voice .initials{
  width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--op-navy);color:#fff;
  font-size:.8125rem;font-weight:600;
}
.op-voice .who{font-weight:600;color:var(--op-ink);font-size:.9375rem;line-height:1.3}
.op-voice .role{color:var(--op-muted);font-size:.8125rem;line-height:1.3}


/* ===========================================================================
   RESOURCES / BLOG — .op-resources
   =========================================================================== */
.op-resources{background:var(--op-tint)}
.op-resource-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-bottom:40px;
}
.op-resource-card{
  display:flex;flex-direction:column;
  padding:28px 26px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  transition:border-color var(--op-ease),box-shadow var(--op-ease);
}
.op-resource-card:hover{border-color:#c8d8ea;box-shadow:var(--op-shadow-card)}
.op-resource-card time{display:block;font-size:.8125rem;color:var(--op-muted);margin-bottom:12px}
.op-resource-card h3{font-size:1.0625rem;margin-bottom:10px}
.op-resource-card h3 a{color:var(--op-ink)}
.op-resource-card h3 a:hover{color:var(--op-accent);text-decoration:none}
.op-resource-card p{font-size:.9375rem;line-height:1.65;flex:1 1 auto;margin:0}

@media (max-width:1024px){
  .op-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .op-resource-grid{grid-template-columns:1fr;gap:16px}
}


/* ===========================================================================
   FAQ ACCORDION — .op-faqs / .op-faq-*
   =========================================================================== */
.op-faq-list{max-width:840px;margin:0 auto;border-top:1px solid var(--op-line)}
.op-faq-item{border-bottom:1px solid var(--op-line)}

.op-faq-question{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:22px 4px;
  border:0;background:none;text-align:left;cursor:pointer;
  color:var(--op-ink);
}
.op-faq-heading{font-weight:600;font-size:1.0625rem;line-height:1.45}
.op-faq-toggle{
  flex:0 0 24px;
  font-size:1.375rem;font-weight:400;line-height:1;
  color:var(--op-muted);text-align:center;
  transition:transform .2s ease,color .2s ease;
}
.op-faq-question[aria-expanded="true"] .op-faq-toggle{transform:rotate(45deg);color:var(--op-accent)}
.op-faq-question:hover .op-faq-heading{color:var(--op-accent)}

.op-faq-answer{padding:0 60px 24px 4px;font-size:.9375rem;line-height:1.72}
.op-faq-answer p{margin:0}

@media (max-width:680px){
  .op-faq-question{padding:18px 0;gap:16px}
  .op-faq-heading{font-size:1rem}
  .op-faq-answer{padding:0 36px 20px 0}
}


/* ===========================================================================
   DEMO — .demo
   Dark closing section wrapping a Gravity Form.
   =========================================================================== */
.demo{
  background:linear-gradient(180deg, var(--op-navy-deep) 0%, var(--op-navy) 100%);
  color:var(--op-on-dark);
}
.demo .kicker{color:var(--op-on-dark-accent)}
.demo h2,.demo .h2{color:#fff}
.demo .section-intro{color:var(--op-on-dark-muted);margin-bottom:36px}
.demo-note{margin:20px 0 0;font-size:.8125rem;color:var(--op-on-dark-faint)}


/* ===========================================================================
   HERO — COMPACT VARIANT — .op-hero--compact
   For pages that lead with a statement rather than a conversion: About,
   Contact, Resources. No media panel, no form, shallower padding.
   =========================================================================== */
.op-hero--compact{padding:64px 0 68px}
.op-hero--compact .hero{display:block}
.op-hero--compact h1{max-width:20ch}
.op-hero--compact .hero-lede{max-width:62ch;margin-bottom:0}
.op-hero--compact .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

@media (max-width:1024px){.op-hero--compact{padding:56px 0 60px}}
@media (max-width:680px){
  .op-hero--compact{padding:44px 0 48px}
  .op-hero--compact h1{max-width:none}
  .op-hero--compact .hero-actions .btn{width:100%}
}


/* ===========================================================================
   STEPS — .op-steps
   Numbered only because the content genuinely is a sequence: raise the job,
   dispatch it, then track it. Do not reuse this for an unordered list.
   =========================================================================== */
.op-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  overflow:hidden;
  background:var(--op-white);
}
.op-step{padding:34px 30px;border-left:1px solid var(--op-line)}
.op-step:first-child{border-left:0}
.op-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-bottom:18px;
  border-radius:50%;
  background:var(--op-navy);color:#fff;
  font-size:.8125rem;font-weight:600;line-height:1;
}
.op-step h3{margin-bottom:8px;font-size:1.0625rem}
.op-step p{font-size:.9375rem;line-height:1.65;margin:0}

@media (max-width:860px){
  .op-steps{grid-template-columns:1fr}
  .op-step{border-left:0;border-top:1px solid var(--op-line)}
  .op-step:first-child{border-top:0}
  .op-step{padding:28px 24px}
}


/* ===========================================================================
   STATS — .op-stats
   Sits on navy. Figure first, label under it.
   =========================================================================== */
.op-stats{
  background:linear-gradient(100deg, var(--op-navy-deep) 0%, var(--op-navy) 100%);
  color:#fff;
  padding:64px 0;
}
.op-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.op-stat{text-align:center;padding:0 12px}
.op-stat-figure{
  font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:700;line-height:1;letter-spacing:-.02em;
  color:#fff;
}
.op-stat-figure span{font-size:.55em;margin-left:2px;color:var(--op-on-dark-accent)}
.op-stat-label{
  margin:12px 0 0;
  font-size:.875rem;
  color:var(--op-on-dark-muted);
}

@media (max-width:860px){
  .op-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
}
@media (max-width:680px){
  .op-stats{padding:48px 0}
}


/* ===========================================================================
   LINK GRID — .op-pill-grid
   A dense set of sibling-page links. Used for the fifteen feature pages on
   the home page, where cards would be too heavy and a carousel too slow.
   =========================================================================== */
.op-pill-grid{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;
}
.op-pill{
  display:inline-flex;align-items:center;
  padding:11px 18px;
  border:1px solid var(--op-line);
  border-radius:999px;
  background:var(--op-white);
  color:var(--op-ink);
  font-size:.9375rem;font-weight:500;
  transition:border-color var(--op-ease),color var(--op-ease),background-color var(--op-ease);
}
.op-pill:hover{
  border-color:var(--op-accent);
  color:var(--op-accent);
  background:var(--op-white);
  text-decoration:none;
}
.op-pill--more{border-color:var(--op-navy);color:var(--op-navy);font-weight:600}
.op-pill--more:hover{background:var(--op-navy);color:#fff;border-color:var(--op-navy)}

@media (max-width:680px){
  .op-pill-grid{justify-content:flex-start}
  .op-pill{font-size:.875rem;padding:10px 15px}
}


/* ===========================================================================
   SPLIT — .op-split
   Two columns at a 7/5 ratio. Contact uses it for form plus details; any
   page can use it for copy plus an aside.
   =========================================================================== */
.op-split{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;
  align-items:start;
}
.op-split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.op-split--reverse .op-split-main{order:2}

.op-split-aside > * + *{margin-top:28px}

@media (max-width:960px){
  .op-split,
  .op-split--even{grid-template-columns:1fr;gap:40px}
  .op-split--reverse .op-split-main{order:0}
}


/* ===========================================================================
   CONTACT DETAILS — .op-contact-list
   Address-style blocks inside a card.
   =========================================================================== */
.op-contact-list{display:grid;gap:18px}
.op-contact-item{
  padding:22px 24px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
}
.op-contact-item h3{font-size:1rem;margin-bottom:8px}
.op-contact-item address{
  font-style:normal;
  font-size:.9375rem;line-height:1.7;
  color:var(--op-body);
}
.op-contact-item address a{display:inline-block}

.alt .op-contact-item{background:var(--op-white)}


/* ===========================================================================
   TIMELINE — .op-timeline
   Ordered because the About story is a chronology. A rule runs down the
   left with a marker per entry.
   =========================================================================== */
.op-timeline{
  position:relative;
  max-width:72ch;
  margin:0 auto;
  padding-left:34px;
  border-left:1px solid var(--op-line);
  list-style:none;
}
.op-timeline > li{position:relative;padding-bottom:38px}
.op-timeline > li:last-child{padding-bottom:0}
.op-timeline > li::before{
  content:"";
  position:absolute;left:-40px;top:7px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--op-white);
  border:2px solid var(--op-navy);
}
.op-timeline-year{
  display:block;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:var(--op-accent);
  margin-bottom:6px;
}
.op-timeline h3{font-size:1.125rem;margin-bottom:10px}
.op-timeline p{font-size:.9375rem;line-height:1.72}

@media (max-width:680px){
  .op-timeline{padding-left:26px}
  .op-timeline > li::before{left:-32px}
}


/* ===========================================================================
   DOWNLOAD CARD — .op-download
   Resources page. Extends the resource card with a file type and a CTA.
   =========================================================================== */
.op-download-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.op-download{
  display:flex;flex-direction:column;
  padding:30px 28px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  transition:border-color var(--op-ease),box-shadow var(--op-ease);
}
.op-download:hover{border-color:#c8d8ea;box-shadow:var(--op-shadow-card)}
.op-download .icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  border-radius:var(--op-r-sm);
  background:var(--op-tint);
  color:var(--op-navy);
}
.op-download .icon svg{width:22px;height:22px}
.op-download h3{margin-bottom:10px;font-size:1.0625rem}
.op-download p{font-size:.9375rem;line-height:1.65;flex:1 1 auto;margin:0 0 20px}
.op-download-meta{
  display:block;
  font-size:.8125rem;color:var(--op-muted);
  margin-bottom:12px;
}
.op-download .btn{align-self:flex-start}

@media (max-width:1024px){
  .op-download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .op-download-grid{grid-template-columns:1fr;gap:16px}
  .op-download .btn{align-self:stretch}
}


/* ===========================================================================
   PROSE — .op-prose
   Plain long-form copy where tabs would be overkill. Measure is capped.
   =========================================================================== */
.op-prose{max-width:68ch;margin:0 auto}
.op-prose h3{margin-top:2em}
.op-prose > :first-child{margin-top:0}
.op-prose p{font-size:1rem;line-height:1.75}
.op-prose ul{padding-left:1.15em;margin:0 0 1.1em}
.op-prose li{margin-bottom:.5em;font-size:1rem;line-height:1.7}


/* ===========================================================================
   SMALL UTILITIES
   Deliberately few. Anything that needs more than one declaration should be
   a named component instead.
   =========================================================================== */

/* headings inside the two dark sections */
.op-stats h2,.op-stats .h2,
.op-stats h3{color:#fff}

/* a lede that should not run the full column width */
.op-lede{max-width:56ch;font-size:1.0625rem}

/* a paragraph that spans both columns above multi-column .apc-copy */
.apc-copy .apc-lead{
  column-span:all;
  margin-bottom:1.6em;
  font-size:1rem;line-height:1.75;
}

/* a form used as the main content of an .op-split column */
.op-split-main .op-form--stack{max-width:none;margin:28px 0 0}
.op-split-main .op-form--stack .gform_footer{justify-content:flex-start}


/* ===========================================================================
   STICKY DEMO CTA + SLIDE-IN DRAWER — .op-sticky-cta / .op-drawer
   Replaces the current theme's .side-buttons / .primary-sidebar behaviour.
   Same idea, rebuilt: a tab pinned to the right edge that slides a form in
   from the right, closes on the cross, on the overlay, or on Escape.

   Sits outside .op-page in the markup so it is never clipped by a section.
   =========================================================================== */

/* ---- the tab ---- */
.op-sticky-cta{
  position:fixed;
  right:0;top:50%;
  transform:translateY(-50%);
  z-index:120;

  display:inline-flex;align-items:center;gap:9px;
  padding:18px 13px;
  border:0;
  border-radius:9px 0 0 9px;
  background:var(--op-yellow);
  color:var(--op-navy-deep);
  font-family:var(--op-font);
  font-weight:600;font-size:.875rem;letter-spacing:.01em;
  cursor:pointer;
  box-shadow:-2px 0 6px rgba(18,36,60,.1), -10px 0 30px -12px rgba(18,36,60,.5);
  transition:background-color .18s ease,color .18s ease,padding-right .18s ease;
}
.op-sticky-cta span{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  white-space:nowrap;
}
.op-sticky-cta svg{width:17px;height:17px;flex:0 0 auto}
.op-sticky-cta:hover{background:var(--op-white);color:var(--op-navy-deep);padding-right:17px}
.op-sticky-cta[aria-expanded="true"]{opacity:0;pointer-events:none}

/* ---- overlay ---- */
.op-drawer-overlay{
  position:fixed;inset:0;z-index:130;
  background:rgba(10,23,41,.55);
  opacity:0;
  transition:opacity .3s ease;
}
.op-drawer-overlay.open{opacity:1}

/* ---- panel ---- */
.op-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:140;
  width:min(420px,100%);
  display:flex;flex-direction:column;
  background:var(--op-white);
  box-shadow:-20px 0 60px -24px rgba(10,23,41,.6);
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  overflow:hidden;
}
.op-drawer.open{transform:translateX(0)}

.op-drawer-head{
  flex:0 0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:26px 26px 20px;
  background:linear-gradient(180deg, var(--op-navy-deep) 0%, var(--op-navy) 100%);
  color:#fff;
}
.op-drawer-head .kicker{color:var(--op-on-dark-accent);margin-bottom:8px}
.op-drawer-head h2{
  color:#fff;margin:0;
  font-size:1.3rem;line-height:1.25;letter-spacing:-.015em;
}
.op-drawer-head p{margin:10px 0 0;font-size:.875rem;color:var(--op-on-dark-muted)}

.op-drawer-close{
  flex:0 0 auto;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:8px;
  background:rgba(255,255,255,.07);
  color:#fff;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease;
}
.op-drawer-close:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.op-drawer-close svg{width:17px;height:17px}

.op-drawer-body{
  flex:1 1 auto;
  padding:26px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.op-drawer-foot{
  flex:0 0 auto;
  padding:16px 26px;
  border-top:1px solid var(--op-line-soft);
  background:var(--op-tint);
  font-size:.8125rem;color:var(--op-muted);
}
.op-drawer-foot a{font-weight:600}

/* stops the page behind from scrolling while the drawer is open */
html.op-drawer-open,
html.op-drawer-open body{overflow:hidden}

/* mobile: the tab becomes a pill above the thumb, the panel goes full width */
@media (max-width:680px){
  .op-sticky-cta{
    top:auto;bottom:18px;right:14px;
    transform:none;
    border-radius:999px;
    padding:14px 20px;
    font-size:.9375rem;
  }
  .op-sticky-cta span{writing-mode:horizontal-tb;transform:none}
  .op-drawer{width:100%}
  .op-drawer-head{padding:22px 20px 18px}
  .op-drawer-body{padding:20px}
  .op-drawer-foot{padding:14px 20px}
}

@media (prefers-reduced-motion:reduce){
  .op-drawer,.op-drawer-overlay{transition:none}
}


/* ===========================================================================
   HOME HERO — .op-hero--home
   Full-bleed photograph with a navy wash over it, rather than the split
   card the feature and industry pages use. The home page should not look
   like another feature page, and the hero is where that reads first.
   =========================================================================== */
.op-hero--home{
  padding:0;
  background:var(--op-navy-deep);
}
.op-hero--home .op-hero-media{
  position:absolute;inset:0;
  z-index:0;
}
.op-hero--home .op-hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 35%;
}
.op-hero--home::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(13,31,58,.94) 0%, rgba(13,31,58,.82) 42%, rgba(13,31,58,.42) 100%),
    linear-gradient(180deg, rgba(13,31,58,.55) 0%, transparent 40%);
}
.op-hero--home .site-container{position:relative;z-index:2}

.op-hero-inner{
  padding:96px 0 60px;
  max-width:44rem;
}
.op-hero--home h1{
  font-size:clamp(2.3rem,5vw,3.9rem);
  line-height:1.03;
  letter-spacing:-.028em;
  margin-bottom:20px;
}
.op-hero--home .hero-lede{font-size:1.1875rem;max-width:52ch}
.op-hero--home .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.op-hero--home .hero-note{margin-top:18px}

/* stat rail across the foot of the hero */
.op-hero-rail{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.op-hero-rail div{
  padding:24px 24px 30px;
  border-left:1px solid rgba(255,255,255,.12);
}
.op-hero-rail div:first-child{border-left:0;padding-left:0}
.op-hero-rail b{
  display:block;
  color:#fff;font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1;letter-spacing:-.02em;
}
.op-hero-rail b span{color:var(--op-yellow);font-size:.7em;margin-left:1px}
.op-hero-rail small{
  display:block;margin-top:8px;
  font-size:.8125rem;color:var(--op-on-dark-muted);
}

@media (max-width:860px){
  .op-hero-inner{padding:72px 0 48px;max-width:none}
  .op-hero-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-hero-rail div{padding:20px 18px;border-top:1px solid rgba(255,255,255,.12)}
  .op-hero-rail div:nth-child(-n+2){border-top:0}
  .op-hero-rail div:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:680px){
  .op-hero-inner{padding:52px 0 40px}
  .op-hero--home .hero-actions .btn{width:100%}
}


/* ===========================================================================
   ENTRY TILES — .op-entry
   Home only. The home page's job is to route people, so it opens with three
   ways in rather than with product detail.
   =========================================================================== */
.op-entry-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.op-entry{
  display:flex;flex-direction:column;
  padding:34px 30px 30px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  text-decoration:none;
  transition:border-color var(--op-ease),box-shadow var(--op-ease),transform .18s ease;
}
.op-entry:hover{
  border-color:var(--op-navy);
  box-shadow:var(--op-shadow-lift);
  transform:translateY(-2px);
  text-decoration:none;
}
.op-entry .icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  border-radius:var(--op-r-sm);
  background:var(--op-yellow-soft);
  color:var(--op-navy);
}
.op-entry .icon svg{width:21px;height:21px}
.op-entry h3{color:var(--op-ink);margin-bottom:10px;font-size:1.125rem}
.op-entry p{font-size:.9375rem;line-height:1.65;color:var(--op-body);flex:1 1 auto;margin:0 0 20px}
.op-entry .op-entry-go{
  font-size:.9375rem;font-weight:600;color:var(--op-accent);
  display:inline-flex;align-items:center;gap:7px;
}
.op-entry .op-entry-go svg{width:16px;height:16px;transition:transform var(--op-ease)}
.op-entry:hover .op-entry-go svg{transform:translateX(3px)}

@media (max-width:860px){.op-entry-grid{grid-template-columns:1fr;gap:16px}}


/* ===========================================================================
   FEATURE ROWS — .op-feature-row
   Home only. Alternating copy and screenshot. This is the rhythm the current
   home page has, kept deliberately so home does not read as a feature page.
   =========================================================================== */
.op-feature-rows > * + *{margin-top:88px}

.op-feature-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:64px;
  align-items:center;
}
.op-feature-row--flip .op-feature-copy{order:2}

.op-feature-copy .h2{margin-bottom:18px}
.op-feature-copy .op-feature-points{
  list-style:none;margin:0 0 28px;padding:0;
}
.op-feature-points li{
  position:relative;
  padding:0 0 0 28px;
  margin-bottom:16px;
  font-size:.9375rem;line-height:1.68;
}
.op-feature-points li:last-child{margin-bottom:0}
.op-feature-points li::before{
  content:"";
  position:absolute;left:0;top:.56em;
  width:13px;height:7px;
  border-left:2px solid var(--op-navy);
  border-bottom:2px solid var(--op-navy);
  transform:rotate(-45deg);
}
.op-feature-points strong{color:var(--op-ink);font-weight:600}

.op-feature-shot{
  border-radius:var(--op-r-lg);
  overflow:hidden;
  background:var(--op-tint);
  border:1px solid var(--op-line);
  box-shadow:var(--op-shadow-lift);
}
.op-feature-shot img{width:100%;height:auto;display:block}

@media (max-width:960px){
  .op-feature-rows > * + *{margin-top:64px}
  .op-feature-row{grid-template-columns:1fr;gap:36px}
  .op-feature-row--flip .op-feature-copy{order:0}
}
@media (max-width:680px){
  .op-feature-rows > * + *{margin-top:48px}
}


/* ===========================================================================
   STEPS WITH SCREENSHOTS — .op-steps--shots
   Modifier on .op-steps for when each step has a supporting image.
   =========================================================================== */
.op-steps--shots{border:0;background:none;gap:22px;overflow:visible}
.op-steps--shots .op-step{
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  background:var(--op-white);
  padding:0;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.op-steps--shots .op-step-shot{
  display:block;
  aspect-ratio:16/9;
  background:var(--op-tint);
  border-bottom:1px solid var(--op-line);
}
.op-steps--shots .op-step-shot img{width:100%;height:100%;object-fit:cover}
.op-steps--shots .op-step-text{padding:26px 26px 30px}
.op-steps--shots .op-step-num{margin-bottom:14px}

@media (max-width:860px){
  .op-steps--shots{grid-template-columns:1fr}
  .op-steps--shots .op-step{border-top:1px solid var(--op-line)}
}


/* ===========================================================================
   HERO WITH FORM CARD — .op-hero--form
   For the free demo page. The form is the page, so it goes above the fold in
   the hero panel rather than at the foot of a long scroll.
   =========================================================================== */
.op-hero--form{padding:0;background:var(--op-navy-deep)}
.op-hero--form .op-hero-media{position:absolute;inset:0;z-index:0}
.op-hero--form .op-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.op-hero--form::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(13,31,58,.95) 0%, rgba(13,31,58,.86) 46%, rgba(13,31,58,.55) 100%),
    linear-gradient(180deg, rgba(13,31,58,.5) 0%, transparent 38%);
}
.op-hero--form .site-container{position:relative;z-index:2}
.op-hero--form .hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:60px;
  align-items:center;
  padding:72px 0 80px;
}
.op-hero--form h1{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.06;margin-bottom:18px}
.op-hero--form .hero-lede{max-width:54ch}

/* the white card the form sits in */
.op-form-card{
  background:var(--op-white);
  border-radius:var(--op-r-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  overflow:hidden;
}
.op-form-card-head{
  padding:24px 28px 20px;
  border-bottom:1px solid var(--op-line-soft);
}
.op-form-card-head h2{
  margin:0;
  font-size:1.25rem;line-height:1.3;letter-spacing:-.015em;
}
.op-form-card-head p{margin:8px 0 0;font-size:.875rem;color:var(--op-body)}
.op-form-card-body{padding:24px 28px 28px}
.op-form-card-foot{
  padding:14px 28px;
  border-top:1px solid var(--op-line-soft);
  background:var(--op-tint);
  font-size:.8125rem;color:var(--op-muted);
}

/* inside the card every field is full width */
.op-form-card .op-form--stack{max-width:none;margin:0}
.op-form-card .op-form--stack .gfield,
.op-form-card .op-form--stack .gfield--width-half{grid-column:1 / -1}
.op-form-card .op-form--stack .gform_footer{justify-content:stretch;padding-top:18px}
.op-form-card .op-form .gform_button,
.op-form-card .op-form .gform_footer input[type="submit"],
.op-form-card .op-form .gform_footer button{width:100%}

@media (max-width:960px){
  .op-hero--form .hero{grid-template-columns:1fr;gap:40px;padding:60px 0 64px}
  .op-hero--form .hero-lede{max-width:none}
  .op-form-card{max-width:480px}
}
@media (max-width:680px){
  .op-hero--form .hero{padding:44px 0 48px}
  .op-form-card-head,.op-form-card-body{padding-left:20px;padding-right:20px}
  .op-form-card-foot{padding-left:20px;padding-right:20px}
}


/* ===========================================================================
   TRUST STRIP — .op-trust
   A source badge plus a rating. Small by design: it should reassure, not
   take a section of its own.
   =========================================================================== */
.op-trust{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 0;
}
.op-trust img{height:30px;width:auto}
.op-trust-stars{display:inline-flex;gap:3px;color:var(--op-yellow)}
.op-trust-stars svg{width:17px;height:17px;fill:currentColor}
.op-trust p{margin:0;font-size:.875rem;color:var(--op-body)}
.op-trust p strong{color:var(--op-ink)}

.op-hero .op-trust{border-top:1px solid rgba(255,255,255,.16);margin-top:28px}
.op-hero .op-trust p{color:var(--op-on-dark-muted)}
.op-hero .op-trust p strong{color:#fff}


/* ===========================================================================
   PULL QUOTE — .op-quote
   A longer review than .op-voice carries, with its source named.
   =========================================================================== */
.op-quote-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.op-quote{
  display:flex;flex-direction:column;
  margin:0;
  padding:34px 32px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
}
.op-quote blockquote{
  margin:0 0 24px;
  font-size:1rem;line-height:1.72;color:var(--op-ink);
  flex:1 1 auto;
}
.op-quote blockquote::before{
  content:"";
  display:block;
  width:30px;height:3px;
  margin-bottom:20px;
  border-radius:2px;
  background:var(--op-yellow);
}
.op-quote figcaption{
  display:flex;align-items:center;gap:12px;
  padding-top:20px;
  border-top:1px solid var(--op-line-soft);
}
.op-quote .initials{
  width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--op-navy);color:#fff;
  font-size:.8125rem;font-weight:600;
}
.op-quote .who{font-weight:600;color:var(--op-ink);font-size:.9375rem;line-height:1.3}
.op-quote .role{color:var(--op-muted);font-size:.8125rem;line-height:1.3}

@media (max-width:860px){.op-quote-grid{grid-template-columns:1fr;gap:16px}}


/* ===========================================================================
   POST CARDS — .op-post-card
   Blog listing. Same card language as .op-industry-card, with a date and a
   category rather than a "read more" link.
   =========================================================================== */
.op-post-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.op-post-card{
  display:flex;flex-direction:column;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  overflow:hidden;
  transition:border-color var(--op-ease),box-shadow var(--op-ease),transform .18s ease;
}
.op-post-card:hover{border-color:#c8d8ea;box-shadow:var(--op-shadow-card);transform:translateY(-2px)}
.op-post-thumb{display:block;aspect-ratio:16/10;background:var(--op-tint)}
.op-post-thumb img{width:100%;height:100%;object-fit:cover}
.op-post-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.op-post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:12px;
  font-size:.8125rem;color:var(--op-muted);
}
.op-post-tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--op-yellow-soft);
  color:#7a5a00;
  font-weight:600;font-size:.75rem;letter-spacing:.01em;
}
.op-post-card h3{font-size:1.0625rem;line-height:1.38;margin-bottom:10px}
.op-post-card h3 a{color:var(--op-ink)}
.op-post-card h3 a:hover{color:var(--op-accent);text-decoration:none}
.op-post-excerpt{font-size:.9375rem;line-height:1.65;color:var(--op-body);flex:1 1 auto;margin:0 0 18px}
.op-post-more{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9375rem;font-weight:600;color:var(--op-accent);
}
.op-post-more svg{width:16px;height:16px;transition:transform var(--op-ease)}
.op-post-card:hover .op-post-more svg{transform:translateX(3px)}

/* lead post, twice the width and side by side */
.op-post-card--lead{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:stretch;
}
.op-post-card--lead .op-post-thumb{
  flex:0 0 48%;
  aspect-ratio:auto;
  border-right:1px solid var(--op-line);
}
.op-post-card--lead .op-post-body{padding:38px 40px;justify-content:center}
.op-post-card--lead h3{font-size:1.5rem;line-height:1.24;letter-spacing:-.015em}
.op-post-card--lead .op-post-excerpt{font-size:1rem}

@media (max-width:1024px){
  .op-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .op-post-card--lead{flex-direction:column}
  .op-post-card--lead .op-post-thumb{flex:0 0 auto;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--op-line)}
  .op-post-card--lead .op-post-body{padding:26px 24px 28px}
  .op-post-card--lead h3{font-size:1.25rem}
}
@media (max-width:680px){
  .op-post-grid{grid-template-columns:1fr;gap:16px}
}

/* filter chips above the grid */
.op-filter{
  display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center;
  margin-bottom:44px;
}
.op-filter .op-pill[aria-current="true"]{
  background:var(--op-navy);color:#fff;border-color:var(--op-navy);
}
@media (max-width:680px){
  .op-filter{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px 32px;padding:0 20px}
  .op-filter::-webkit-scrollbar{display:none}
  .op-filter .op-pill{flex:0 0 auto}
}

/* pagination */
.op-pagination{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:52px;
}
.op-pagination a,
.op-pagination span{
  min-width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;
  border:1px solid var(--op-line);
  border-radius:8px;
  background:var(--op-white);
  color:var(--op-ink);
  font-size:.9375rem;font-weight:600;
  transition:border-color var(--op-ease),color var(--op-ease);
}
.op-pagination a:hover{border-color:var(--op-accent);color:var(--op-accent);text-decoration:none}
.op-pagination .current{background:var(--op-navy);border-color:var(--op-navy);color:#fff}
.op-pagination .dots{border-color:transparent;background:none;color:var(--op-muted)}


/* ===========================================================================
   POST HERO — .op-post-hero
   Title and meta only. The featured image belongs at the top of the article,
   not behind the headline, because these headlines run long.
   =========================================================================== */
.op-post-hero{
  background:linear-gradient(180deg, var(--op-navy-deep) 0%, var(--op-navy) 100%);
  color:var(--op-on-dark);
  padding:56px 0 60px;
}
.op-post-hero .op-post-crumbs{
  font-size:.8125rem;color:var(--op-on-dark-faint);
  margin-bottom:16px;
}
.op-post-hero .op-post-crumbs a{color:var(--op-on-dark-accent)}
.op-post-hero h1{
  color:#fff;
  max-width:26ch;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.1;margin-bottom:20px;
}
.op-post-hero .op-post-meta{
  color:var(--op-on-dark-muted);
  font-size:.875rem;
  margin:0;gap:14px;
}
.op-post-hero .op-post-meta .op-post-tag{background:rgba(255,196,46,.18);color:var(--op-yellow)}

@media (max-width:680px){
  .op-post-hero{padding:40px 0 44px}
  .op-post-hero h1{max-width:none}
}


/* ===========================================================================
   ARTICLE BODY — .op-article
   Long-form post content. Sized for reading: ~68 characters a line, generous
   leading, and enough space above headings to break the page into sections.
   Covers the WordPress block classes the editor actually outputs.
   =========================================================================== */
.op-article{font-size:1.0625rem;line-height:1.78;color:var(--op-body)}
.op-article > :first-child{margin-top:0}

.op-article h2,
.op-article h3,
.op-article h4{color:var(--op-ink);letter-spacing:-.012em}
.op-article h2{font-size:1.6rem;line-height:1.25;margin:2.2em 0 .6em}
.op-article h3{font-size:1.25rem;line-height:1.32;margin:1.9em 0 .5em}
.op-article h4{font-size:1.0625rem;line-height:1.4;margin:1.7em 0 .45em}

.op-article p{margin:0 0 1.25em}
.op-article a{text-decoration:underline;text-underline-offset:2px}

.op-article ul,
.op-article ol{margin:0 0 1.35em;padding-left:1.3em}
.op-article li{margin-bottom:.6em}
.op-article li::marker{color:var(--op-muted)}

.op-article strong{color:var(--op-ink);font-weight:600}

.op-article figure{margin:2em 0}
.op-article .wp-block-image img,
.op-article img{
  border-radius:var(--op-r-md);
  border:1px solid var(--op-line);
}
.op-article figcaption{
  margin-top:10px;
  font-size:.8125rem;color:var(--op-muted);text-align:center;
}

.op-article blockquote{
  margin:2em 0;
  padding:4px 0 4px 26px;
  border-left:3px solid var(--op-yellow);
  font-size:1.125rem;line-height:1.65;color:var(--op-ink);
}
.op-article blockquote p:last-child{margin-bottom:0}

/* tables — the editor wraps them in figure.wp-block-table */
.op-article .wp-block-table{
  margin:2em 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.op-article table{
  width:100%;
  border-collapse:collapse;
  font-size:.9375rem;
  min-width:520px;
}
.op-article thead th{
  background:var(--op-navy);
  color:#fff;
  font-weight:600;text-align:left;
  padding:13px 16px;
  border:1px solid var(--op-navy);
}
.op-article td{
  padding:13px 16px;
  border:1px solid var(--op-line);
  vertical-align:top;
  line-height:1.6;
}
.op-article tbody tr:nth-child(even) td{background:var(--op-tint)}

.op-article hr{
  border:0;height:1px;
  background:var(--op-line);
  margin:2.4em 0;
}

.op-article .op-post-thumbnail{margin:0 0 2em}
.op-article .op-post-thumbnail img{width:100%;border-radius:var(--op-r-lg)}

@media (max-width:680px){
  .op-article{font-size:1rem}
  .op-article h2{font-size:1.35rem;margin-top:1.9em}
  .op-article h3{font-size:1.125rem}
  .op-article .wp-block-table{margin-left:-20px;margin-right:-20px;padding:0 20px}
}


/* ===========================================================================
   STICKY ASIDE CARD — .op-aside-card
   Replaces the post template's .primary-sidebar. Sticks while the article
   scrolls past it.
   =========================================================================== */
.op-aside-sticky{position:sticky;top:24px}

.op-aside-card{
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  overflow:hidden;
}
.op-aside-card--dark{
  background:linear-gradient(180deg, var(--op-navy-deep) 0%, var(--op-navy) 100%);
  border-color:transparent;
  color:var(--op-on-dark-muted);
}
.op-aside-card-head{padding:24px 24px 0}
.op-aside-card--dark .op-aside-card-head .kicker{color:var(--op-on-dark-accent)}
.op-aside-card-head h2{font-size:1.1875rem;line-height:1.3;margin-bottom:10px}
.op-aside-card--dark .op-aside-card-head h2{color:#fff}
.op-aside-card-head p{font-size:.875rem;margin:0}
.op-aside-card-body{padding:20px 24px 24px}

.op-aside-links{list-style:none;margin:0;padding:0}
.op-aside-links li{border-top:1px solid var(--op-line-soft)}
.op-aside-links li:first-child{border-top:0}
.op-aside-links a{
  display:block;padding:13px 0;
  font-size:.9375rem;line-height:1.45;
  color:var(--op-ink);
}
.op-aside-links a:hover{color:var(--op-accent);text-decoration:none}

@media (max-width:960px){
  .op-aside-sticky{position:static}
}

/* four-up variant of the card grid */
.grid-3.op-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid-3.op-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid-3.op-grid-4{grid-template-columns:1fr}}

/* a secondary block below the main content of a section */
.op-section-sub{margin-top:44px}


/* ===========================================================================
   MOBILE CORRECTIONS
   Collected here rather than in each component, because they all solve the
   same two problems and are easier to reason about together.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Nothing may push the page sideways.
   overflow-x:clip rather than hidden — clip does not create a scroll
   container, so position:sticky inside (the post aside) still works.
   --------------------------------------------------------------------------- */
.op-page{
  overflow-x:clip;

  /* An explicit stacking context, so nothing inside the page can paint above
     the header, footer or drawer. Without it the hero's overlay (z-index:1)
     and its content layer (z-index:2) sit in the ROOT stacking context, where
     they compete with the chrome directly — which is how the desktop dropdown
     ended up rendering behind the hero. Trapping them at z-index:0 keeps those
     numbers local to the hero, which is what they were always meant to be. */
  position:relative;
  z-index:0;
}

/* long URLs, product names and German-length compounds in headings */
.op-page h1,
.op-page h2,
.op-page h3,
.op-page h4,
.op-page p,
.op-page li,
.op-page .h2{overflow-wrap:break-word}


/* ---------------------------------------------------------------------------
   2. Edge-to-edge scrollers — .op-scroller
   The tab strip and the blog filter were cut off at the container edge with
   no sign there was more to the right. Both now run to the viewport edge,
   snap, and carry a fade on the side that has more content.

   The fade is a mask, so it works on any background without needing a
   matching gradient colour.
   --------------------------------------------------------------------------- */
@media (max-width:860px){
  .apc-tabs,
  .op-filter{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;

    /* bleed past the container padding to the viewport edge */
    margin-left:calc(var(--op-gutter-sm) * -1);
    margin-right:calc(var(--op-gutter-sm) * -1);
    padding-left:var(--op-gutter-sm);
    padding-right:var(--op-gutter-sm);
    scroll-padding-left:var(--op-gutter-sm);
  }
  .apc-tabs::-webkit-scrollbar,
  .op-filter::-webkit-scrollbar{display:none}

  .apc-tabs > *,
  .op-filter > *{flex:0 0 auto;scroll-snap-align:start}

  /* fade whichever edge has more content beyond it */
  .apc-tabs[data-overflow="right"],
  .op-filter[data-overflow="right"]{
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
  }
  .apc-tabs[data-overflow="left"],
  .op-filter[data-overflow="left"]{
    mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 100%);
  }
  .apc-tabs[data-overflow="both"],
  .op-filter[data-overflow="both"]{
    mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  }

  /* the underline sat on the scroll container, so it scrolled away with it */
  .apc-tabs{border-bottom:0;position:relative;margin-bottom:0}
  .apc-tabs-rail{
    height:1px;
    background:var(--op-line);
    margin:0 calc(var(--op-gutter-sm) * -1) 44px;
  }
  .apc-tab{padding:14px 16px}
}

@media (max-width:680px){
  .apc-tabs-rail{margin-bottom:32px}
  .op-filter{margin-bottom:32px}
}


/* ---------------------------------------------------------------------------
   3. Carousels
   The track already bleeds to the edge on mobile. Two things were missing:
   snap positions landed under the gutter, and there was no indication the
   arrows had gone away in favour of swiping.
   --------------------------------------------------------------------------- */
@media (max-width:680px){
  .op-carousel{
    scroll-padding-left:var(--op-gutter-sm);
    overscroll-behavior-x:contain;
  }
  /* a touch more of the next card, so the peek reads as "swipe me" */
  .op-carousel > *{flex:0 0 82%}
}

/* between the two-up and one-up layouts the arrows can crowd a long heading */
@media (max-width:860px) and (min-width:681px){
  .car-btn,.op-industries-arrow{top:-56px}
}

/* progress dots, mobile only — .op-carousel-dots is written by the JS */
.op-carousel-dots{display:none}
@media (max-width:680px){
  .op-carousel-dots{
    display:flex;justify-content:center;gap:7px;
    margin-top:4px;
  }
  .op-carousel-dots b{
    width:6px;height:6px;border-radius:50%;
    background:var(--op-line);
    transition:width .2s ease,background-color .2s ease;
  }
  .op-carousel-dots b.is-active{width:20px;background:var(--op-navy)}
  .alt .op-carousel-dots b,
  .op-voices .op-carousel-dots b{background:#d6e0ec}
  .alt .op-carousel-dots b.is-active,
  .op-voices .op-carousel-dots b.is-active{background:var(--op-navy)}
}


/* ---------------------------------------------------------------------------
   4. Remaining small-screen corrections
   --------------------------------------------------------------------------- */
@media (max-width:680px){
  /* the hero rail read as a cramped 2x2 grid; give the figures room */
  .op-hero-rail div{padding:16px 14px}
  .op-hero-rail b{font-size:1.25rem}
  .op-hero-rail small{font-size:.75rem;margin-top:5px}

  /* hero buttons stack, so the second needs separating */
  .op-hero .hero-actions{gap:10px}

  /* embedded video in post bodies */
  .op-article iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:var(--op-r-md)}

  /* the CTA band button should not be a lonely small pill */
  .op-cta-band .btn{width:100%}

  /* quote cards were over-padded at this width */
  .op-quote{padding:26px 22px}
  .op-voice{padding:26px 22px}

  /* tab panels: headings left-aligned already, keep copy measure sane */
  .apc-copy,.apc-copy--single{max-width:none}

  /* pagination wraps rather than overflowing */
  .op-pagination{flex-wrap:wrap;gap:6px}
  .op-pagination a,.op-pagination span{min-width:38px;height:38px;font-size:.875rem}
}

/* very narrow phones */
@media (max-width:380px){
  .op-hero-rail{grid-template-columns:1fr}
  .op-hero-rail div:nth-child(n){border-left:0;padding-left:0}
  .op-trust{gap:12px}
}


/* ===========================================================================
   DIRECTORY GRID — .op-directory
   For the two index pages. Their job is to route people to a child page, so
   they get a scannable grid rather than a carousel: on an index, hiding half
   the options behind a swipe is the wrong trade.
   =========================================================================== */
.op-directory{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.op-directory--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.op-dir-item{
  display:flex;flex-direction:column;
  padding:26px 24px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  text-decoration:none;
  transition:border-color var(--op-ease),box-shadow var(--op-ease),transform .18s ease;
}
.op-dir-item:hover{
  border-color:var(--op-navy);
  box-shadow:var(--op-shadow-card);
  transform:translateY(-2px);
  text-decoration:none;
}
.op-dir-item .icon{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  border-radius:var(--op-r-sm);
  background:var(--op-tint);
}
.op-dir-item .icon img{width:20px;height:20px}
.op-dir-item h3{color:var(--op-ink);font-size:1rem;margin-bottom:8px}
.op-dir-item p{font-size:.875rem;line-height:1.6;color:var(--op-body);margin:0;flex:1 1 auto}
.op-dir-item .op-dir-go{
  margin-top:16px;
  font-size:.875rem;font-weight:600;color:var(--op-accent);
  display:inline-flex;align-items:center;gap:6px;
}
.op-dir-item .op-dir-go svg{width:15px;height:15px;transition:transform var(--op-ease)}
.op-dir-item:hover .op-dir-go svg{transform:translateX(3px)}

@media (max-width:1024px){
  .op-directory,.op-directory--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .op-directory,.op-directory--4{grid-template-columns:1fr;gap:14px}
  .op-dir-item{padding:22px 20px}
}


/* ===========================================================================
   IMAGE CARD GRID — .op-industry-grid
   The same card as the industries carousel, laid out as a grid. Index pages
   show everything at once; section-level modules on other pages swipe.
   =========================================================================== */
.op-industry-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
@media (max-width:1024px){
  .op-industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .op-industry-grid{grid-template-columns:1fr;gap:16px}
}