/* ============================================================
   Optima Digital theme — chrome + WordPress-only styles.
   The design system tokens live in assets/css/ds/ and each
   template carries its page's own <style> block (transposed
   verbatim from the approved static build in site/). This file
   only covers what WordPress adds on top: the mobile menu,
   Gravity Forms fields, pagination, and the search form.
   ============================================================ */

/* ---- Base (matches the static pages' shared rules) ---- */
*{box-sizing:border-box}
body{margin:0;background:#fdfdfb;font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased}
a{color:var(--od-blue);text-decoration:none}
a:hover{color:var(--od-blue-700)}
@keyframes od-spin{to{transform:rotate(360deg)}}
.od-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.od-nl{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--od-navy);text-decoration:none;transition:color var(--dur-base)}
.od-nl:hover{color:var(--od-blue)}
.od-grain{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Services dropdown (desktop nav) ---- */
.od-navdrop{position:relative;display:flex;align-items:center}
.od-navdrop > .od-nl{display:inline-flex;align-items:center}
.od-navdrop-menu{position:absolute;top:100%;left:-14px;padding-top:14px;min-width:320px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur-base),transform var(--dur-base),visibility var(--dur-base);filter:drop-shadow(0 10px 24px rgba(18,22,58,.14));z-index:70}
.od-navdrop:hover .od-navdrop-menu,
.od-navdrop:focus-within .od-navdrop-menu{opacity:1;visibility:visible;transform:none}
.od-navdrop-menu > a{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;background:#fff;text-decoration:none;border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle)}
.od-navdrop-menu > a:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-top:1px solid var(--border-subtle);padding-top:15px}
.od-navdrop-menu > a:hover{background:var(--od-gray-50)}
.od-dd-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.od-dd-text{display:flex;flex-direction:column;gap:2px}
.od-dd-text strong{font:600 14px var(--font-body);color:var(--od-navy)}
.od-dd-text em{font-style:normal;font:400 12.5px var(--font-body);color:var(--od-gray-500)}
.od-navdrop-menu > .od-dd-all{border-radius:0 0 var(--radius-lg) var(--radius-lg);border-bottom:1px solid var(--border-subtle);border-top:1px solid var(--border-subtle);font:600 13px var(--font-display);color:var(--od-blue);padding:12px 16px}

/* ---- Mobile menu (theme addition) ---- */
.od-menubtn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:#fff;color:var(--od-navy);cursor:pointer}
.od-menubtn .od-ico-close{display:none}
.od-menubtn.open .od-ico-menu{display:none}
.od-menubtn.open .od-ico-close{display:block}
.od-mobilemenu{display:none}
.od-mobilemenu[hidden]{display:none !important}
@media(max-width:880px){
  .od-menubtn{display:inline-flex}
  .od-mobilemenu{display:flex;flex-direction:column;gap:4px;padding:10px clamp(20px,4vw,44px) 18px;background:rgba(253,253,251,.98);border-bottom:1px solid var(--border-subtle)}
  .od-mobilemenu .od-nl{padding:11px 2px;font-size:16px;border-bottom:1px solid var(--border-subtle)}
  .od-mobilemenu .od-nl:last-child{border-bottom:none}
  .od-mobilemenu .od-mm-child{padding-left:18px;font-size:14.5px;color:var(--od-gray-600)}
}

/* ---- Gravity Forms: forms are conversion surfaces — designed to the T.
   GF's bundled CSS is disabled (gform_disable_form_theme_css); everything
   the plugin renders is styled here to match the static build's fields. ---- */
