/*
Theme Name: Optifile v2.75
Theme URI: https://www.optifile.net/
Author: Optifile
Description: Optifile public website theme.
Version: 2.75.0
Text Domain: optifile
*/

:root{--blue:#0a5ea9;--ink:#142f49;--soft:#f4f8fc;--line:#dce8f3}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff}
header{position:sticky;top:0;z-index:20;background:#fffffff2;backdrop-filter:blur(10px);border-bottom:1px solid #e7eef5;overflow:visible}
.nav{max-width:1400px;height:87px;margin:auto;padding:8px 24px;display:flex;align-items:center;gap:28px;overflow:visible}.nav>img{height:115px;width:auto;position:relative;z-index:25;align-self:flex-start}
.nav nav{margin-left:auto;display:flex;gap:22px;align-items:center;height:100%}.nav a{color:var(--ink);text-decoration:none;font-size:14px}
.menu-toggle{display:none;margin-left:auto;border:0;background:transparent;color:var(--ink);width:44px;height:44px;border-radius:8px;cursor:pointer;padding:9px}.menu-toggle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.btn{display:inline-block;background:var(--blue);color:#fff!important;padding:11px 16px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn:hover,.btn:focus-visible{background:#084b86;box-shadow:0 6px 16px #0a5ea933;transform:translateY(-1px);outline:none}
.btn:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #0a5ea966}
.btn:active{background:#073f70;transform:translateY(0);box-shadow:0 2px 7px #0a5ea929}
.hero{background:linear-gradient(110deg,#f5f9fd 0%,#fff 55%)}.heroin{max-width:1400px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;min-height:620px}
.copy{padding:76px 44px 60px 64px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
h1{font-size:54px;line-height:1.04;margin:16px 0 22px;letter-spacing:-.035em}h1 span{color:var(--blue)}.copy p{font-size:20px;line-height:1.55;color:#496177;max-width:620px}
.heroimg{height:620px;overflow:hidden;position:relative}.heroimg img{width:100%;height:100%;object-fit:cover}
.hero-note{position:absolute;left:30px;bottom:30px;background:#ffffffed;padding:18px 22px;border-radius:14px;box-shadow:0 12px 35px #142f4930;max-width:330px;border-left:4px solid var(--blue)}
.hero-note strong{display:block;font-size:18px}.hero-note span{display:block;color:#5b6f82;margin-top:5px;line-height:1.4}
.section{padding:76px 24px}.section.soft{background:var(--soft)}.inner{max-width:1400px;margin:auto}
.photo{height:auto;border-radius:22px;overflow:hidden;box-shadow:0 16px 46px #1b45691a;border:1px solid #e6edf4;background:white}
.photo img{width:100%;height:auto;display:block}
.blockcopy{text-align:center;max-width:850px;margin:30px auto 25px}.blockcopy h2{font-size:38px;margin:0 0 12px}.blockcopy p{font-size:18px;line-height:1.55;color:#5b6f82;margin:0}
.steps{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;max-width:1100px;margin:0 auto}
.step{text-align:center;position:relative;padding:8px}.step:not(:last-child):after{content:"→";position:absolute;right:-14px;top:25px;color:#9fc9e8;font-size:24px}
.ico{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#eaf4fc;color:var(--blue)}
.ico svg{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step b{display:block;font-size:14px}.step small{display:block;margin-top:6px;color:#687d8f;line-height:1.35}
.partner-strip{display:flex;gap:28px;overflow:hidden;white-space:nowrap;justify-content:center;padding:8px 0 4px;font-weight:700;color:#466276}.partner-strip span{padding:10px 16px;border:1px solid #e0eaf3;border-radius:10px;background:#fff}
.support-actions{display:grid;grid-template-columns:1.2fr 1.2fr repeat(3,.8fr);gap:14px;max-width:1150px;margin:auto}.support-card{color:inherit;text-decoration:none;background:#fff;border:1px solid #e1ebf3;border-radius:16px;padding:20px 12px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;cursor:pointer}.support-card:after{display:none!important}.support-card:hover,.support-card:focus-visible{border-color:var(--blue);box-shadow:0 5px 18px #0a5ea91a;transform:translateY(-1px);outline:none}.support-card small{color:#687d8f}.support-card strong{color:var(--blue)}
.mobile-side-photo{display:none}.partners-section{background:#fff;border-top:1px solid #e3edf5;border-bottom:1px solid #e3edf5}
.cta{padding:64px 24px;background:var(--ink);color:#fff;text-align:center}.cta h2{font-size:36px;margin:0 0 12px}.cta p{color:#d8e4ee;font-size:18px}
#support .support-actions{margin-top:28px}
.support-copy{display:none}
footer{background:#f5f8fb;border-top:1px solid #e1eaf2;padding:46px 24px 26px}.foot{max-width:1400px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:45px}.foot img{width:180px}.foot p,.foot a{color:#617588;line-height:1.7;font-size:14px;text-decoration:none}.foot h4{margin:0 0 10px;color:var(--ink)}.copyright{max-width:1400px;margin:30px auto 0;border-top:1px solid #dde7ef;padding-top:18px;color:#8191a0;font-size:12px}
@media(max-width:800px){header{position:relative}.nav{height:76px;padding:8px 16px;align-items:center}.nav>img{height:88px;width:auto;max-width:none;align-self:flex-start}.menu-toggle{display:block}.nav nav{display:none;position:absolute;left:0;right:0;top:76px;height:auto;margin:0;padding:10px 16px 16px;background:#fff;border-top:1px solid #e7eef5;border-bottom:1px solid #dce8f3;box-shadow:0 12px 28px #142f4918;flex-direction:column;align-items:stretch;gap:2px}.nav nav.open{display:flex}.nav nav a{display:block!important;padding:12px 10px;font-size:16px}.nav nav .btn{text-align:center;margin-top:6px}.heroin{display:block;min-height:0}.copy{padding:42px 22px}.copy h1{font-size:39px}.copy p{font-size:17px}.heroimg{height:300px}.hero-note{left:16px;right:16px;bottom:16px;max-width:none;padding:13px 16px}.section{padding:48px 16px}.photo{display:none}.blockcopy{text-align:left;margin:0 0 22px}.blockcopy h2{font-size:30px}.blockcopy p{font-size:16px}.support-copy{display:block}.steps{display:grid;grid-template-columns:1fr!important;gap:10px}.step{display:flex;text-align:left;align-items:center;gap:14px;padding:6px}.step:not(:last-child):after{content:"";position:absolute;left:29px;top:59px;width:2px;height:18px;background:#c8def0}.ico{margin:0;flex:0 0 48px;width:48px;height:48px}.ico svg{width:24px;height:24px}.step small{display:none}.support-actions .step small{display:block;margin-top:7px}.partner-strip{justify-content:flex-start;overflow-x:auto}.support-actions{grid-template-columns:1fr}.support-actions .step{display:flex;text-align:left;align-items:center;gap:14px;padding:14px 16px}.support-actions .step .ico{margin:0;flex:0 0 48px}.support-actions .step small{margin-top:4px}.foot{grid-template-columns:1fr;gap:18px}.foot img{width:115px;height:auto}}

@media(max-width:800px){
  .flow-mobile{display:grid;grid-template-columns:minmax(0,1fr) 27%;gap:14px;align-items:stretch}
  .flow-mobile .steps{min-width:0}
  .mobile-side-photo{display:block;min-height:100%;border-radius:16px;overflow:hidden;background:#eef4f8}
  .mobile-side-photo img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block}
  /* Mobiele sfeerbeelden: verander alleen het eerste percentage om de uitsnede links/rechts te verschuiven. */
  .mobile-crop-proces{object-position:21% center}
  .mobile-crop-online{object-position:7% center}
  .mobile-crop-mailing{object-position:55% center}
  .mobile-crop-support{object-position:29% center}
  .support-actions{display:grid;grid-template-columns:1fr;gap:10px;max-width:none;margin-top:0}
  .support-card{display:flex;text-align:left;align-items:center;gap:14px;padding:14px 16px;min-width:0}
  .support-card .ico{margin:0;flex:0 0 48px}
  .support-card small{display:block;margin-top:4px}
  .foot{grid-template-columns:1fr 1fr;gap:22px 18px}
  .foot-brand{grid-column:1/-1;display:flex;align-items:center;gap:16px}
  .foot-brand img{width:96px;height:auto;flex:0 0 auto}
  .foot-brand p{margin:0;line-height:1.45}
  .foot-contact,.foot-links{min-width:0}
}
@media(max-width:380px){.flow-mobile{grid-template-columns:minmax(0,1fr) 24%;gap:10px}.foot-brand img{width:88px}.foot{gap:18px 12px}.foot p,.foot a{font-size:13px}}

/* Content page components */
/* V14.4: de hero gebruikt exact dezelfde basiscomponenten als de homepage:
   .hero > .heroin > .copy + .heroimg. Alleen paginaspecifieke details blijven hier staan. */
.content-hero{border-bottom:1px solid #e6eef5}
.content-hero .heroin{min-height:500px}
.content-hero .heroimg{height:500px}
.breadcrumbs{font-size:13px;color:#7890a3;margin-bottom:10px}.breadcrumbs a{color:var(--blue);text-decoration:none}.content-section{padding:66px 24px}.content-section.soft{background:var(--soft)}.content-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:54px;align-items:center;max-width:1240px;margin:auto}.content-grid.reverse>div:first-child{order:2}.content-grid.reverse>div:last-child{order:1}.content-grid h2{font-size:34px;margin:0 0 15px}.content-grid p{color:#5b6f82;font-size:17px;line-height:1.65}.content-grid ul{padding-left:20px;color:#526a7f;line-height:1.75}.screen-placeholder{min-height:300px;border-radius:18px;background:#fff;border:1px solid #dfeaf3;box-shadow:0 12px 34px #173f5e12;padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#71889a}.screen-placeholder strong{display:block;color:var(--ink);font-size:18px;margin-bottom:8px}.feature-cards{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{background:#fff;border:1px solid #e0eaf2;border-radius:16px;padding:24px}.feature-card h3{margin:12px 0 8px;font-size:20px}.feature-card p{margin:0;color:#62788b;line-height:1.55}.feature-card .ico{margin:0}.page-links{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.page-link{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #dfe9f2;border-radius:16px;padding:22px;transition:.18s}.page-link:hover{border-color:var(--blue);box-shadow:0 5px 18px #0a5ea91a;transform:translateY(-1px)}.page-link b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}.page-link span{color:#687d8f;line-height:1.5}.support-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.support-grid .support-card{display:flex;align-items:flex-start;gap:16px;padding:22px}.support-grid .support-card .ico{flex:0 0 54px;margin:0}.support-grid .support-card b{font-size:18px}.support-grid .support-card small{display:block;margin-top:7px;line-height:1.5}.contact-panel{max-width:1100px;margin:0 auto;background:var(--ink);color:#fff;border-radius:20px;padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}.contact-panel h2{margin:0 0 10px;font-size:30px}.contact-panel p{margin:0;color:#d6e3ed;line-height:1.6}.contact-panel .btn{justify-self:end}.section-intro{max-width:850px;margin:0 auto 32px;text-align:center}.section-intro h2{font-size:34px;margin:0 0 12px}.section-intro p{margin:0;color:#5b6f82;font-size:17px;line-height:1.6}@media(max-width:800px){.content-section{padding:46px 16px}.content-grid,.content-grid.reverse{grid-template-columns:1fr;gap:26px}.content-grid.reverse>div:first-child,.content-grid.reverse>div:last-child{order:initial}.content-grid h2{font-size:29px}.feature-cards,.page-links,.support-grid{grid-template-columns:1fr}.contact-panel{grid-template-columns:1fr;padding:26px}.contact-panel .btn{justify-self:start}.section-intro{text-align:left}.section-intro h2{font-size:29px}}

/* V14: sitebrede header, broodkruimels en instelbare uitsneden */
.brand-link{display:block;align-self:flex-start;position:relative;z-index:25}
.brand-link>img{height:115px;width:auto;display:block}
.breadcrumb-bar{background:#fff;border-bottom:1px solid #edf2f6;padding:10px 24px}
.breadcrumb-bar .breadcrumb-inner{max-width:1400px;margin:auto;text-align:right;font-size:13px;color:#7890a3}
.breadcrumb-bar a{color:var(--blue);text-decoration:none}
.content-hero .breadcrumbs{display:none}

/* Elke contentafbeelding heeft een eigen crop-class. Pas alleen het percentage aan. */
.crop-compleet-hero{object-position:50% center}
.crop-optiek-hero{object-position:50% center}
.crop-support-hero{object-position:50% center}

/* Informatieve voordelen zien er bewust niet uit als klikbare kaarten. */
.feature-cards.informative{gap:32px}
.feature-cards.informative .feature-card{border:0;border-radius:0;background:transparent;padding:8px 18px;text-align:center;box-shadow:none;position:relative}
.feature-cards.informative .feature-card:not(:last-child):after{content:"";position:absolute;right:-16px;top:12%;bottom:12%;width:1px;background:#dce8f3}
.feature-cards.informative .ico{margin:0 auto 12px;background:#eaf4fc}

.callback-layout{max-width:1100px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
.callback-copy h2{font-size:34px;margin:8px 0 14px}.callback-copy p{font-size:17px;line-height:1.65;color:#5b6f82}.callback-copy .software-tip{margin-top:22px;padding:18px 20px;border-left:4px solid var(--blue);background:#f4f8fc;border-radius:0 12px 12px 0}.callback-copy .software-tip strong{display:block;color:var(--ink);margin-bottom:5px}
.callback-form{background:#fff;border:1px solid #dfe9f2;border-radius:18px;padding:24px;box-shadow:0 12px 34px #173f5e10}.callback-form label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}.callback-form input,.callback-form textarea{width:100%;font:inherit;border:1px solid #ccdbe7;border-radius:9px;padding:11px 12px;margin:0 0 15px;color:var(--ink);background:#fff}.callback-form textarea{min-height:90px;resize:vertical}.callback-form .form-note{font-size:12px;color:#7890a3;line-height:1.45;margin:3px 0 15px}.callback-form button{border:0;cursor:pointer}.callback-message{display:none;margin-top:12px;font-size:13px;color:#526a7f}
.self-help-list{margin:18px 0 0;padding:0;list-style:none}.self-help-list li{padding:12px 0;border-bottom:1px solid #e2ebf2;color:#526a7f;line-height:1.55}.self-help-list li:last-child{border-bottom:0}.self-help-list strong{color:var(--ink)}

@media(max-width:800px){
  .brand-link{align-self:flex-start}.brand-link>img{height:88px;width:auto;max-width:none}
  .breadcrumb-bar{display:none}.content-hero .breadcrumbs{display:block}.content-hero .heroin{min-height:0}.content-hero .heroimg{height:300px}
  .feature-cards.informative{gap:10px}.feature-cards.informative .feature-card{text-align:left;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;padding:13px 4px}.feature-cards.informative .feature-card:not(:last-child):after{display:none}.feature-cards.informative .ico{grid-row:1/3;margin:0}.feature-cards.informative .feature-card h3{margin:0 0 5px}.feature-cards.informative .feature-card p{grid-column:2;margin:0}
  .callback-layout{grid-template-columns:1fr;gap:24px}.callback-copy h2{font-size:29px}
}



/* Theme v2: Gutenberg bridge. De frontend blijft V14.6; de inhoud bestaat nu uit core WordPress-blokken. */
.optifile-block-page > .wp-block-group{margin-block-start:0;margin-block-end:0}
.optifile-block-page .wp-block-group{box-sizing:border-box}
.heroimg>.wp-block-image,.heroimg>.wp-block-image img{width:100%;height:100%;margin:0;display:block}
.heroimg>.wp-block-image img{object-fit:cover}
.photo.wp-block-image{margin:0 auto}.photo.wp-block-image img{display:block;width:100%;height:auto}
.wp-block-button.is-style-optifile-primary .wp-block-button__link{background:var(--blue);color:#fff!important;padding:11px 16px;border-radius:8px;font-weight:700;text-decoration:none;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.wp-block-button.is-style-optifile-primary .wp-block-button__link:hover,.wp-block-button.is-style-optifile-primary .wp-block-button__link:focus-visible{background:#084b86;box-shadow:0 6px 16px #0a5ea933;transform:translateY(-1px)}
.wp-block-button.is-style-optifile-outline .wp-block-button__link{background:#fff;color:var(--blue)!important;border:1px solid var(--blue);padding:10px 16px;border-radius:8px;font-weight:700}
.wp-block-button.is-style-optifile-outline .wp-block-button__link:hover{background:#eaf4fc}
.copy>.wp-block-buttons{margin-top:24px}.copy>.eyebrow,.copy>p.eyebrow{margin-bottom:0}
.mini-features{max-width:900px;margin:0 auto}.mini-features .wp-block-column{text-align:center;padding:16px;border-radius:12px;background:#f8fbfd}.mini-features h3{font-size:15px;margin:0;color:var(--ink)}
.force-visible.support-copy{display:block}
.partner-strip.wp-block-paragraph{display:flex}.partner-strip.wp-block-paragraph span{display:inline-block}
.feature-cards.wp-block-columns,.page-links.wp-block-columns,.support-grid.wp-block-columns,.content-grid.wp-block-columns,.callback-layout.wp-block-columns{margin-bottom:0}
.feature-cards .feature-card,.page-links .page-link,.support-grid .support-card{margin:0}
.page-link h3{margin:0 0 6px;font-size:18px}.page-link h3 a{color:var(--ink);text-decoration:none}.page-link p{margin:0;color:#687d8f;line-height:1.5}
.editable-support-grid{flex-wrap:wrap}.editable-support-grid>.wp-block-column{flex-basis:calc(50% - 10px)!important;flex-grow:0}.editable-support-grid h3{margin:0 0 7px;font-size:18px}.editable-support-grid h3 a{color:var(--ink);text-decoration:none}.editable-support-grid p{margin:0;color:#687d8f;font-size:14px;line-height:1.5}
.screen-placeholder.wp-block-column{display:flex;min-height:300px}.screen-placeholder.wp-block-column p{margin:auto;text-align:center}
.callback-result{margin-top:14px;padding:12px 14px;background:#f4f8fc;border-radius:8px;color:#526a7f;font-size:14px}
.generic-content{max-width:900px;margin:auto}.generic-content>h1:first-child{margin-top:0}
/* Editor: geef de eigen Optifile-secties een herkenbare maar rustige begrenzing. */
.editor-styles-wrapper .hero,.editor-styles-wrapper .section,.editor-styles-wrapper .content-section,.editor-styles-wrapper .cta{outline:1px dashed #c9d9e6;outline-offset:-1px}
.editor-styles-wrapper .heroimg{min-height:240px}.editor-styles-wrapper .heroimg>.wp-block-image{height:100%}
@media(max-width:800px){.editable-support-grid>.wp-block-column{flex-basis:100%!important}.partner-strip.wp-block-paragraph{justify-content:flex-start}.content-grid.wp-block-columns,.callback-layout.wp-block-columns{display:grid;grid-template-columns:1fr}}


/* Theme v2.3: contentpagina's gebruiken weer exact de V14.6 DOM-structuur.
   Hiermee kan WordPress' core Columns/Group CSS de layout niet meer versmallen of herschikken. */
.optifile-block-page > section{margin-block-start:0;margin-block-end:0}
/* v2.4: Gutenberg-native Support page while preserving the V14.6 component DOM. */
.heroimg>.wp-block-image{height:100%;margin:0}.heroimg>.wp-block-image img{display:block;width:100%;height:100%;object-fit:cover}
.support-grid>.wp-block-group.support-card{min-width:0}
.support-grid .support-card h3{margin:0 0 7px;font-size:18px;line-height:1.25}.support-grid .support-card h3 a{color:var(--ink);text-decoration:none}.support-grid .support-card h3 a:hover{color:var(--blue)}
.support-grid .support-card p{margin:0;color:#687d8f;font-size:14px;line-height:1.5}.support-grid .support-card p a{color:var(--blue)}
.support-grid .support-card .wp-block-html{margin:0}.support-grid .support-card .ico{margin:0;flex:0 0 54px}
.content-grid>.wp-block-column> :first-child{margin-top:0}.content-grid>.wp-block-column> :last-child{margin-bottom:0}
.callback-layout>.wp-block-column> :first-child{margin-top:0}


/* v2.5: Gutenberg core layout classes can be emitted after the theme stylesheet and
   override display/layout on Group blocks. Lock the Optifile component geometry on
   the frontend so the native editor remains editable without changing V14.6. */
.optifile-block-page .wp-block-group.heroin{
  display:grid !important;
  grid-template-columns:.9fr 1.1fr !important;
  align-items:center !important;
  max-width:1400px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.optifile-block-page .wp-block-group.support-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  width:100% !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.optifile-block-page .wp-block-group.support-grid > .wp-block-group.support-card{
  display:flex !important;
  width:auto !important;
  min-width:0 !important;
}
.optifile-block-page .wp-block-columns.content-grid{
  display:grid !important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  width:100% !important;
}
.optifile-block-page .wp-block-columns.callback-layout{
  display:grid !important;
  grid-template-columns:.9fr 1.1fr !important;
  width:100% !important;
}
.optifile-block-page .wp-block-group.contact-panel{
  display:grid !important;
  grid-template-columns:1.2fr .8fr !important;
  width:100% !important;
}
@media(max-width:800px){
  .optifile-block-page .wp-block-group.heroin,
  .optifile-block-page .wp-block-group.support-grid,
  .optifile-block-page .wp-block-columns.content-grid,
  .optifile-block-page .wp-block-columns.callback-layout,
  .optifile-block-page .wp-block-group.contact-panel{
    grid-template-columns:1fr !important;
  }
}


/* v2.6: Support editor/frontend bridge.
   Support remains Gutenberg-editable, but every structural wrapper is now a valid block.
   The editor gets the same component geometry as the frontend. */
.support-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.support-grid > .support-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 22px !important;
  border: 1px solid #dce8f3 !important;
  border-radius: 18px !important;
  background: #fff !important;
  min-width: 0 !important;
}
.support-card .support-card-content {
  min-width: 0 !important;
  margin: 0 !important;
}
.support-card .support-card-content > * {
  margin-block-start: 0 !important;
}
.support-card .support-card-content > *:last-child {
  margin-block-end: 0 !important;
}
.support-grid .support-card .ico {
  margin: 0 !important;
  flex: 0 0 54px !important;
}
.contact-panel {
  display: grid !important;
  grid-template-columns: 1.2fr .8fr !important;
  gap: 28px !important;
  align-items: center !important;
}
.contact-panel .contact-copy > *:first-child { margin-top: 0 !important; }
.contact-panel .contact-copy > *:last-child { margin-bottom: 0 !important; }

.editor-styles-wrapper .wp-block-group.heroin {
  display: grid !important;
  grid-template-columns: .9fr 1.1fr !important;
  align-items: center !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.editor-styles-wrapper .content-hero .heroimg,
.editor-styles-wrapper .wp-block-group.heroimg {
  height: 500px !important;
}
.editor-styles-wrapper .heroimg .wp-block-image,
.editor-styles-wrapper .heroimg .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
}
.editor-styles-wrapper .support-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.editor-styles-wrapper .support-grid > .support-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 22px !important;
  border: 1px solid #dce8f3 !important;
  border-radius: 18px !important;
  background: #fff !important;
}
.editor-styles-wrapper .support-grid .wp-block-html {
  border: 0 !important;
  padding: 0 !important;
}
.editor-styles-wrapper .support-grid .wp-block-html:before {
  display: none !important;
}
.editor-styles-wrapper .contact-panel {
  display: grid !important;
  grid-template-columns: 1.2fr .8fr !important;
  gap: 28px !important;
  align-items: center !important;
}
@media(max-width:800px){
  .support-grid,
  .editor-styles-wrapper .support-grid,
  .contact-panel,
  .editor-styles-wrapper .contact-panel,
  .editor-styles-wrapper .wp-block-group.heroin {
    grid-template-columns: 1fr !important;
  }
  .support-grid > .support-card,
  .editor-styles-wrapper .support-grid > .support-card {
    display: flex !important;
  }
}


/* v2.7
   Use Gutenberg's native layout engine instead of fighting it:
   - hero: Group/Grid
   - support overview: Group/Grid
   - support card: Group/Flex
   This keeps the editor valid and makes frontend/editor geometry agree. */

.support-native-grid.is-layout-grid,
.editor-styles-wrapper .support-native-grid.is-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.support-hero-grid.is-layout-grid,
.editor-styles-wrapper .support-hero-grid.is-layout-grid {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.support-card.is-layout-flex,
.editor-styles-wrapper .support-card.is-layout-flex {
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.support-card.is-layout-flex > .support-card-content,
.editor-styles-wrapper .support-card.is-layout-flex > .support-card-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.support-native-grid {
  max-width: 1100px !important;
  width: calc(100% - 48px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force page sections to remain full-width canvases; inner components control their own width. */
.optifile-block-page > .wp-block-group.content-section,
.optifile-block-page > .wp-block-group.hero,
.editor-styles-wrapper > .wp-block-group.content-section,
.editor-styles-wrapper > .wp-block-group.hero {
  max-width: none !important;
  width: 100% !important;
}

/* Contact panel: Gutenberg grid too. */
.contact-native-grid.is-layout-grid,
.editor-styles-wrapper .contact-native-grid.is-layout-grid {
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) !important;
  align-items: center !important;
  gap: 30px !important;
}

@media (max-width:800px) {
  .support-native-grid.is-layout-grid,
  .editor-styles-wrapper .support-native-grid.is-layout-grid,
  .support-hero-grid.is-layout-grid,
  .editor-styles-wrapper .support-hero-grid.is-layout-grid,
  .contact-native-grid.is-layout-grid,
  .editor-styles-wrapper .contact-native-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  .support-native-grid {
    width: calc(100% - 32px) !important;
  }
}


/* v2.8 — Support hero crop + stable theme-asset presentation */
.support-hero-grid > .heroimg,
.editor-styles-wrapper .support-hero-grid > .heroimg {
  height: 500px !important;
  min-height: 500px !important;
  overflow: hidden !important;
}

.support-hero-grid > .heroimg > figure.wp-block-image,
.editor-styles-wrapper .support-hero-grid > .heroimg > figure.wp-block-image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.support-hero-grid > .heroimg > figure.wp-block-image > img,
.editor-styles-wrapper .support-hero-grid > .heroimg > figure.wp-block-image > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% center !important;
}

@media (max-width:800px) {
  .support-hero-grid > .heroimg,
  .editor-styles-wrapper .support-hero-grid > .heroimg {
    height: 300px !important;
    min-height: 300px !important;
  }
}


/* v2.9 — WordPress Group inner-container compatibility.
   On this WordPress install Group blocks render an extra
   .wp-block-group__inner-container wrapper. The layout must therefore
   be applied to that wrapper, not only to the outer Group element. */

/* Support hero */
.support-hero-grid > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
}

.support-hero-grid > .wp-block-group__inner-container > .copy,
.support-hero-grid > .wp-block-group__inner-container > .heroimg {
  min-width: 0 !important;
}

.support-hero-grid > .wp-block-group__inner-container > .heroimg {
  height: 500px !important;
  min-height: 500px !important;
  overflow: hidden !important;
}

.support-hero-grid > .wp-block-group__inner-container > .heroimg > .wp-block-group__inner-container {
  height: 100% !important;
}

.support-hero-grid > .wp-block-group__inner-container > .heroimg figure.wp-block-image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.support-hero-grid > .wp-block-group__inner-container > .heroimg figure.wp-block-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% center !important;
}

/* Support card overview */
.support-native-grid > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.support-card > .wp-block-group__inner-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.support-card > .wp-block-group__inner-container > .support-card-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.support-card-content > .wp-block-group__inner-container > *:first-child {
  margin-top: 0 !important;
}
.support-card-content > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0 !important;
}

/* Bottom contact panel */
.contact-native-grid > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) !important;
  align-items: center !important;
  gap: 30px !important;
}

/* Editor compatibility: newer editor often omits the inner-container wrapper,
   so the v2.7 direct-child rules remain in force there. */

@media (max-width:800px) {
  .support-hero-grid > .wp-block-group__inner-container,
  .support-native-grid > .wp-block-group__inner-container,
  .contact-native-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr !important;
  }

  .support-hero-grid > .wp-block-group__inner-container > .heroimg {
    height: 300px !important;
    min-height: 300px !important;
  }
}


/* =========================================================
   v2.10 — Support detail fixes
   ========================================================= */

/* Content pages: eyebrow/subtitle dark, homepage remains unchanged. */
.content-page .eyebrow {
  color: var(--ink) !important;
}

/*
 * Support hero
 * WordPress may insert one or more inner-container wrappers.
 * Make the visual column a fixed crop-window independent of those wrappers.
 */
.content-page .support-hero-grid .heroimg {
  position: relative !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

.content-page .support-hero-grid .heroimg > .wp-block-group__inner-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.content-page .support-hero-grid .heroimg figure.wp-block-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.content-page .support-hero-grid .heroimg figure.wp-block-image img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% center !important;
}

/* "Zelf verder": keep heading and body together, vertically centered. */
.content-page .screen-placeholder.wp-block-column {
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.content-page .screen-placeholder.wp-block-column > h3,
.content-page .screen-placeholder.wp-block-column > p,
.content-page .screen-placeholder.wp-block-column > .wp-block-heading {
  margin: 0 !important;
}

.content-page .screen-placeholder.wp-block-column p {
  margin: 0 !important;
  text-align: center !important;
}

/* If this WordPress version adds an inner wrapper in a placeholder, center that too. */
.content-page .screen-placeholder > .wp-block-group__inner-container {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Bottom "Liever direct contact": button belongs at the right on desktop. */
.content-page .contact-panel .wp-block-buttons {
  justify-self: end !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.content-page .contact-panel .wp-block-button {
  margin-left: auto !important;
}

@media (max-width:800px) {
  .content-page .support-hero-grid .heroimg {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  .content-page .contact-panel .wp-block-buttons {
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
}


/* v2.11 — make content-page eyebrows identical to homepage eyebrows */
.content-page .eyebrow {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}


/* =========================================================
   v2.12 — Support editor pilot
   ========================================================= */

/* The Support hero now uses a native Gutenberg Cover block.
   Gutenberg stores the focal point on the block itself, so an editor can
   move the visible crop without changing theme CSS. */
.content-page .support-hero-grid > .wp-block-cover.heroimg,
.content-page .support-hero-grid > .wp-block-group__inner-container > .wp-block-cover.heroimg {
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

.content-page .support-hero-grid .wp-block-cover.heroimg .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Support choices: two real columns, so mobile naturally shows the complete
   left column first, followed by the complete right column. */
.content-page .support-columns {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.content-page .support-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.content-page .support-column > .support-card {
  margin: 0 !important;
}

.content-page .support-card {
  background: #fff !important;
  border: 1px solid #dfe9f2 !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-sizing: border-box !important;
}

.content-page .support-card:hover {
  border-color: var(--blue) !important;
  box-shadow: 0 5px 18px #0a5ea91a !important;
}

/* Keep "Zelf verder" placeholder content together in the centre. */
.content-page .screen-placeholder {
  justify-content: center !important;
}
.content-page .screen-placeholder > * {
  flex: 0 0 auto !important;
}
.content-page .screen-placeholder h3,
.content-page .screen-placeholder p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Direct-contact button on the right, both with and without WP's inner wrapper. */
.content-page .contact-panel > .wp-block-buttons,
.content-page .contact-panel > .wp-block-group__inner-container > .wp-block-buttons {
  justify-self: end !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

/* Support focal point is stored by Gutenberg on the Cover block. */

@media (max-width: 800px) {
  .content-page .support-hero-grid > .wp-block-cover.heroimg,
  .content-page .support-hero-grid > .wp-block-group__inner-container > .wp-block-cover.heroimg {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  .content-page .support-columns {
    gap: 18px !important;
  }

  .content-page .contact-panel > .wp-block-buttons,
  .content-page .contact-panel > .wp-block-group__inner-container > .wp-block-buttons {
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
}


/* =========================================================
   v2.14 — Gutenberg authoring defaults + reusable patterns
   ========================================================= */

/* Theme-consistent normal links. Do not recolour buttons/navigation. */
main a:not(.btn):not(.wp-block-button__link):not(.brand):not(.nav-toggle) {
  color: #0a5ea9;
  text-decoration-color: currentColor;
  text-underline-offset: .16em;
}
main a:not(.btn):not(.wp-block-button__link):hover,
main a:not(.btn):not(.wp-block-button__link):focus-visible {
  color: #084b87;
}

/* Standard Gutenberg buttons should already look like Optifile buttons. */
.wp-block-button .wp-block-button__link {
  background: #0a5ea9;
  color: #fff !important;
  border: 2px solid #0a5ea9;
  border-radius: 999px;
  padding: .78em 1.35em;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  background: #084b87;
  border-color: #084b87;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10,94,169,.18);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #0a5ea9 !important;
  border-color: #0a5ea9;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: #0a5ea9;
  color: #fff !important;
}

/* Generic sections used by Optifile patterns. */
.optifile-section {
  padding: 72px 24px;
  box-sizing: border-box;
}
.optifile-section > .wp-block-group__inner-container,
.optifile-section-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.optifile-section.has-optifile-soft-background-color {
  background: #f4f8fb;
}
.optifile-section.has-optifile-dark-background-color {
  color: #fff;
}
.optifile-section.has-optifile-dark-background-color h1,
.optifile-section.has-optifile-dark-background-color h2,
.optifile-section.has-optifile-dark-background-color h3,
.optifile-section.has-optifile-dark-background-color p {
  color: inherit;
}

/* Clickable action cards: same interaction principle as Home.
   No custom Gutenberg attributes are used; the title link is stretched
   over the card with CSS, while concrete phone/e-mail links remain usable. */
.support-card {
  position: relative;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.support-card:hover,
.support-card:focus-within {
  border-color: #0a5ea9 !important;
  box-shadow: 0 6px 20px rgba(10,94,169,.14) !important;
  transform: translateY(-1px);
}
.support-card h3 > a {
  color: #142f49 !important;
  text-decoration: none !important;
}
.support-card h3 > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.support-card .support-card-content p a {
  position: relative;
  z-index: 2;
}

/* Gutenberg's Cover block owns the Support focal position. */

@media (max-width:800px) {
  .optifile-section { padding: 48px 20px; }
}


/* =========================================================
   v2.17 — native Gutenberg Cover styles for hero height
   ========================================================= */
.wp-block-cover.is-style-optifile-hero-compact,
.wp-block-cover.heroimg.is-style-optifile-hero-compact {
  min-height: 350px !important;
  height: 350px !important;
  max-height: 350px !important;
}
.wp-block-cover.is-style-optifile-hero-normal,
.wp-block-cover.heroimg.is-style-optifile-hero-normal {
  min-height: 500px !important;
  height: 500px !important;
  max-height: 500px !important;
}
.wp-block-cover.is-style-optifile-hero-large,
.wp-block-cover.heroimg.is-style-optifile-hero-large {
  min-height: 620px !important;
  height: 620px !important;
  max-height: 620px !important;
}
.wp-block-cover.is-style-optifile-hero-compact .wp-block-cover__image-background,
.wp-block-cover.is-style-optifile-hero-normal .wp-block-cover__image-background,
.wp-block-cover.is-style-optifile-hero-large .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}
@media (max-width: 800px) {
  .wp-block-cover.is-style-optifile-hero-compact,
  .wp-block-cover.heroimg.is-style-optifile-hero-compact {
    min-height: 260px !important;
    height: 260px !important;
    max-height: 260px !important;
  }
  .wp-block-cover.is-style-optifile-hero-normal,
  .wp-block-cover.heroimg.is-style-optifile-hero-normal {
    min-height: 300px !important;
    height: 300px !important;
    max-height: 300px !important;
  }
  .wp-block-cover.is-style-optifile-hero-large,
  .wp-block-cover.heroimg.is-style-optifile-hero-large {
    min-height: 360px !important;
    height: 360px !important;
    max-height: 360px !important;
  }
}


/* =========================================================
   v2.18 — optional percentage zoom for Gutenberg Cover images
   The block remains a normal core/cover block. The percentage is stored
   as a block attribute; frontend presentation is injected at render time.
   ========================================================= */
.wp-block-cover.optifile-cover-zoom {
  overflow: hidden;
}
.wp-block-cover.optifile-cover-zoom > .wp-block-cover__image-background {
  transform: scale(var(--optifile-cover-zoom, 1));
  transform-origin: var(--optifile-cover-focus-x, 50%) var(--optifile-cover-focus-y, 50%);
  transition: transform .12s ease;
}


/* =========================================================
   v2.20 — robust Cover zoom storage
   Zoom percentage is persisted in the normal Gutenberg className as
   optifile-zoom-NNN. A tiny script converts that class to a scale.
   The native Cover focal point continues to own object-position.
   ========================================================= */
.wp-block-cover[class*="optifile-zoom-"] {
  overflow: hidden !important;
}
.wp-block-cover[class*="optifile-zoom-"] > .wp-block-cover__image-background {
  transform-origin: 50% 50% !important;
  will-change: transform;
}


/* =========================================================
   v2.21 — hero width + zoom/focal-point positioning
   ========================================================= */

/* A page-builder-like constrained content width must not shrink a hero pattern. */
.entry-content > .hero.content-hero.alignfull,
.wp-site-blocks > .hero.content-hero.alignfull,
main .hero.content-hero.alignfull {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.hero.content-hero.alignfull > .heroin,
.hero.content-hero.alignfull > .wp-block-group__inner-container > .heroin {
  width: min(1400px, 100%) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Zoomed Cover image is enlarged as an actual image box and shifted according
   to Gutenberg's Left/Top focal percentages. This makes horizontal movement
   visible as well as vertical movement. */
.wp-block-cover.optifile-cover-zoom {
  overflow: hidden !important;
  position: relative !important;
}

.wp-block-cover.optifile-cover-zoom > .wp-block-cover__image-background {
  transform: none !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}


/* =========================================================
   v2.22 — stable hero geometry + true crop/zoom math
   ========================================================= */

/* Force the hero pattern back to the intended two-column V14.6 geometry.
   This wins over Gutenberg's wp-block-columns flex rules. */
.hero.content-hero.alignfull .heroin {
  display: grid !important;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  align-items: stretch !important;
  width: min(1400px,100%) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero.content-hero.alignfull .heroin > .wp-block-column {
  min-width: 0 !important;
  width: auto !important;
  flex-basis: auto !important;
}

/* Zoom must never participate in column sizing. */
.wp-block-cover.optifile-cover-zoom {
  position: relative !important;
  overflow: hidden !important;
}

.wp-block-cover.optifile-cover-zoom > .wp-block-cover__image-background {
  position: absolute !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: none !important;
  margin: 0 !important;
}

@media (max-width:800px) {
  .hero.content-hero.alignfull .heroin {
    display: block !important;
  }
}


/* =========================================================
   v2.23 — simplified Cover zoom.
   The image element becomes a larger crop canvas while object-fit:cover
   keeps the source aspect ratio intact.
   ========================================================= */

.wp-block-cover.optifile-cover-zoom {
  position: relative !important;
  overflow: hidden !important;
}

.wp-block-cover.optifile-cover-zoom > .wp-block-cover__image-background {
  position: absolute !important;
  width: var(--optifile-cover-width, 100%) !important;
  height: var(--optifile-cover-height, 100%) !important;
  left: var(--optifile-cover-left, 0%) !important;
  top: var(--optifile-cover-top, 0%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  margin: 0 !important;
}


/* =========================================================
   v2.25 — generic page geometry
   The previous generic page template wrapped all Gutenberg content in
   .content-section > .generic-content (900px). That was the real reason
   a newly inserted Hero did not behave like the Support hero.
   Generic Gutenberg pages now let their own blocks control layout.
   ========================================================= */

/* Generic page is a clean full-width block canvas. */
.generic-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The Optifile hero should behave exactly like our normal content hero,
   not like content placed inside a 900px article wrapper. */
.generic-page > .hero.content-hero,
.generic-page > .wp-block-group.hero.content-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Neutralise older alignfull breakout rules: no 100vw/calc trick is needed
   anymore because the hero is now a direct child of <main>. */
.generic-page > .hero.content-hero.alignfull {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Same inner geometry as the approved content hero / Support page. */
.generic-page > .hero.content-hero .heroin {
  width: 100% !important;
  max-width: 1400px !important;
  min-height: 500px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  align-items: stretch !important;
}

.generic-page > .hero.content-hero .copy {
  align-self: center !important;
}

.generic-page > .hero.content-hero .heroimg {
  min-height: 500px !important;
  height: 500px !important;
  max-height: 500px !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

/* Ordinary loose blocks on a generic page remain readable, but reusable
   Optifile sections/heroes are allowed to own their full width. */
.generic-page > :where(
  p,
  h1,h2,h3,h4,h5,h6,
  ul,ol,
  blockquote,
  .wp-block-buttons
) {
  width: min(900px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* No artificial white band around reusable sections. */
.generic-page > .optifile-section,
.generic-page > .wp-block-group.content-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width:800px) {
  .generic-page > .hero.content-hero .heroin {
    display: block !important;
    min-height: 0 !important;
  }

  .generic-page > .hero.content-hero .heroimg {
    min-height: 300px !important;
    height: 300px !important;
    max-height: 300px !important;
  }

  .generic-page > :where(
    p,
    h1,h2,h3,h4,h5,h6,
    ul,ol,
    blockquote,
    .wp-block-buttons
  ) {
    width: calc(100% - 32px);
  }
}


/* =========================================================
   v2.26 — Hero column gap
   core/columns adds a default 2em (32px) gap. With a 1400px hero that left
   1368px for the .9/1.1 tracks, making the image 752.4px instead of 770px.
   Support uses a zero-gap grid, so make the reusable Hero identical.
   ========================================================= */
.generic-page > .hero.content-hero .heroin,
.hero.content-hero.alignfull .heroin {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}


/* =========================================================
   v2.28 — Gutenberg buttons match the existing Optifile/Support shape
   ========================================================= */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-optifile-primary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  border-radius: 10px !important;
}


/* =========================================================
   v2.32 — frontend Cover crop now mirrors Gutenberg editor v2.31.
   Gutenberg's native object-position remains authoritative.
   Extra Optifile zoom is applied as a scale around that focal point.
   ========================================================= */
.wp-block-cover[class*="optifile-zoom-"] {
  position: relative !important;
  overflow: hidden !important;
}

.wp-block-cover[class*="optifile-zoom-"] > .wp-block-cover__image-background,
.wp-block-cover[class*="optifile-zoom-"] .wp-block-cover__image-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  /* keep the saved/native object-position */
  transform: scale(var(--optifile-cover-zoom, 1)) !important;
  transform-origin:
    var(--optifile-cover-focus-x, 50%)
    var(--optifile-cover-focus-y, 50%) !important;
  margin: 0 !important;
  will-change: transform;
}


/* =========================================================
   v2.33 — pattern finishing / V14.6 alignment
   ========================================================= */

/* Eyebrow colour from approved V14.6 concept. */
.eyebrow,
.content-page .eyebrow,
.optifile-section .eyebrow {
  color: #0a5ea9 !important;
}

/* Reusable Optifile sections use the same 1400px visual width as the Hero. */
.optifile-section {
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.optifile-section > .optifile-section-inner,
.optifile-section .optifile-section-inner {
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Patterns 1–3 were too vertically generous. Keep sections content-driven. */
.optifile-section:not(.has-optifile-dark-background-color) {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* Dark CTA pattern. */
.optifile-section.has-optifile-dark-background-color,
.has-optifile-dark-background-color.optifile-section {
  background: #142f49 !important;
  color: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 32px 48px !important; /* Compact = default */
}

.optifile-section.has-optifile-dark-background-color h1,
.optifile-section.has-optifile-dark-background-color h2,
.optifile-section.has-optifile-dark-background-color h3,
.optifile-section.has-optifile-dark-background-color p {
  color: inherit;
}

/* Optional CTA height styles: padding, never fixed height. */
.optifile-section.has-optifile-dark-background-color.is-style-optifile-cta-compact {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.optifile-section.has-optifile-dark-background-color.is-style-optifile-cta-normal {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.optifile-section.has-optifile-dark-background-color.is-style-optifile-cta-ruim {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

@media (max-width: 800px) {
  .optifile-section {
    width: calc(100% - 32px) !important;
  }
  .optifile-section:not(.has-optifile-dark-background-color) {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .optifile-section.has-optifile-dark-background-color {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* v2.34: automatic breathing room before footer. */
.optifile-block-page > .optifile-section:last-child,
.optifile-block-page > .wp-block-group.optifile-section:last-child {
  margin-bottom:48px !important;
}
@media (max-width:800px) {
  .optifile-block-page > .optifile-section:last-child,
  .optifile-block-page > .wp-block-group.optifile-section:last-child {
    margin-bottom:32px !important;
  }
}


/* =========================================================
   v2.35 — Support width + compact CTA refinement
   ========================================================= */

/* Bring legacy Support/content wrappers onto the same 1400px grid
   as the Gutenberg hero/sections used on Meet Jur. */
.support-page .content-section,
.support-page .support-section,
.support-page .support-grid,
.support-page .support-inner,
.support-page .content-inner,
.support-page .section-inner,
.support-page .support-selfhelp,
.support-page .support-contact,
.support-page .support-cta,
.content-page.support-page .content-section,
.content-page.support-page .support-section {
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* If an inner wrapper had a legacy 900/1100px cap, let the section own
   the width instead. */
.support-page .content-section > .generic-content,
.support-page .support-section > .generic-content,
.support-page .support-inner > .generic-content,
.support-page .content-inner > .generic-content {
  max-width: 1400px !important;
  width: 100% !important;
}

/* Compact CTA: adopt the tighter vertical rhythm of Support.
   Normal and Ruim remain unchanged. */
.optifile-section.has-optifile-dark-background-color,
.optifile-section.has-optifile-dark-background-color.is-style-optifile-cta-compact {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Match Gutenberg editor to the final Compact frontend height. */
.editor-styles-wrapper .optifile-section.has-optifile-dark-background-color,
.editor-styles-wrapper .optifile-section.has-optifile-dark-background-color.is-style-optifile-cta-compact {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

@media (max-width:800px) {
  .support-page .content-section,
  .support-page .support-section,
  .support-page .support-grid,
  .support-page .support-inner,
  .support-page .content-inner,
  .support-page .section-inner,
  .support-page .support-selfhelp,
  .support-page .support-contact,
  .support-page .support-cta {
    width: calc(100% - 32px) !important;
  }
}


/* =========================================================
   v2.36 — exact Support geometry fix
   Based on the actual rendered Support markup.
   ========================================================= */

/*
 * Support does not have a .support-page class.
 * Its real editable Gutenberg structures are:
 *   .support-columns
 *   .content-grid
 *   .callback-layout
 *   .contact-panel
 * The old theme still limited several of those to 1100/1240px.
 *
 * Align them with the same 1400px visual grid used by the hero
 * and by the Meet Jur Gutenberg sections.
 */
.content-page .support-columns,
.content-page .content-grid,
.content-page .callback-layout,
.content-page .contact-panel {
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Support hero was already correct; keep it explicitly on the same grid. */
.content-page .support-hero-grid {
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/*
 * The dark Support contact panel is intentionally compact vertically.
 * Keep that good Support rhythm while only widening the panel.
 */
.content-page .contact-panel {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Mobile keeps the established narrow page gutter. */
@media (max-width: 800px) {
  .content-page .support-columns,
  .content-page .content-grid,
  .content-page .callback-layout,
  .content-page .contact-panel,
  .content-page .support-hero-grid {
    width: calc(100% - 32px) !important;
  }
}


/* =========================================================
   v2.37 — Optifile dark CTA inner alignment
   Keep the v2.36 outer 1400px geometry and compact height,
   but use the available width like the native Support CTA:
   copy further left, button further right.
   ========================================================= */
.optifile-section.has-optifile-dark-background-color > .optifile-section-inner,
.optifile-section[style*="background-color:#142f49"] > .optifile-section-inner,
.optifile-section[style*="background-color: #142f49"] > .optifile-section-inner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* The CTA pattern uses Columns; let those columns span the inner canvas. */
.optifile-section.has-optifile-dark-background-color > .optifile-section-inner > .wp-block-columns,
.optifile-section[style*="background-color:#142f49"] > .optifile-section-inner > .wp-block-columns,
.optifile-section[style*="background-color: #142f49"] > .optifile-section-inner > .wp-block-columns {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Push the action to the outer right edge on desktop. */
@media (min-width: 782px) {
  .optifile-section.has-optifile-dark-background-color > .optifile-section-inner > .wp-block-columns > .wp-block-column:last-child,
  .optifile-section[style*="background-color:#142f49"] > .optifile-section-inner > .wp-block-columns > .wp-block-column:last-child,
  .optifile-section[style*="background-color: #142f49"] > .optifile-section-inner > .wp-block-columns > .wp-block-column:last-child {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .optifile-section.has-optifile-dark-background-color .wp-block-column:last-child .wp-block-buttons,
  .optifile-section[style*="background-color:#142f49"] .wp-block-column:last-child .wp-block-buttons,
  .optifile-section[style*="background-color: #142f49"] .wp-block-column:last-child .wp-block-buttons {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}


/* =========================================================
   v2.38 — frontend dark CTA: account for WP Group wrapper
   Frontend markup inserts .wp-block-group__inner-container
   between .optifile-section and .optifile-section-inner.
   ========================================================= */

/* Use the full inner width while keeping the v2.36/v2.37 outer geometry. */
.optifile-section.has-optifile-dark-background-color
  > .wp-block-group__inner-container
  > .optifile-section-inner,
.optifile-section[style*="background-color:#142f49"]
  > .wp-block-group__inner-container
  > .optifile-section-inner,
.optifile-section[style*="background-color: #142f49"]
  > .wp-block-group__inner-container
  > .optifile-section-inner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* The pattern itself is a Columns block carrying optifile-section-inner. */
.optifile-section.has-optifile-dark-background-color
  > .wp-block-group__inner-container
  > .wp-block-columns.optifile-section-inner,
.optifile-section[style*="background-color:#142f49"]
  > .wp-block-group__inner-container
  > .wp-block-columns.optifile-section-inner,
.optifile-section[style*="background-color: #142f49"]
  > .wp-block-group__inner-container
  > .wp-block-columns.optifile-section-inner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 782px) {
  .optifile-section.has-optifile-dark-background-color
    > .wp-block-group__inner-container
    > .wp-block-columns.optifile-section-inner
    > .wp-block-column:last-child,
  .optifile-section[style*="background-color:#142f49"]
    > .wp-block-group__inner-container
    > .wp-block-columns.optifile-section-inner
    > .wp-block-column:last-child,
  .optifile-section[style*="background-color: #142f49"]
    > .wp-block-group__inner-container
    > .wp-block-columns.optifile-section-inner
    > .wp-block-column:last-child {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .optifile-section.has-optifile-dark-background-color
    > .wp-block-group__inner-container
    > .wp-block-columns.optifile-section-inner
    > .wp-block-column:last-child
    .wp-block-buttons,
  .optifile-section[style*="background-color:#142f49"]
    > .wp-block-group__inner-container
    > .wp-block-columns.optifile-section-inner
    > .wp-block-column:last-child
    .wp-block-buttons,
  .optifile-section[style*="background-color: #142f49"]
    > .wp-block-group__inner-container
    > .wp-block-columns.optifile-section-inner
    > .wp-block-column:last-child
    .wp-block-buttons {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}


/* =========================================================
   v2.39 — definitive dark CTA frontend width fix
   The real remaining limiter is the OUTER Gutenberg Group wrapper:
   .optifile-section > .wp-block-group__inner-container
   It inherited the historical max-width:1100px rule.
   ========================================================= */
.optifile-section.has-optifile-dark-background-color
  > .wp-block-group__inner-container,
.optifile-section[style*="background-color:#142f49"]
  > .wp-block-group__inner-container,
.optifile-section[style*="background-color: #142f49"]
  > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Its Columns child also spans that full wrapper. */
.optifile-section.has-optifile-dark-background-color
  > .wp-block-group__inner-container
  > .wp-block-columns.optifile-section-inner,
.optifile-section[style*="background-color:#142f49"]
  > .wp-block-group__inner-container
  > .wp-block-columns.optifile-section-inner,
.optifile-section[style*="background-color: #142f49"]
  > .wp-block-group__inner-container
  > .wp-block-columns.optifile-section-inner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   v2.41 — NL / EN language switcher
   ========================================================= */
.language-switcher{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:2px;font-size:13px;color:#8aa0b4;white-space:nowrap}
.language-switcher a{font-size:13px!important;font-weight:600;color:#6f8395!important;text-decoration:none;padding:7px 2px;border-bottom:2px solid transparent}
.language-switcher a:hover{color:#0a5ea9!important}
.language-switcher a.active{color:#0a5ea9!important;border-bottom-color:#0a5ea9}
@media(max-width:800px){.language-switcher{order:2;margin-left:8px;margin-right:0}.menu-toggle{order:3;margin-left:4px}.brand-link{margin-right:auto}.nav nav{z-index:30}}


/* v2.44 — homepage Support visual: language-neutral crop + real HTML overlay */
.support-photo{
  position:relative;
  overflow:hidden;
  min-height:360px;
}
.support-photo > img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:28% center;
  display:block;
}
.support-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 42%, rgba(20,47,73,.24) 72%, rgba(20,47,73,.48) 100%);
  pointer-events:none;
}
.support-photo-overlay{
  position:absolute;
  z-index:2;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:min(42%, 430px);
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  pointer-events:none;
}
.support-photo-overlay strong,
.support-photo-overlay span{
  display:block;
}
.support-photo-overlay strong{
  font-size:clamp(28px,3vw,46px);
  line-height:1.05;
  font-weight:700;
}
.support-photo-overlay span{
  margin-top:6px;
  font-size:clamp(20px,2.1vw,32px);
  line-height:1.12;
  font-weight:600;
}
@media (max-width: 760px){
  .support-photo-overlay{right:6%;width:52%}
  .support-photo > img{object-position:24% center}
}

/* v2.47 — In Store additions; based on the existing homepage visual language */
.optifile-instore-day{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 16px 46px #1b45691a}
.optifile-instore-day>img{display:block;width:100%;height:430px;object-fit:cover}
.optifile-day-overlay{position:absolute;right:3%;top:4%;bottom:4%;width:43%;display:flex;flex-direction:column;justify-content:space-between}
.optifile-day-item{display:grid;grid-template-columns:38px 36px 1fr;align-items:center;gap:5px;background:rgba(255,255,255,.95);border-radius:12px;padding:7px 8px;box-shadow:0 6px 18px #142f4920;font-size:11px;line-height:1.15}
.optifile-day-item strong,.optifile-day-item small{display:block}.optifile-day-item small{opacity:.68;margin-top:2px}.optifile-day-time{font-weight:700}
.optifile-day-item .ico{width:30px;height:30px;margin:0;background:#eaf4fc}.optifile-day-item .ico svg{width:17px;height:17px}
.optifile-process{margin-top:28px}
.optifile-process .steps{max-width:1100px}
.optifile-process .step:not(:last-child):after{background:transparent!important;width:auto!important;height:auto!important}
.optifile-process .step small{display:none}
.optifile-cycle{position:relative;width:min(500px,100%);aspect-ratio:1;margin:0 auto}
.optifile-cycle:before{content:"";position:absolute;inset:17%;border:2px solid #d7e8f4;border-radius:50%}
.optifile-cycle .cycle-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:#f5f8fb;color:#0a5ea9}
.optifile-cycle .cycle-center svg{width:43px;height:43px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.optifile-cycle .cycle-node{position:absolute;left:50%;top:50%;width:110px;text-align:center;transform:translate(-50%,-50%)}
.optifile-cycle .cycle-node .ico{width:54px;height:54px;margin:0 auto 6px}
.optifile-cycle .cycle-node b{font-size:13px}
.optifile-cycle .n0{transform:translate(-50%,-50%) translateY(-192px)}
.optifile-cycle .n1{transform:translate(-50%,-50%) translate(166px,-96px)}
.optifile-cycle .n2{transform:translate(-50%,-50%) translate(166px,96px)}
.optifile-cycle .n3{transform:translate(-50%,-50%) translateY(192px)}
.optifile-cycle .n4{transform:translate(-50%,-50%) translate(-166px,96px)}
.optifile-cycle .n5{transform:translate(-50%,-50%) translate(-166px,-96px)}
.optifile-feature-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.optifile-feature-cloud span{padding:8px 13px;border-radius:999px;background:#f5f8fb;border:1px solid #dce8f2;font-weight:600}
@media(max-width:800px){
 .optifile-instore-day>img{height:auto}
 .optifile-day-overlay{position:static;width:auto;padding:10px;background:#f5f8fb;gap:7px}
 .optifile-day-item{font-size:13px;grid-template-columns:48px 40px 1fr}
 .optifile-process .step:not(:last-child):after{content:"";background:#c8def0!important;width:2px!important;height:18px!important}
 .optifile-cycle{transform:scale(.72);margin:-55px auto}
}

/* v2.48 — In Store review refinements */
@media(max-width:800px){
  /* Workday: photo disappears, agenda remains */
  .optifile-instore-day>img{display:none!important}
  .optifile-instore-day{box-shadow:none;background:#f5f8fb}
  .optifile-day-overlay{position:static!important;width:auto!important;padding:10px!important}

  /* Sections explicitly marked photo-optional retain their text/process content */
  .optifile-mobile-hide-photo{display:none!important}

  /* Process layouts stay readable without the supporting photograph */
  .optifile-process .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 12px}
  .optifile-process .step:not(:last-child):after{display:none!important}
}
@media(max-width:480px){
  .optifile-process .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* v2.49 — "Alles voor de dagelijkse praktijk" */
.optifile-capabilities{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:34px 22px;
  align-items:start;
  margin-top:32px;
}
.optifile-capability{
  text-align:center;
  color:#142f49;
  font-weight:700;
  line-height:1.25;
}
.optifile-capability .ico{
  width:76px;
  height:76px;
  margin:0 auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaf5fc;
  color:#0a5ea9;
}
.optifile-capability .ico svg{
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.optifile-capabilities .optifile-capability:nth-child(n+7){
  transform:translateX(50%);
}
@media(max-width:1000px){
  .optifile-capabilities{grid-template-columns:repeat(3,minmax(0,1fr))}
  .optifile-capabilities .optifile-capability:nth-child(n+7){transform:none}
}
@media(max-width:600px){
  .optifile-capabilities{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
  .optifile-capability .ico{width:64px;height:64px}
  .optifile-capability .ico svg{width:31px;height:31px}
}

/* v2.50 — Optifile Online */
.optifile-online-overview{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:26px 18px;
  margin-top:32px;
}
.optifile-online-item{text-align:center;color:#142f49;font-weight:700;line-height:1.25}
.optifile-online-item .ico,
.optifile-online-feature .ico,
.optifile-online-loop .ico{
  display:grid;place-items:center;border-radius:50%;
  background:#eaf5fc;color:#0a5ea9;
}
.optifile-online-item .ico{width:76px;height:76px;margin:0 auto 12px}
.optifile-online-item .ico svg{width:38px;height:38px}
.optifile-online-item small{display:block;font-weight:400;opacity:.72;margin-top:5px;line-height:1.35}

.optifile-online-feature{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:22px;
  align-items:start;
}
.optifile-online-feature .ico{width:72px;height:72px}
.optifile-online-feature .ico svg{width:36px;height:36px}
.optifile-online-feature h3{margin:2px 0 8px;font-size:1.35rem}
.optifile-online-feature p{margin:0}

.optifile-online-loop{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;margin:30px 0 8px;
}
.optifile-online-loop .node{text-align:center;min-width:112px;font-weight:700}
.optifile-online-loop .ico{width:66px;height:66px;margin:0 auto 8px}
.optifile-online-loop .ico svg{width:32px;height:32px}
.optifile-online-loop .arrow{font-size:26px;color:#9dbbd2;font-weight:400}

.optifile-online-hero .wp-block-cover__image-background{
  object-position:center center;
}
@media(max-width:1000px){
  .optifile-online-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .optifile-online-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .optifile-online-item .ico{width:64px;height:64px}
  .optifile-online-item .ico svg{width:31px;height:31px}
  .optifile-online-feature{grid-template-columns:62px 1fr;gap:15px}
  .optifile-online-feature .ico{width:56px;height:56px}
  .optifile-online-feature .ico svg{width:28px;height:28px}
  .optifile-online-loop{gap:10px}
  .optifile-online-loop .arrow{display:none}
  .optifile-online-loop .node{width:44%;min-width:0}
}

/* v2.51 — Online refinements */
.optifile-online-actionflow{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:32px;
}
.optifile-online-actionflow .step{
  width:150px;
  text-align:center;
  color:#142f49;
  font-weight:700;
}
.optifile-online-actionflow .ico{
  width:68px;height:68px;margin:0 auto 9px;border-radius:50%;
  display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9;
}
.optifile-online-actionflow .ico svg{width:33px;height:33px}
.optifile-online-actionflow .arrow{
  color:#9dbbd2;font-size:26px;line-height:68px;
}
.optifile-online-webvisual{
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.optifile-online-webvisual .devices{
  position:relative;
  width:min(100%,430px);
  height:245px;
}
.optifile-online-webvisual .laptop{
  position:absolute;left:0;top:18px;width:82%;height:185px;
  border:7px solid #142f49;border-radius:10px;background:#fff;
  overflow:hidden;
}
.optifile-online-webvisual .laptop:after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-15px;height:9px;
  border-radius:0 0 10px 10px;background:#142f49;
}
.optifile-online-webvisual .phone{
  position:absolute;right:0;bottom:0;width:88px;height:166px;
  border:6px solid #142f49;border-radius:16px;background:#fff;overflow:hidden;
}
.optifile-online-webvisual .sitebar{height:25%;background:#eaf5fc;border-bottom:1px solid #d4e9f7}
.optifile-online-webvisual .brandline{height:9px;width:46%;margin:15px;background:#0a5ea9;border-radius:5px}
.optifile-online-webvisual .contentline{height:7px;width:68%;margin:10px 15px;background:#d8e3ec;border-radius:5px}
.optifile-online-webvisual .contentline.short{width:45%}
.optifile-online-webvisual .phone .brandline{margin:12px 10px;width:55%}
.optifile-online-webvisual .phone .contentline{margin:8px 10px;width:70%}
@media(max-width:700px){
  .optifile-online-actionflow .step{width:42%}
  .optifile-online-actionflow .arrow{display:none}
  .optifile-online-webvisual{min-height:230px;padding:10px}
  .optifile-online-webvisual .devices{height:205px}
  .optifile-online-webvisual .laptop{height:150px}
  .optifile-online-webvisual .phone{width:72px;height:140px}
}

/* v2.52 — Works with */
.works-hub{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;margin-top:32px}.works-hub .item,.works-card{padding:24px;border:1px solid #dbe7ef;border-radius:16px;background:#fff}.works-hub .ico,.works-flow .ico{width:68px;height:68px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9;font-size:28px}.works-groups{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.works-names{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.works-names span{padding:8px 11px;border-radius:9px;background:#f5f8fb;font-weight:650}.works-services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}.works-flow{display:flex;align-items:center;justify-content:center;gap:15px;margin:28px 0;flex-wrap:wrap}.works-flow .node{text-align:center;min-width:150px;font-weight:700}.works-flow .arrow{font-size:28px;color:#9dbbd2}@media(max-width:850px){.works-hub,.works-services{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.works-hub,.works-services,.works-groups{grid-template-columns:1fr}.works-flow .arrow{display:none}.works-flow .node{width:45%;min-width:0}}

/* v2.53 — Works-with Gutenberg-safe refresh */
.optifile-works-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  max-width:520px;
  margin:0 auto;
}
.optifile-works-nav a{
  min-height:154px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px;
  text-align:center;
  text-decoration:none;
  border:1px solid #d5e3ed;
  border-radius:15px;
  background:#fff;
  color:#142f49;
  font-weight:700;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.optifile-works-nav a:hover,.optifile-works-nav a:focus{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,47,73,.10);
  border-color:#9dc9e8;
}
.optifile-works-nav .ico{
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9;
}
.optifile-works-nav .ico svg{width:33px;height:33px}
.optifile-anchor{scroll-margin-top:110px}
.optifile-blue-contact{
  background:#0a5ea9!important;color:#fff;
}
.optifile-blue-contact h2,.optifile-blue-contact p,.optifile-blue-contact .eyebrow{color:#fff!important}
.optifile-blue-contact .wp-block-button__link{
  background:#fff!important;color:#0a5ea9!important;
}
@media(max-width:600px){
  .optifile-works-nav{gap:12px}
  .optifile-works-nav a{min-height:132px;padding:16px}
  .optifile-works-nav .ico{width:58px;height:58px}
}

/* v2.56 — Works-with visual repair */
.optifile-deviceflow{display:flex;align-items:flex-start;justify-content:center;gap:18px;flex-wrap:nowrap;margin:34px auto 24px;width:100%}
.optifile-deviceflow .node{flex:0 1 190px;min-width:150px;text-align:center;font-weight:700;color:#142f49}
.optifile-deviceflow .ico{width:68px;height:68px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9}
.optifile-deviceflow .ico svg{width:33px;height:33px}.optifile-deviceflow .arrow{flex:0 0 auto;align-self:center;margin-top:15px;color:#9dbbd2;font-size:30px;line-height:1}
.optifile-namecloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0;width:100%}
.optifile-namecloud span{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border-radius:9px;background:#fff;border:1px solid #dbe7ef;color:#142f49;font-weight:650;line-height:1.2}
.optifile-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px;width:100%}
.optifile-service-card{min-width:0;padding:24px 20px;border:1px solid #dbe7ef;border-radius:16px;background:#fff;text-align:left}
.optifile-service-card .ico{width:60px;height:60px;margin:0 0 16px;border-radius:50%;display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9}
.optifile-service-card .ico svg{width:30px;height:30px}.optifile-service-card h3{margin:0 0 10px;font-size:1.1rem;color:#142f49}.optifile-service-card p{margin:0;line-height:1.55}
.optifile-partner-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px;width:100%}
.optifile-partner-card{min-width:0;padding:28px;border:1px solid #dbe7ef;border-radius:18px;background:#fff}
.optifile-partner-card .partner-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.optifile-partner-card .partner-ico{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9}
.optifile-partner-card .partner-ico svg{width:29px;height:29px}.optifile-partner-card h3{margin:0;color:#142f49;font-size:1.25rem}.optifile-partner-card>p{margin:0 0 18px}
.optifile-partner-card .optifile-namecloud{justify-content:flex-start;margin-top:0}.optifile-partner-card .optifile-namecloud span{background:#f5f8fb}
.optifile-optiplaza-button{display:flex;justify-content:center;margin-top:28px}
.optifile-works-contact{background:#142f49!important;color:#fff}.optifile-works-contact h2,.optifile-works-contact p,.optifile-works-contact .eyebrow{color:#fff!important}
.optifile-works-contact .wp-block-button__link{background:#0a5ea9!important;color:#fff!important}.optifile-works-contact .wp-block-columns{align-items:center;margin-bottom:0}.optifile-works-contact .wp-block-buttons{margin-bottom:0}
@media(max-width:850px){.optifile-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.optifile-partner-groups{grid-template-columns:1fr}}
@media(max-width:700px){.optifile-deviceflow{gap:10px;flex-wrap:wrap}.optifile-deviceflow .node{flex:1 1 28%;min-width:100px}.optifile-deviceflow .arrow{font-size:24px}}
@media(max-width:600px){.optifile-service-grid{grid-template-columns:1fr}.optifile-deviceflow .arrow{display:none}.optifile-deviceflow .node{flex:1 1 30%}.optifile-partner-card{padding:22px}}

/* v2.57 */
.optifile-service-card{display:flex;flex-direction:column;min-height:330px;overflow:hidden;padding:0}
.optifile-service-card .service-main{padding:22px 20px 18px;flex:1}
.optifile-service-card .service-partners{padding:14px 20px;background:#f5f8fb;border-top:1px solid #e1ebf2;line-height:1.55;font-size:.92rem;color:#36536c}
.optifile-service-card .service-subtitle{margin:0 0 9px;font-weight:750;line-height:1.35;color:#142f49}
.optifile-service-card .service-copy{margin:0;line-height:1.55}
.optifile-partner-card .partner-ico.glasses svg,.optifile-partner-card .partner-ico.lenses svg{width:34px;height:34px}
.optifile-optiplaza-button .wp-block-buttons{justify-content:center}
.optifile-works-contact .wp-block-column:last-child .wp-block-buttons{justify-content:flex-end}
.optifile-works-contact .wp-block-button__link{background:#fff!important;color:#0a5ea9!important}
@media(max-width:781px){.optifile-works-contact .wp-block-column:last-child .wp-block-buttons{justify-content:flex-start}}

/* v2.58 — Works-with final layout refinements */
.optifile-service-grid,
.optifile-partner-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin-top:30px;
  width:100%;
}
.optifile-service-card,
.optifile-partner-card{
  min-height:0;
  padding:28px 30px;
  border:0;
  border-radius:0;
  background:#fff;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  column-gap:20px;
  align-items:start;
}
.optifile-service-card:nth-child(3),
.optifile-service-card:nth-child(4){background:#f5f8fb}
.optifile-service-card .service-main{padding:0;display:contents}
.optifile-service-card .ico,
.optifile-partner-card .partner-ico{
  grid-column:1;
  grid-row:1 / span 5;
  width:64px;height:64px;margin:0;border-radius:50%;
  display:grid;place-items:center;background:#eaf5fc;color:#0a5ea9;
}
.optifile-service-card h3,
.optifile-service-card .service-subtitle,
.optifile-service-card .service-copy,
.optifile-service-card .service-partners{
  grid-column:2;
}
.optifile-service-card h3{margin:0 0 8px}
.optifile-service-card .service-subtitle{margin:0 0 7px}
.optifile-service-card .service-copy{margin:0}
.optifile-service-card .service-partners{
  padding:10px 0 0;
  margin-top:10px;
  background:transparent;
  border:0;
  border-top:1px solid #e1ebf2;
}

.optifile-partner-card .partner-head{display:contents}
.optifile-partner-card h3,
.optifile-partner-card > p,
.optifile-partner-card .optifile-namecloud{grid-column:2}
.optifile-partner-card h3{margin:0 0 8px}
.optifile-partner-card > p{margin:0 0 12px}
.optifile-partner-card .optifile-namecloud{
  justify-content:flex-start;
  gap:7px 12px;
  margin:0;
}
.optifile-partner-card .optifile-namecloud span{
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-weight:650;
}
.optifile-partner-card:nth-child(2){background:#f5f8fb}
.optifile-optiplaza-button{margin-top:24px}

/* Match the established Demo CTA button again. */
.optifile-works-contact .wp-block-button__link{
  background:#0a5ea9!important;
  color:#fff!important;
  border-color:#0a5ea9!important;
}

@media(max-width:781px){
  .optifile-service-grid,.optifile-partner-groups{grid-template-columns:1fr}
  .optifile-service-card:nth-child(odd),.optifile-partner-card:nth-child(odd){background:#fff}
  .optifile-service-card:nth-child(even),.optifile-partner-card:nth-child(even){background:#f5f8fb}
}
@media(max-width:520px){
  .optifile-service-card,.optifile-partner-card{
    grid-template-columns:60px minmax(0,1fr);
    column-gap:14px;padding:24px 18px;
  }
  .optifile-service-card .ico,.optifile-partner-card .partner-ico{width:54px;height:54px}
}

/* v2.59 Optiplaza */
.optifile-partner-groups{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;width:100%!important;margin-top:30px!important}
.optifile-partner-groups .optifile-partner-card{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;column-gap:20px!important;align-items:start!important;padding:28px 30px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
.optifile-partner-groups .optifile-partner-card:nth-child(2){background:#f5f8fb!important}
.optifile-partner-groups .partner-head{display:contents!important}
.optifile-partner-groups .partner-ico{grid-column:1!important;grid-row:1/span 4!important;width:64px!important;height:64px!important;margin:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#eaf5fc!important;color:#0a5ea9!important}
.optifile-partner-groups .partner-ico svg{width:34px!important;height:34px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.optifile-partner-groups h3,.optifile-partner-groups .partner-copy,.optifile-partner-groups .partner-names{grid-column:2!important}
.optifile-partner-groups h3{margin:3px 0 9px!important}.optifile-partner-groups .partner-copy{margin:0 0 14px!important;line-height:1.55!important}
.optifile-partner-groups .partner-names{margin-top:4px!important;padding-top:12px!important;border-top:1px solid #e1ebf2!important;color:#36536c!important;font-size:.92rem!important;line-height:1.65!important}
@media(max-width:781px){.optifile-partner-groups{grid-template-columns:1fr!important}}
@media(max-width:520px){.optifile-partner-groups .optifile-partner-card{grid-template-columns:60px minmax(0,1fr)!important;column-gap:14px!important;padding:24px 18px!important}.optifile-partner-groups .partner-ico{width:54px!important;height:54px!important}}

/* v2.60 Contact */
.optifile-contact-layout{gap:54px}.optifile-contact-intro .contact-direct{display:grid;gap:14px;margin-top:28px}
.optifile-contact-intro .contact-direct a{color:#142f49;text-decoration:none;font-weight:700}.optifile-contact-intro .contact-direct small{display:block;font-weight:400;color:#526b80;margin-top:2px}
.optifile-contact-form{background:#fff;border:1px solid #dbe7ef;border-radius:18px;padding:30px}.optifile-contact-form label{display:block;font-weight:700;color:#142f49;margin:0 0 7px}
.optifile-contact-form input,.optifile-contact-form select,.optifile-contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #cbdbe7;border-radius:9px;background:#fff;padding:12px 13px;font:inherit;color:#142f49}
.optifile-contact-form textarea{min-height:150px;resize:vertical}.optifile-contact-form .form-row{margin-bottom:18px}.optifile-contact-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.optifile-contact-form .subject-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 24px}.optifile-contact-form .subject-choice{position:relative}
.optifile-contact-form .subject-choice input{position:absolute;opacity:0;pointer-events:none}.optifile-contact-form .subject-choice span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 10px;border:1px solid #cbdbe7;border-radius:10px;font-weight:700;text-align:center;cursor:pointer}
.optifile-contact-form .subject-choice input:checked+span{background:#0a5ea9;color:#fff;border-color:#0a5ea9}.optifile-contact-form .context-help{padding:14px 16px;margin:-10px 0 20px;background:#f5f8fb;border-radius:10px;color:#36536c}
.optifile-contact-form .conditional-field{display:none}.optifile-contact-form .conditional-field.is-visible{display:block}.optifile-contact-form .form-note{font-size:.9rem;color:#526b80}
.optifile-contact-form .contact-result{margin:0 0 18px;padding:13px 15px;border-radius:9px;background:#edf7ed}.optifile-contact-form .contact-result.error{background:#fff1f1}
.optifile-contact-form .hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:781px){.optifile-contact-layout{gap:30px}.optifile-contact-form .form-grid{grid-template-columns:1fr}}@media(max-width:560px){.optifile-contact-form{padding:22px 18px}.optifile-contact-form .subject-choices{grid-template-columns:1fr}}

/* v2.61 */
.optifile-contact-form button.btn{appearance:none;border:0;box-shadow:none;background:#0a5ea9;color:#fff;border-radius:10px;padding:13px 20px;min-height:48px;font:inherit;font-weight:750;line-height:1.2;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.optifile-contact-form button.btn:hover{transform:translateY(-1px)}
.optifile-contact-form button.btn:focus-visible{outline:3px solid rgba(10,94,169,.25);outline-offset:3px}
.optifile-contact-form button.btn:active{transform:none}

/* v2.62 */
.foot-links .footer-menu{list-style:none;margin:0;padding:0}.foot-links .footer-menu li{margin:0 0 7px;padding:0}.foot-links .footer-menu a{color:inherit;text-decoration:none}.foot-links .footer-menu a:hover,.foot-links .footer-menu a:focus{text-decoration:underline}

/* v2.63 — native WordPress top menu */
#mainnav{margin-left:auto;display:flex;align-items:center;height:100%}
#mainnav .primary-menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
#mainnav .primary-menu>li{list-style:none;margin:0;padding:0}
#mainnav .primary-menu>li>a{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
#mainnav .primary-menu>li>a:hover,#mainnav .primary-menu>li>a:focus-visible,#mainnav .primary-menu>.current-menu-item>a,#mainnav .primary-menu>.current-page-ancestor>a{color:var(--blue)}
#mainnav .primary-menu a.optifile-demo-menu-link{background:var(--blue);color:#fff!important;padding:11px 16px;border-radius:8px;font-weight:700;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
#mainnav .primary-menu a.optifile-demo-menu-link:hover,#mainnav .primary-menu a.optifile-demo-menu-link:focus-visible{background:#084b86;box-shadow:0 6px 16px #0a5ea933;transform:translateY(-1px)}
@media(max-width:800px){
 #mainnav{display:none}
 #mainnav.open{display:flex}
 #mainnav .primary-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;margin:0;padding:0}
 #mainnav .primary-menu>li{width:100%}
 #mainnav .primary-menu>li>a{display:block!important;padding:12px 10px;font-size:16px}
 #mainnav .primary-menu a.optifile-demo-menu-link{text-align:center;margin-top:6px;padding:12px 16px}
}

/* v2.64 — keep regular top-menu items dark after navigation */
#mainnav .primary-menu>li>a,
#mainnav .primary-menu>li>a:visited,
#mainnav .primary-menu>.current-menu-item>a,
#mainnav .primary-menu>.current_page_item>a,
#mainnav .primary-menu>.current-page-ancestor>a,
#mainnav .primary-menu>.current-menu-ancestor>a{
  color:var(--ink);
}
#mainnav .primary-menu>li>a:hover,
#mainnav .primary-menu>li>a:focus-visible{
  color:var(--blue);
}
#mainnav .primary-menu a.optifile-demo-menu-link,
#mainnav .primary-menu a.optifile-demo-menu-link:visited{
  color:#fff!important;
}


/* v2.66 — native WordPress mobile menu ------------------------------------- */
@media (max-width: 860px) {
  .nav { position: relative; }

  .nav #mainnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background: #fff;
    padding: 14px 16px 18px;
    box-sizing: border-box;
    border-top: 1px solid #e2e8ef;
    box-shadow: 0 10px 24px rgba(20,47,73,.10);
  }

  .nav #mainnav.open { display: block; }

  .nav #mainnav .primary-menu,
  .nav #mainnav > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav #mainnav .primary-menu > li,
  .nav #mainnav > ul > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav #mainnav .primary-menu > li > a,
  .nav #mainnav > ul > li > a {
    display: block;
    width: 100%;
    padding: 11px 10px;
    box-sizing: border-box;
    line-height: 1.3;
  }

  .nav #mainnav .optifile-demo-menu-link {
    margin-top: 8px;
    text-align: center;
  }
}


/* v2.67 — mobile menu height fix.
   v2.66 positioned the native WP menu correctly, but the original
   .nav nav { height:100% } still constrained its white panel to header height. */
@media (max-width: 860px) {
  .nav #mainnav,
  .nav #mainnav.open {
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
}


/* v2.67 — legal link beside copyright */
.copyright a{color:inherit;text-decoration:none}
.copyright a:hover,.copyright a:focus{text-decoration:underline}
.copyright-separator{display:inline-block;margin:0 .4em}


/* v2.68 — keep all Support card icons perfectly circular ------------------- */
.support-grid .support-card .ico,
.support-card .ico {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  flex: 0 0 54px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  box-sizing: border-box;
}