.gform_wrapper{font-family:var(--font-body)}
.gform_wrapper .gform_heading,.gform_wrapper .gform_required_legend{display:none}
.gform_wrapper form{display:flex;flex-direction:column;gap:16px}
.gform_wrapper .gform_fields{display:grid;grid-template-columns:repeat(12,1fr);gap:15px 12px;list-style:none;margin:0;padding:0}
.gform_wrapper .gfield{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.gform_wrapper .gfield--width-half{grid-column:span 6}
.gform_wrapper .gfield--width-third{grid-column:span 4}
@media(max-width:640px){.gform_wrapper .gfield--width-half,.gform_wrapper .gfield--width-third{grid-column:1/-1}}
.gform_wrapper .gfield.gfield--type-honeypot{position:absolute !important;left:-9999px !important}
.gform_wrapper .gfield_label{font:600 13px var(--font-body);color:var(--od-navy);margin:0}
.gform_wrapper .gfield_required{color:var(--od-red);padding-left:2px}
.gform_wrapper .ginput_container{display:block}
.gform_wrapper .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gform_wrapper .ginput_complex span{display:flex;flex-direction:column-reverse;gap:5px}
.gform_wrapper .ginput_complex label{font:600 11.5px var(--font-body);color:var(--od-gray-500)}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper input[type=url],
.gform_wrapper select,
.gform_wrapper textarea{width:100%;font-family:var(--font-body);font-size:15px;padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);outline:none;background:#fff;color:var(--od-navy);transition:border-color var(--dur-base),box-shadow var(--dur-base);-webkit-appearance:none;appearance:none}
.gform_wrapper select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b2150' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.gform_wrapper textarea{min-height:110px;resize:vertical}
.gform_wrapper ::placeholder{color:var(--od-gray-400);opacity:1}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{border-color:var(--od-blue);box-shadow:0 0 0 3px rgba(18,114,196,.14)}
.gform_wrapper .gfield_description,.gform_wrapper .ginput_counter{font-size:12px;color:var(--od-gray-400)}
.gform_wrapper .gform_footer{margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.gform_wrapper input[type=submit],
.gform_wrapper button[type=submit]{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:16px;padding:15px;border:none;border-radius:var(--radius-md);background:var(--od-blue);color:#fff;box-shadow:var(--shadow-sm);cursor:pointer;transition:background var(--dur-base),box-shadow var(--dur-base)}
.gform_wrapper input[type=submit]:hover,
.gform_wrapper button[type=submit]:hover{background:var(--od-blue-700);box-shadow:var(--shadow-md)}
.gform_wrapper input[type=submit]:focus-visible,
.gform_wrapper button[type=submit]:focus-visible{outline:3px solid rgba(18,114,196,.35);outline-offset:2px}
.gform_wrapper .gform_ajax_spinner{margin:8px auto 0;display:block}
.gform_wrapper .gfield--type-captcha .ginput_container{margin-top:2px}
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error select,.gform_wrapper .gfield_error textarea{border-color:var(--od-red)}
.gform_wrapper .gfield_validation_message,.gform_wrapper .validation_message{font-size:12.5px;color:var(--od-red-700);background:none;border:none;padding:0}
.gform_wrapper .gform_validation_errors{border:1px solid var(--od-red);border-radius:var(--radius-md);padding:12px 14px;background:#fdf1f0;margin:0 0 4px}
.gform_wrapper .gform_validation_errors h2{font:600 14px var(--font-body);color:var(--od-red-700);margin:0;letter-spacing:0}
.gform_confirmation_message{font-size:16px;line-height:1.6;color:var(--od-navy);background:#e3f5ea;border:1px solid var(--od-green);border-radius:var(--radius-md);padding:18px 20px}

/* ---- Pagination (blog index / archives / search) ---- */
.od-pagenav{margin-top:38px}
.od-pagenav .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.od-pagenav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:9px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);font:600 14px var(--font-display);color:var(--od-navy);background:#fff;transition:border-color var(--dur-base),color var(--dur-base)}
.od-pagenav .page-numbers:hover{border-color:var(--od-blue);color:var(--od-blue)}
.od-pagenav .page-numbers.current{background:var(--od-blue);border-color:var(--od-blue);color:#fff}
.od-pagenav .page-numbers.dots{border:none;background:none}

/* ---- Search form ---- */
.od-search{display:flex;gap:10px}
.od-search input[type=search]{flex:1;font-family:var(--font-body);font-size:15px;padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);outline:none;background:#fff;color:var(--od-navy)}
.od-search input[type=search]:focus{border-color:var(--od-blue);box-shadow:0 0 0 3px rgba(18,114,196,.14)}
.od-search button{font-family:var(--font-display);font-weight:600;font-size:14px;padding:12px 20px;border:none;border-radius:var(--radius-md);background:var(--od-blue);color:#fff;cursor:pointer;transition:background var(--dur-base)}
.od-search button:hover{background:var(--od-blue-700)}

/* ---- WordPress content images ---- */
.od-prose img{max-width:100%;height:auto;border-radius:var(--radius-md)}

/* ---- Insights: category filter chips ---- */
.od-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.od-chip{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--font-body);color:var(--od-gray-600);background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:8px 15px;transition:border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base)}
.od-chip .dot{width:7px;height:7px;border-radius:50%}
.od-chip:hover{border-color:var(--od-blue);color:var(--od-blue)}
.od-chip.active{background:var(--od-navy);border-color:var(--od-navy);color:#fff}

/* ---- Post share row ---- */
.od-share{display:flex;align-items:center;gap:8px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.od-share .lbl{font:700 11px var(--font-display);letter-spacing:.13em;text-transform:uppercase;color:var(--od-gray-500);margin-right:6px}
.od-share a,.od-share .od-share-copy{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:#fff;color:var(--od-navy);cursor:pointer;transition:border-color var(--dur-base),color var(--dur-base)}
.od-share a:hover,.od-share .od-share-copy:hover{border-color:var(--od-blue);color:var(--od-blue)}
.od-share .od-share-copy{width:auto;padding:0 10px;gap:6px}
.od-share .od-share-copy .ok{font:600 12px var(--font-body);color:var(--od-green-700)}

/* ---- Results archive: bento case grid ---- */
.od-cases{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.od-cases a{text-decoration:none}
.od-case-feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,42%) 1fr;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:box-shadow var(--dur-base),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.od-case-feat:hover{box-shadow:var(--shadow-lg)}
.od-case-feat .panel{background:var(--od-grad-hero);color:#fff;position:relative;overflow:hidden;padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;justify-content:space-between;min-height:280px}
.od-case-feat .eyb{position:relative;font:700 11px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--od-gold)}
.od-case-feat .metricwrap{position:relative;margin-top:auto}
.od-case-feat .big{display:block;font:600 clamp(46px,6vw,72px) var(--font-mono);line-height:1;color:#fff}
.od-case-feat .biglab{display:block;font-size:13.5px;color:var(--text-on-dark-muted);margin-top:6px;max-width:26ch}
.od-case-feat .body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column}
.od-case-feat h2{font:800 clamp(24px,2.8vw,34px)/1.1 var(--font-display);letter-spacing:-.025em;color:var(--od-navy);margin:0 0 14px}
.od-case-feat p{font-size:15px;line-height:1.6;color:var(--od-gray-600);margin:0 0 18px}
.od-case-feat .meta{font-size:13px;color:var(--od-gray-500);margin-bottom:20px}
.od-case-tile{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:clamp(24px,2.8vw,32px);position:relative;overflow:hidden;transition:box-shadow var(--dur-base),transform var(--dur-base),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.od-case-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.od-case-tile.span2{grid-column:1/-1}
.od-case-tile .bar{position:absolute;top:0;left:0;right:0;height:5px}
.od-case-tile .metric{font:600 clamp(40px,4.6vw,56px) var(--font-mono);line-height:1;margin:6px 0 4px}
.od-case-tile .mlab{font-size:13px;color:var(--od-gray-600);margin-bottom:20px;max-width:34ch}
.od-case-tile h2{font:700 clamp(19px,2.1vw,23px)/1.28 var(--font-display);letter-spacing:-.015em;color:var(--od-navy);margin:0 0 10px}
.od-case-tile .meta{font-size:12.5px;color:var(--od-gray-500);margin-bottom:16px}
.od-cases .rd{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:600 13.5px var(--font-display);color:var(--od-blue)}
@media(max-width:860px){.od-cases{grid-template-columns:1fr}.od-case-feat{grid-template-columns:1fr}}