/*
Theme Name: Arcadian Robotics
Theme URI: https://www.arcadianrobotics.ai
Author: Arcadian Robotics
Author URI: https://www.arcadianrobotics.ai
Description: Single page WordPress theme for Arcadian Robotics - a deployment-focused engineering partner advancing fit-for-purpose robotics across energy infrastructure.
Version: 2.4.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arcadian-robotics
*/

/* ── WP admin-bar offset (so the fixed nav clears the toolbar) ── */
.admin-bar nav { top: 32px; }
.admin-bar .nav-drawer { top: 96px; }
@media screen and (max-width: 782px) {
  .admin-bar nav { top: 46px; }
  .admin-bar .nav-drawer { top: 110px; }
}

html { overflow-x: hidden; }

  .audience-tabs {
    display: flex;
    border-bottom: 2px solid var(--mid-gray);
    margin-top: 52px;
    overflow-x: visible;
    flex-wrap: wrap;
  }
  .tab-btn {
    white-space: nowrap;
  }

  :root {
    --navy:       #0A1F35;
    --blue:       #2EC4B6;
    --slate:      #4A4F57;
    --teal:       #2EC4B6;
    --soft-green: #8ED1C6;
    --light-gray: #E8ECEF;
    --mid-gray:   #BCC2C7;
    --dark-gray:  #2E3338;
    --white:      #ffffff;
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  img { max-width: 100%; height: auto; }

  body { font-family:'Inter',sans-serif; font-weight:400; color:var(--slate); background:var(--white); line-height:1; overflow-x:hidden; }

  /* ── NAV ── */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:var(--navy);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 6%; height:64px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .nav-logo { display:flex; align-items:center; gap:12px; cursor:pointer; }
  .nav-links { display:flex; gap:32px; list-style:none; align-items:center; }
  .nav-links a {
    font-family:'Inter',sans-serif; font-size: 15px; font-weight:500;
    letter-spacing:0.06em; color:var(--mid-gray); text-decoration:none;
    text-transform:uppercase; cursor:pointer; transition:color 0.2s;
    background:none; border:none; padding:0;
  }
  .nav-links a:hover, .nav-links a.active { color:var(--white); }
  .btn-nav {
    /* background:var(--blue); */ /* button background disabled — Contact is plain text */
    color: var(--white) !important;
    padding:9px 22px; border-radius:10px; font-size: 15px !important;
    transition:background 0.18s !important;
  }
  .btn-nav:hover { background:#27b0a3 !important; }
  .nav-wordmark {
    font-family:'Oswald',sans-serif; line-height:1.1;
    display:flex; flex-direction:column;
  }
  .nw-arcadian { font-weight:500; font-size: 17px; letter-spacing:0.12em; color:var(--white); text-transform:uppercase; }
  .nw-robotics { font-weight:700; font-size: 17px; letter-spacing:0.12em; color:var(--teal); text-transform:uppercase; }

  /* ── BUTTONS ── */
  .btn-primary {
    display:inline-block; background:var(--blue); color:var(--white);
    padding:13px 32px; border-radius:10px; border:none;
    font-family:'Inter',sans-serif; font-size: 16px; font-weight:500;
    letter-spacing:0.04em; cursor:pointer; text-decoration:none;
    transition:background 0.18s;
  }
  .btn-primary:hover { background:#27b0a3; }
  .btn-primary:disabled { background:var(--mid-gray); cursor:not-allowed; }
  .btn-secondary {
    display:inline-block; background:transparent; color:var(--white);
    padding:12px 32px; border-radius:10px;
    border:1.5px solid rgba(255,255,255,0.3);
    font-family:'Inter',sans-serif; font-size: 16px; font-weight:500;
    letter-spacing:0.04em; cursor:pointer; text-decoration:none;
    transition:border-color 0.18s;
  }
  .btn-secondary:hover { border-color:var(--white); }

  /* ── SECTION WRAPPER ── */
  .section-wrap { padding:100px 6%; }
  .section-wrap.bg-light { background:var(--light-gray); }
  .section-wrap.bg-navy  { background:var(--navy); }
  .section-wrap.bg-dark  { background:var(--dark-gray); }

  /* ── TYPOGRAPHY ── */
  .t-label { font-family:'IBM Plex Mono',monospace; font-size: 16px; color:var(--teal); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:16px; display:block; }
  .t-h1 { font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(44px,6vw,80px); line-height:1.0; text-transform:uppercase; letter-spacing:0.02em; color:var(--white); }
  .t-h2 { font-family:'Oswald',sans-serif; font-weight:600; font-size: clamp(30px,3.8vw,46px); line-height:1.1; text-transform:uppercase; letter-spacing:0.02em; color:var(--navy); }
  .t-h2.light { color:var(--white); }
  .t-body { font-family:'Inter',sans-serif; font-weight:400; font-size: 18px; line-height:1.75; color:var(--slate); }
  .t-body.light { color:var(--mid-gray); }

  /* ── HERO ── */
  #home {
    background-color: var(--navy);
    padding:120px 6% 200px; position:relative;
  }
  .hero-bg-radial { display:none; }
  .hero-grid { display: none; }
  .hero-content { position:relative; z-index:1; max-width:760px;
  }
  .hero-eyebrow { font-family:'IBM Plex Mono',monospace; font-size: 13px; color:var(--teal); letter-spacing:0.22em; text-transform:uppercase; margin-bottom:24px; }
  .hero-tagline { font-size: 19px; line-height:1.75; color:var(--mid-gray); max-width:540px; margin:28px 0 48px; }
  .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; padding-bottom:8px;   padding-bottom: 0;
  }
  
  
  .stat-num span { color:var(--teal); }
  

  /* ── ABOUT ── */
  .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:56px; }
  .traits-list { display:flex; flex-direction:column; }
  .trait-row { display:flex; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--light-gray); }
  .trait-row:first-child { border-top:1px solid var(--light-gray); }
  .trait-key { font-family:'Oswald',sans-serif; font-size: 16px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; min-width:116px; }
  .trait-val { font-size: 15px; color:var(--slate); line-height:1.55; }

  /* ── MISSION BAND ── */
  .mission-band { background:var(--navy); padding:80px 6%; text-align:center; }
  .mission-quote { font-family:'Oswald',sans-serif; font-weight:400; font-size:clamp(18px,2.5vw,28px); color:var(--white); line-height:1.6; max-width:820px; margin:0 auto; text-transform:uppercase; letter-spacing:0.03em; }
  .mission-quote em { color:var(--teal); font-style:normal; }

  /* ── HOW WE WORK ── */
  .tab-btn { font-family:'Oswald',sans-serif; font-size: 16px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:14px 28px; background:none; border:none; color:var(--mid-gray); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color 0.2s, border-color 0.2s; white-space:nowrap; }
  .tab-btn.active { color:var(--navy); border-bottom-color:var(--teal); }
  .tab-btn[data-tab="utilities"].active     { color:var(--navy); border-bottom-color:var(--teal); }
  .tab-btn[data-tab="innovators"].active    { color:var(--navy); border-bottom-color:#2EC4B6; }
  .tab-btn[data-tab="research"].active      { color:var(--navy); border-bottom-color:#8ED1C6; }
  .tab-btn[data-tab="utilities"]:not(.active):hover  { color:var(--teal); }
  .tab-btn[data-tab="innovators"]:not(.active):hover { color:#2EC4B6; }
  .tab-btn[data-tab="research"]:not(.active):hover   { color:#8ED1C6; }
  .tab-btn::before {
    content: ''; display: block;
    width: 10px; height: 10px; border-radius: 50%;
    margin: 0 auto 8px auto;
    background: var(--mid-gray); transition: background 0.2s;
  }
  .tab-btn[data-tab="utilities"]::before   { background: rgba(30,144,255,0.4); }
  .tab-btn[data-tab="innovators"]::before  { background: rgba(46,196,182,0.4); }
  .tab-btn[data-tab="research"]::before    { background: rgba(142,209,198,0.5); }
  .tab-btn[data-tab="utilities"].active::before   { background: var(--teal); }
  .tab-btn[data-tab="innovators"].active::before  { background: #2EC4B6; }
  .tab-btn[data-tab="research"].active::before    { background: #8ED1C6; }
  .tab-btn:hover { color:var(--navy); }
  .tab-panel { display:none; padding-top:48px; }
  .tab-panel.active { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
  .tab-intro { font-size: 17px; line-height:1.8; color:var(--slate); margin-bottom:32px; }
  .how-steps { list-style:none; }
  .how-step { display:flex; gap:20px; padding:18px 0; border-bottom:1px solid var(--mid-gray); }
  .how-step:last-child { border-bottom:none; }
  .step-num { font-family:'IBM Plex Mono',monospace; font-size: 13px; color:var(--teal); min-width:26px; padding-top:2px; flex-shrink:0; letter-spacing:0.1em; }
  .step-title { font-family:'Oswald',sans-serif; font-size: 20px; font-weight:600; color:var(--navy); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:5px; }
  .step-desc { font-size: 15px; line-height:1.65; color:var(--slate); }
  .tab-callout { background:var(--navy); padding:36px; border-radius:4px; margin-bottom:20px; }
  .tab-callout-lbl { font-family:'IBM Plex Mono',monospace; font-size: 12px; color:var(--teal); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:12px; }
  .tab-callout-title { font-family:'Oswald',sans-serif; font-size: 22px; font-weight:600; color:var(--white); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; }
  .tab-callout-body { font-size: 16px; line-height:1.7; color:var(--mid-gray); }
  .tab-who { background:var(--white); padding:26px 28px; border-radius:4px; border-left:3px solid var(--teal); }
  .tab-who-lbl { font-family:'IBM Plex Mono',monospace; font-size: 12px; color:var(--teal); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:10px; }
  .tab-who p { font-size: 15px; line-height:1.8; color:var(--slate); }

  /* ── CAPABILITIES ── */
  .caps-legend { display:flex; gap:16px; flex-wrap:wrap; margin:20px 0 0; align-items:flex-start; }
  .legend-item { display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px; font-size:12px; color:var(--slate); font-family:'Inter',sans-serif; text-align:center; max-width:90px; }
  .legend-label { display:block; text-align:center; }
  .legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .services-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-top:16px; }
  .service-card { background:var(--white); padding:40px 32px; border:1px solid var(--light-gray); border-top:3px solid transparent; border-radius:4px; transition:border-top-color 0.2s, box-shadow 0.2s; }
  .service-card:hover { border-top-color:var(--blue); box-shadow:0 4px 20px rgba(0,0,0,0.07); }
  .svc-icon { width:36px; height:36px; margin-bottom:20px; }
  .svc-name { font-family:'Oswald',sans-serif; font-size: 19px; font-weight:600; color:var(--navy); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
  .svc-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
  .svc-tag { font-family:'IBM Plex Mono',monospace; font-size: 13px; letter-spacing:0.1em; text-transform:uppercase; padding:3px 8px; border-radius:3px; }
  .svc-tag.tag-u { background:rgba(30,144,255,0.10); color:#1E90FF; border:1px solid rgba(30,144,255,0.30); }
  .svc-tag.tag-i { background:rgba(46,196,182,0.10); color:#2EC4B6; border:1px solid rgba(46,196,182,0.30); }
  .svc-tag.tag-r { background:rgba(142,209,198,0.15); color:#4a9d8f; border:1px solid rgba(142,209,198,0.50); }
  .tag-u { background:rgba(30,144,255,0.08); color:var(--blue); }
  .tag-i { background:rgba(46,196,182,0.08); color:var(--teal); }
  .tag-r { background:rgba(142,209,198,0.12); color:#4e9f95; }
  .svc-desc { font-size: 15px; line-height:1.65; color:var(--slate); margin-bottom:16px; }
  .svc-list { list-style:none; }
  .svc-list li { font-size: 15px; color:var(--slate); padding:5px 0; border-bottom:1px solid var(--light-gray); display:flex; align-items:flex-start; gap:9px; }
  .svc-list li:last-child { border-bottom:none; }
  .svc-list li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--teal); flex-shrink:0; margin-top:6px; }

  /* ── PROJECTS ── */
  .projects-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; margin-top:52px; }
  .proj-card { border:1px solid var(--mid-gray); border-radius:4px; overflow:hidden; background:var(--white); transition:box-shadow 0.2s; }
  .proj-card:hover { box-shadow:0 4px 24px rgba(0,0,0,0.09); }
  .proj-head { padding:26px 28px 22px; }
  .proj-tag { font-family:'IBM Plex Mono',monospace; font-size: 13px; color:var(--teal); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:10px; }
  .proj-name { padding: 1px 0px 0px 0px; font-family:'Oswald',sans-serif; font-size: 20px; font-weight:600; color:var(--white); text-transform:uppercase; letter-spacing:0.03em; line-height:1.25; }
  .proj-body { padding:26px 28px; }
  .proj-desc { font-size: 16px; line-height:1.75; color:var(--slate); margin-bottom:20px; }
  .proj-roles { list-style:none; }
  .proj-roles li { font-size: 15px; color:var(--slate); padding:7px 0; border-bottom:1px solid var(--light-gray); display:flex; gap:10px; }
  .proj-roles li:last-child { border-bottom:none; }
  .proj-roles li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:6px; }
  .proj-funder { display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size: 13px; color:var(--mid-gray); }
  .proj-funder.green { color:var(--teal); }

  /* ── TEAM ── */
  .team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; margin-top:52px; }
  .team-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); padding:36px 28px; text-align:center; border-radius:4px; }
  .team-photo { width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 20px; display:block; border:2px solid rgba(255,255,255,0.1); }
  .team-name { font-family:'Oswald',sans-serif; font-size: 22px; font-weight:600; color:var(--white); letter-spacing:0.05em; margin-bottom:10px; }
  .team-desc { font-size: 15px; line-height:1.65; color:var(--mid-gray); }

  /* ── CTA ── */
  .cta-band { background:var(--dark-gray); padding:100px 6%; text-align:center; }
  .cta-h2 { font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(28px,4vw,50px); color:var(--white); text-transform:uppercase; letter-spacing:0.02em; margin-bottom:16px; }
  .cta-sub { font-size: 18px; color:var(--mid-gray); max-width:500px; margin:0 auto 40px; line-height:1.75; font-family:'Inter',sans-serif; }

  /* ── CONTACT ── */
  .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:52px; }
  .c-block { margin-bottom:32px; }
  .c-lbl { font-family:'IBM Plex Mono',monospace; font-size: 13px; color:var(--teal); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:7px; }
  .c-val { font-size: 17px; color:var(--navy); font-family:'Inter',sans-serif; }
  .c-val a { color:var(--blue); text-decoration:none; }
  .c-val a:hover { text-decoration:underline; }
  .contact-form { display:flex; flex-direction:column; gap:16px; }
  .f-label { font-size: 13px; font-weight:500; color:var(--navy); text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:6px; font-family:'Inter',sans-serif; }
  .f-input, .f-textarea, .f-select { width:100%; padding:12px 14px; border:1px solid var(--mid-gray); border-radius:10px; font-family:'Inter',sans-serif; font-size: 16px; color:var(--navy); background:var(--white); outline:none; transition:border-color 0.2s; }
  .f-input:focus, .f-textarea:focus, .f-select:focus { border-color:var(--blue); }
  .f-textarea { height:110px; resize:vertical; }
  .form-status { display:none; padding:12px 16px; border-radius:8px; font-size: 16px; font-family:'Inter',sans-serif; margin-top:4px; }
  .form-status.success { background:#e6f9f7; color:#1a7a6e; border:1px solid var(--teal); display:block; }
  .form-status.error   { background:#fff0f0; color:#c0392b; border:1px solid #e74c3c; display:block; }

  /* ── Contact Form 7 styling — make CF7's auto-rendered fields look identical
        to our custom form (same border/padding/radius as .f-input). */
  .contact-form--cf7 .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
  .contact-form--cf7 .wpcf7-form p { margin: 0; }
  .contact-form--cf7 .wpcf7-form label {
    font-size: 13px; font-weight: 500; color: var(--navy);
    text-transform: uppercase; letter-spacing: 0.08em;
    display: block; margin-bottom: 6px; font-family: 'Inter', sans-serif;
  }
  .contact-form--cf7 .wpcf7-form input[type="text"],
  .contact-form--cf7 .wpcf7-form input[type="email"],
  .contact-form--cf7 .wpcf7-form input[type="url"],
  .contact-form--cf7 .wpcf7-form input[type="tel"],
  .contact-form--cf7 .wpcf7-form select,
  .contact-form--cf7 .wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--mid-gray);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--navy);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s;
  }
  .contact-form--cf7 .wpcf7-form input:focus,
  .contact-form--cf7 .wpcf7-form select:focus,
  .contact-form--cf7 .wpcf7-form textarea:focus {
    border-color: var(--blue);
  }
  .contact-form--cf7 .wpcf7-form textarea { height: 110px; resize: vertical; }
  .contact-form--cf7 .wpcf7-form input[type="submit"],
  .contact-form--cf7 .wpcf7-form button[type="submit"] {
    display: block;
    background: var(--blue);
    color: var(--white);
    padding: 13px 32px;
    border-radius: 10px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.18s;
    /* Full-width submit button matching the design. */
    width: 100%;
    align-self: stretch;
  }
  /* Make CF7's wrapping <div> / <p> around the submit also span the full column. */
  .contact-form--cf7 .wpcf7-form > div:has(> input[type="submit"]),
  .contact-form--cf7 .wpcf7-form > p:has(> input[type="submit"]) {
    width: 100%;
  }
  /* "Or email us directly at..." footer line. The form is flex with gap:16px, and
     the inline <p style="margin-top:8px"> compounds on top — total 24px, too much.
     Pull it tighter so spacing under the submit button matches the original design. */
  .contact-form--cf7 .wpcf7-form > .contact-form-footer {
    margin-top: -8px !important;
  }
  .contact-form--cf7 .wpcf7-form input[type="submit"]:hover,
  .contact-form--cf7 .wpcf7-form button[type="submit"]:hover { background: #27b0a3; }
  /* CF7 status messages — match our success/error look */
  .contact-form--cf7 .wpcf7-response-output {
    margin: 8px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
  }
  .contact-form--cf7 .wpcf7 form.sent .wpcf7-response-output,
  .contact-form--cf7 .wpcf7 form.invalid .wpcf7-response-output,
  .contact-form--cf7 .wpcf7 form.spam .wpcf7-response-output { border-width: 1px !important; }
  /* Field validation tip from CF7 */
  .contact-form--cf7 .wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; margin-top: 4px; }
  /* CF7 spinner — CF7 keeps it as visibility:hidden so it still occupies a 24px
     flex row between the submit button and the "Or email us..." footer. Pull it
     out of layout so the spacing matches the design (the spinner only flashes
     during AJAX submit, where its absence is fine). */
  .contact-form--cf7 .wpcf7-spinner { display: none; }
  .contact-form--cf7 .wpcf7-form.submitting .wpcf7-spinner { display: inline-block; margin: 0 0 0 12px; vertical-align: middle; }

  /* ── FOOTER ── */
  footer { background:var(--navy); padding:48px 6%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; border-top:1px solid rgba(255,255,255,0.07); }
  .footer-copy { font-size: 14px; color:var(--mid-gray); font-family:'Inter',sans-serif; }
  .footer-links { display:flex; gap:24px; list-style:none; }
  .footer-links a { font-size: 14px; color:var(--mid-gray); text-decoration:none; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:color 0.2s; font-family:'Inter',sans-serif; }
  .footer-links a:hover { color:var(--white); }
  .footer-wordmark { font-family:'Oswald',sans-serif; line-height:1.1; }
  .fw-arcadian { font-weight:500; font-size: 15px; letter-spacing:0.12em; color:rgba(255,255,255,0.5); text-transform:uppercase; display:block; }
  .fw-robotics  { font-weight:700; font-size: 15px; letter-spacing:0.12em; color:var(--teal); text-transform:uppercase; opacity:0.7; display:block; }

  @media (max-width: 900px) {
    .about-grid, .contact-grid { grid-template-columns:1fr; gap:40px; }
    .tab-panel.active { grid-template-columns:1fr; }
    
    .nav-links { display:none; }

    /* Section padding: tighter on tablet */
    .section-wrap { padding: 72px 6%; }

    /* Two-col grids → single col */
    .about-grid,
    .tab-panel.active,
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Tabs: allow horizontal scroll rather than overflow */

    /* Hero stats: tighter gap */
    

    /* Caps legend: wrap nicely */
    .caps-legend { gap: 14px; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
  .proj-grid { grid-template-columns: 1fr 1fr; }
    .how-diagram-wrap { max-width: 100% !important; }
  }

  /* ══════════════════════════════════════════
     RESPONSIVE - MOBILE (max 600px)
  ══════════════════════════════════════════ */
  

  /* ══════════════════════════════════════════
     NAV HAMBURGER (hidden on desktop)
  ══════════════════════════════════════════ */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mid-gray);
    border-radius: 2px;
    transition: background 0.2s;
  }
  .nav-hamburger:hover span { background: var(--white); }

  /* Mobile nav drawer */
  .nav-drawer {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 199;
    flex-direction: column;
    padding: 8px 0 16px;
  }
  .nav-drawer.open { display: flex; }
  .nav-drawer a {
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--mid-gray);
    text-transform: uppercase;
    padding: 14px 6%;
    cursor: pointer;
    border: none; background: none;
    text-align: left;
    transition: color 0.2s, background 0.2s;
  }
  .nav-drawer a:hover { color: var(--white); background: rgba(255,255,255,0.04); }
  .nav-drawer a.drawer-cta {
    margin: 8px 6% 0;
    background: var(--blue);
    color: var(--white);
    border-radius: 10px;
    text-align: center;
    padding: 12px 6%;
  }
  .nav-drawer a.drawer-cta:hover { background: #1780e0; }

  @media (max-width: 360px) {
    .team-grid { grid-template-columns: 1fr; }
    
  }

  /* Honeypot - hidden from real users, bots fill it */
  .hp-field { position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

  /* Skip to content - screen reader / keyboard accessibility */
  .skip-link {
    position: absolute; top: -100px; left: 6%; z-index: 9999;
    background: var(--blue); color: var(--white);
    padding: 10px 20px; border-radius: 0 0 8px 8px;
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500;
    text-decoration: none; transition: top 0.2s;
  }
  .skip-link:focus { top: 0; }

  /* Fade grid behind hero text - prevents grid competing with headline */

  /* Hero background image */
  
  /* Keep the navy overlay - sits on top of photo */
  #home::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.0) 50%
    );
    z-index: 0;
    pointer-events: none;
  }
  /* Ensure hero content sits above overlay */
  .proj-flxbot-img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    object-position: center;
    background: var(--navy);
    padding: 16px 0 8px;
    display: block;
  }

  


  .proj-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .proj-img-contain {
    width: 100%;
    height: 180px;
    object-fit: contain;
    object-position: center;
    background: var(--navy);
    display: block;
    padding: 16px 0;
  }

  /* Testimonial section */
  .testimonial-section { background: var(--navy); padding: 96px 6%; }
  .testimonial-wrap { max-width: 820px; margin: 0 auto; text-align: center; }
  .testimonial-quote {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: clamp(15px, 2vw, 18px); line-height: 1.85;
    color: var(--white); margin-bottom: 40px;
    font-style: italic; position: relative;
  }
  .testimonial-quote::before {
    content: '\201C';
    font-family: 'Oswald', sans-serif; font-size: 80px;
    color: var(--teal); opacity: 0.35; line-height: 0;
    position: absolute; top: 28px; left: -20px;
  }
  .testimonial-quote::after {
    content: '\201D';
    font-family: 'Oswald', sans-serif; font-size: 80px;
    color: var(--teal); opacity: 0.35; line-height: 0;
    position: absolute; bottom: -18px; right: -14px;
  }
  .testimonial-attr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .testimonial-name {
    font-family: 'Oswald', sans-serif; font-weight: 600;
    font-size: 18px; color: var(--white); letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .testimonial-title { font-size: 15px; color: var(--teal); font-family: 'Inter', sans-serif; }
  .testimonial-divider {
    width: 48px; height: 2px; background: var(--teal); margin: 0 auto 32px;
  }
  @media (max-width: 600px) {
    .testimonial-section { padding: 72px 5%; }
    .testimonial-quote::before { font-size: 60px; left: -10px; }
  }

  /* Proof metrics strip */
  .proof-strip {
    display: flex; gap: 0; margin: 44px 0 0;
    border: 1px solid var(--light-gray);
    border-radius: 4px; overflow: hidden;
  }
  .proof-item {
    flex: 1; padding: 20px 16px; text-align: center;
    border-right: 1px solid var(--light-gray);
  }
  .proof-item:last-child { border-right: none; }
  .proof-num {
    font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 700;
    color: var(--navy); line-height: 1;
  }
  .proof-num span { color: var(--teal); font-size: 22px; }
  .proof-lbl {
    font-family: 'IBM Plex Mono', monospace; font-size: 14px;
    color: var(--slate); letter-spacing: 0.12em; text-transform: uppercase;
    margin-top: 6px;
  }
  @media (max-width: 600px) {
    .proof-strip { flex-wrap: wrap; }
    .proof-item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--light-gray); }
    .proof-item:nth-child(odd) { border-right: 1px solid var(--light-gray); }
    .proof-item:last-child { border-bottom: none; }
  }

  .proj-img-flx {
    object-fit: contain !important;
    object-position: center !important;
    background: #0A1F35 !important;
    padding: 12px 0;
  }
  .proj-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .proj-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
  .proj-bullets { max-height:0; overflow:hidden; opacity:0; transition:max-height 0.38s ease,opacity 0.28s ease,margin-top 0.3s ease; margin-top:0; }
  .proj-card:hover .proj-bullets { max-height:240px; opacity:1; margin-top:12px; }
  .proj-hint { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal); letter-spacing:0.14em; opacity:0.7; margin-top:12px; transition:opacity 0.18s; }
  .proj-card:hover .proj-hint { opacity:0; max-height:0; overflow:hidden; }
  .service-card { transition:transform 0.18s ease,box-shadow 0.18s ease; }
  .service-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.10); }
  .svc-bullets { max-height:0; overflow:hidden; opacity:0; transition:max-height 0.38s ease,opacity 0.28s ease,margin-top 0.3s ease; margin-top:0; }
  .service-card:hover .svc-bullets { max-height:260px; opacity:1; margin-top:10px; }
  .svc-hint { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal); letter-spacing:0.14em; opacity:0.65; margin-top:10px; transition:opacity 0.18s; }
  .service-card:hover .svc-hint { opacity:0; max-height:0; overflow:hidden; }
  @media (hover: none), (max-width: 600px) {
    .proj-bullets { max-height:none !important; opacity:1 !important; margin-top:12px !important; }
    .svc-bullets  { max-height:none !important; opacity:1 !important; margin-top:10px !important; }
    .proj-hint, .svc-hint { display:none !important; }
  }

  /* Service card colored top borders per primary audience */
  .service-card:hover { border-top-color: #1E90FF; }
  .service-card.card-u { border-top-color: #1E90FF; }
  .service-card.card-i { border-top-color: #2EC4B6; }
  .service-card.card-r { border-top-color: #8ED1C6; }
  .how-diagram-wrap { max-width: 72%; margin-left: auto; margin-right: auto; }
  @media (max-width: 900px) { .how-diagram-wrap { max-width: 100%; } }
  /* Insights section */
  .insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 44px;
  }
  .insight-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-top: 3px solid var(--teal);
    border-radius: 4px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
    /* The card itself is an <a> in the rendered markup (mirrors index_v2.html)
       so the whole card is clickable. Reset default anchor styling so it
       inherits the surrounding text colour and shows no underline. */
    text-decoration: none;
    color: inherit;
  }
  .insight-card.is-inactive { cursor: default; }
  .insight-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.09);
    transform: translateY(-2px);
  }
  .insight-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--teal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .insight-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .insight-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--slate);
    flex: 1;
    margin-bottom: 28px;
  }
  .insight-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--mid-gray);
    letter-spacing: 0.1em;
    margin-bottom: 20px;
  }
  .insight-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--teal);
    text-decoration: none;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(46,196,182,0.3);
    padding-bottom: 2px;
    transition: border-color 0.2s, color 0.2s;
    cursor: default;
    /* Parent .insight-card is a flex column — without this, every child
       (including this span) stretches to full card width and the border-bottom
       runs the entire card width. Pin to intrinsic width so the underline
       only spans "Read Article →". */
    align-self: flex-start;
  }
  .insight-link:hover { border-color: var(--teal); }
  .insight-link-arrow { font-size: 16px; }
  @media (max-width: 700px) {
    .insights-grid { grid-template-columns: 1fr; }
  }

  .footer-legal {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.10);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
  }
  .footer-legal a {
    color: var(--mid-gray);
    text-decoration: none;
    transition: color 0.18s;
  }
  .footer-legal a:hover { color: var(--white); }
  .footer-sep { color: var(--mid-gray); margin: 0 10px; opacity: 0.4; }
  .problem-section { padding: 80px 6%; background: var(--white); border-bottom: 1px solid var(--light-gray); }
  .problem-lead { font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1.4; max-width: 60ch; margin-bottom: 20px; }
  .problem-body { font-size: 17px; line-height: 1.75; color: var(--slate); max-width: 62ch; margin-bottom: 12px; }
  .about-bullets { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--light-gray); list-style: none; }
  .about-bullet { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 16px; color: var(--slate); line-height: 1.5; }
  .about-bullet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 2px; }
  .about-bullet-label { margin-top: 32px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--teal); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; display: block; }
  .mission-band { background: var(--navy); padding: 56px 6%; text-align: center; }
  .mission-quote { font-family: 'Oswald', sans-serif; font-size: clamp(20px, 2.8vw, 30px); font-weight: 400; color: white; line-height: 1.45; max-width: 72ch; margin: 0 auto; letter-spacing: 0.01em; }
  .mission-quote em { color: var(--teal); font-style: normal; }

  /* ── Tension band ── */
  .tension-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .tension-item {
    padding: 52px 40px;
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  .tension-item:first-child { padding-left: 6%; }
  .tension-item:last-child  { border-right: none; padding-right: 6%; }
  .tension-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    color: var(--blue);
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 16px;
  }
  .tension-head {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .tension-body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    line-height: 1.72;
    margin-bottom: 8px;
  }
  .tension-body:last-child { margin-bottom: 0; }
  .tension-body strong {
    color: rgba(255,255,255,0.88);
    font-weight: 600;
  }
  @media (max-width: 700px) {
    .tension-band { grid-template-columns: 1fr; }
    .tension-item {
      border-right: none;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 40px 6%;
    }
    .tension-item:last-child { border-bottom: none; }
  }

  

  
  /* These rules match the design's late-cascade overrides (index.html lines 738–741):
     they intentionally apply at all viewport widths, NOT inside a @media block,
     so the global .t-h1 / .hero-tagline rules earlier in the cascade are overridden. */
  .hero-tagline, .hero-sub {
    font-size: 15px;
  }
  .t-h1 {
    font-size: clamp(32px, 9vw, 48px);
  }

  
  

  /* ── Diagram visibility ── */
  .diagram-mobile  { display: none !important; }
  .diagram-desktop { display: block; }

  /* ── Mobile: all responsive rules ── */
  @media (max-width: 600px) {
    /* Diagrams: show HTML, hide SVG */
    .diagram-mobile  { display: block !important; }
    .diagram-desktop { display: none !important; }

    /* Hero */
    #home { padding: 72px 5% 320px; display: block; min-height: 0; }
    .hero-content { position: relative; z-index: 1; }
    .hero-actions { margin-top: 28px; flex-direction: column; gap: 12px; }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary { width: 100%; text-align: center; }
    .t-h1 { font-size: clamp(30px, 9vw, 44px); }
    .hero-tagline { font-size: 15px; line-height: 1.6; }

    /* Tabs: 2x2 grid so all 4 visible */
    .tab-btn {
      font-size: 10px;
      padding: 10px 8px;
      letter-spacing: 0.03em;
      white-space: normal;
      line-height: 1.3;
      text-align: center;
      background: var(--white);
      border-bottom: 3px solid transparent;
      margin-bottom: 0;
    }
    .tab-btn.active, .tab-btn[aria-selected="true"] {
      border-bottom-color: var(--blue);
      color: var(--navy);
    }

    /* Deployment Framework mobile */
    .df-mobile-wrap { margin: 20px 0 32px; }
    .df-mobile-node {
      background: #F4F6F8;
      border: 0.5px solid #BCC2C7;
      border-top: 3px solid #BCC2C7;
      border-radius: 3px;
      padding: 14px 16px;
      margin-bottom: 6px;
    }
    .df-mobile-node-title {
      font-family: "Oswald", sans-serif;
      font-size: 11px; font-weight: 600;
      color: var(--navy); letter-spacing: 0.04em;
      margin-bottom: 8px;
    }
    .df-mobile-node-item { font-size: 12px; color: var(--slate); padding: 2px 0; }
    .df-mobile-node-footer {
      font-size: 11px; color: #8899AA; font-style: italic;
      margin-top: 8px; padding-top: 8px;
      border-top: 0.5px solid #E8ECEF;
    }
    .df-mobile-arcadian {
      background: var(--navy);
      border: 1.5px solid var(--blue);
      border-top: 4px solid var(--blue);
      border-radius: 3px;
      padding: 20px; text-align: center;
      margin-bottom: 6px;
    }
    .df-mobile-arcadian-label {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px; color: var(--blue);
      letter-spacing: 0.16em; display: block; margin-bottom: 10px;
    }
    .df-mobile-arcadian-item {
      font-size: 13px; font-weight: 600; color: white; padding: 3px 0;
    }
    .df-mobile-arcadian-footer {
      font-family: "IBM Plex Mono", monospace;
      font-size: 8px; color: var(--blue);
      letter-spacing: 0.12em; opacity: 0.8; margin-top: 10px;
    }
    .df-mobile-arrows-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px; margin: 4px 0;
    }
    .df-mobile-arrow-box { text-align: center; }
    .df-mobile-arrow-label {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px; color: var(--blue);
      display: block; margin-bottom: 2px;
    }
    .df-mobile-arrow { font-size: 18px; color: var(--blue); opacity: 0.7; }

    /* Lifecycle mobile */
    .lc-mobile-wrap { margin: 20px 0 0; }
    .lc-mobile-steps {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    }
    .lc-mobile-step {
      background: #F4F6F8;
      border: 0.5px solid #BCC2C7;
      border-top: 2.5px solid var(--teal);
      border-radius: 3px; padding: 10px 8px; text-align: center;
    }
    .lc-mobile-step-label {
      font-family: "Oswald", sans-serif;
      font-size: 9px; font-weight: 600;
      color: var(--navy); letter-spacing: 0.04em; line-height: 1.3;
    }
    .lc-mobile-step-sub {
      font-family: "IBM Plex Mono", monospace;
      font-size: 7px; color: #8899AA; letter-spacing: 0.06em; margin-top: 3px;
    }
  }

  /* ── Audience tabs: desktop flex, mobile 2x2 grid ── */


  @media (max-width: 600px) {
    /* Single column — prevents right-side cut-off */
    .services-grid { grid-template-columns: 1fr !important; gap: 12px; }
    /* Card layout: tighter padding */
    .service-card { padding: 20px 16px; }
    /* Card top row: icon left, audience dots right */
    .svc-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .svc-icon { margin-bottom: 0; width: 24px; height: 24px; }
    /* Hide the text tags — replace with dot row */
    .svc-tags { display: none; }
    /* Show dot indicators */
    .svc-dots { display: flex; gap: 5px; align-items: center; }
    .svc-dot  { width: 9px; height: 9px; border-radius: 50%; }
    /* Legend: horizontal, compact */
    .caps-legend { gap: 12px; }
    .legend-dot { width: 9px; height: 9px; border-radius: 50%; }
  }
  @media (min-width: 601px) {
    .svc-card-top { display: none; }
    .svc-dots     { display: none; }
  }

  /* Deployment Framework diagram — constrained width so text reads near body size */
  .diagram-df {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Lifecycle diagram — also constrain */
  .diagram-lc {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

/* ── Legal pages (privacy/terms) ─────────────────────────────────────
   Mirrors ArcadianRoboticsWebFiles/privacy.html lines 21–122 verbatim.
   All rules scoped under body.arcadian-legal so they don't leak onto the
   home page (which uses different markup at the same selectors). */
body.arcadian-legal {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--slate);
  background: #fff;
  /* Legal-page palette override: design's privacy.html / terms.html redefines
     --blue as #1E90FF (true Dodger Blue) — different from the home page's
     --blue (#2EC4B6, teal-cyan). All legal-page links pick this up automatically
     via var(--blue). */
  --blue: #1E90FF;
  /* Push body content down by header height (we use position:fixed for the
     header so it stays visible when scrolled — the global body overflow-x:hidden
     would otherwise break position:sticky on descendants). */
  padding-top: 64px;
}

/* Header — position:fixed so the back-link always stays visible while
   scrolling. The body has padding-top: 64px to compensate. */
body.arcadian-legal .legal-header {
  background: var(--navy);
  padding: 0 6%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
body.arcadian-legal.admin-bar .legal-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.arcadian-legal.admin-bar .legal-header { top: 46px; }
}
body.arcadian-legal .legal-header svg { display: block; }
body.arcadian-legal .legal-back-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--mid-gray);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
body.arcadian-legal .legal-back-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Main content */
body.arcadian-legal .legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 6% 100px;
}
body.arcadian-legal .legal-page-label {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
body.arcadian-legal .legal-h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  line-height: 1.1;
  text-transform: none;
}
body.arcadian-legal .legal-effective-date {
  font-size: 14px;
  color: var(--mid-gray);
  margin-bottom: 36px;
}
body.arcadian-legal .legal-highlight-box {
  background: #F4F7FA;
  border-left: 3px solid var(--teal);
  padding: 20px 24px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 1.7;
}
body.arcadian-legal .legal-h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.03em;
  margin: 40px 0 12px;
  text-transform: none;
}
p.legal-effective-date {
    margin-bottom: 36px !important;
}
body.arcadian-legal .legal-main p { margin-bottom: 16px; }
body.arcadian-legal .legal-main a { color: var(--blue); text-decoration: none; }
body.arcadian-legal .legal-main a:hover { text-decoration: underline; }
body.arcadian-legal .legal-main ul,
body.arcadian-legal .legal-main ol { padding-left: 24px; margin-bottom: 16px; }
body.arcadian-legal .legal-main li { margin-bottom: 6px; }

/* Footer
   Design renders the wordmark unconstrained inside the footer (the design's
   .footer-logo CSS rule was defined but never applied to the SVG — the SVG has
   no class — so it fills the container at viewBox-aspect height). We mirror
   that "fluid" behaviour by overriding the inline height attribute the
   wordmark partial emits. */
body.arcadian-legal .legal-footer {
  background: var(--navy);
  padding: 32px 6%;
  text-align: center;
  /* Reset the home-page footer's flex layout — design's legal footer is a
     plain block, centered. Without these, display:flex / justify-content
     leak in from the generic `footer { ... }` rule and shift logo/text apart. */
  display: block;
  border-top: 0;
  gap: 0;
  flex-wrap: initial;
  align-items: initial;
  justify-content: initial;
}
body.arcadian-legal .legal-footer-logo {
  display: block;
  margin: 0 auto 11px;
  text-decoration: none;
  width: 100%;
}
body.arcadian-legal .legal-footer-logo svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
body.arcadian-legal .legal-footer-text {
  font-size: 13px;
  color: var(--mid-gray);
  margin: 0 auto;
  text-align: center;
  line-height: 20.5px;
  margin-bottom: 17px;
}
body.arcadian-legal .legal-footer-text a { color: var(--mid-gray); text-decoration: none; }
body.arcadian-legal .legal-footer-text a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ───────────────────────────────────────────────────────────
 * Single Insight article (single-arcadian_insight.php)
 * Mirrors the static design files
 *   ArcadianRoboticsWebFiles/article-infrastructure-operators-dilemma.html
 *   ArcadianRoboticsWebFiles/article-beyond-the-pig.html
 * ─────────────────────────────────────────────────────────── */
.arcadian-article {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--slate);
  background: var(--white);
}
.arcadian-article .article-hero {
  background: var(--navy);
  padding: 120px 6% 72px;
  margin-top: 64px;
}
.admin-bar .arcadian-article .article-hero { margin-top: 96px; }
@media screen and (max-width: 782px) {
  .admin-bar .arcadian-article .article-hero { margin-top: 110px; }
}
.arcadian-article .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  margin-bottom: 36px;
  transition: color 0.2s;
}
.arcadian-article .back-link:hover { color: var(--teal); }
.arcadian-article .back-link::before { content: '\2190'; font-size: 14px; }
.arcadian-article .article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.arcadian-article .article-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(46,196,182,0.1);
  padding: 5px 12px;
  border-radius: 2px;
}
.arcadian-article .article-date,
.arcadian-article .article-read-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.arcadian-article .article-headline {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  color: white;
  letter-spacing: 0.01em;
  /* The headline carries explicit <br> tags (set in the
     `_arcadian_article_title_html` meta field) for pixel-perfect line breaks,
     so the only job of max-width here is to be wide enough that the widest
     forced segment (e.g. "Beyond the Pig: How the Natural Gas Industry's")
     fits on a single line in Oswald-700 with letter-spacing 0.01em. 1200px
     accommodates that comfortably; the <br> tags handle the rest of the wrap. */
  max-width: 1200px;
  margin: 0 0 24px;
  text-wrap: wrap;
}
.arcadian-article .article-deck {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.70);
  max-width: 800px;
  margin: 0;
}
.arcadian-article .article-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 6% 100px;
}
.arcadian-article .article-wrap p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.78;
}
.arcadian-article .article-wrap h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 52px 0 16px;
  padding-top: 4px;
}
.arcadian-article .article-wrap h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 36px 0 12px;
}
.arcadian-article .article-wrap p > a,
.arcadian-article .article-wrap li > a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(46,196,182,0.3);
}
.arcadian-article .article-wrap p > a:hover,
.arcadian-article .article-wrap li > a:hover { border-bottom-color: var(--teal); }

/* Pull quote (arcadian/pull-quote block) */
.pull-quote {
  border-left: 3px solid var(--teal);
  padding: 20px 28px;
  margin: 40px 0;
  background: var(--off-white, #F8F9FB);
  border-radius: 0 4px 4px 0;
}
.pull-quote p {
    font-family: 'Inter', sans-serif;
    font-size: 20px !important;
    font-style: italic;
    line-height: 1.55 !important;
    color: var(--navy);
    margin-bottom: 0 !important;
}

/* Callout (arcadian/callout block) */
.callout {
  background: var(--navy);
  border-radius: 4px;
  padding: 28px 32px;
  margin: 40px 0;
}
.callout-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
/* Specificity note: .arcadian-article .article-wrap p (0,2,1) would beat
   plain .callout p (0,1,1), so the callout paragraphs would inherit the
   article body 18px/1.78 instead of the intended 16px/1.65. Prefix these
   with .arcadian-article to match specificity and let source order win. */
.arcadian-article .callout-body p,
.arcadian-article .callout p {
  font-size: 16px;
  color: rgba(255,255,255,0.80);
  margin: 0 0 8px;
  line-height: 1.65;
}
.arcadian-article .callout-body p:last-child,
.arcadian-article .callout p:last-child { margin-bottom: 0; }
.arcadian-article .callout-body strong,
.arcadian-article .callout strong { color: white; }

/* Data row (arcadian/data-row block) */
.data-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--light-gray);
  margin: 40px 0;
  border-radius: 4px;
  overflow: hidden;
}
.data-cell {
  background: var(--white);
  padding: 24px 20px;
}
.data-number {
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 6px;
}
.data-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}
.data-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid-gray);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* Divider + closing block */
.arcadian-article .article-divider {
  width: 48px;
  height: 3px;
  background: var(--teal);
  margin: 48px 0;
}
.arcadian-article .article-closing {
  border-top: 1px solid var(--light-gray);
  padding-top: 48px;
  margin-top: 48px;
}
.arcadian-article .article-closing-label {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}
.arcadian-article .article-closing p {
  font-size: 17px;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 20px;
}
.arcadian-article .article-cta { margin-top: 32px; }
.arcadian-article .article-cta .btn-primary,
.arcadian-article a.btn-primary {
  background: var(--teal) !important;
  color: var(--navy) !important;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: none;
  border-bottom: none;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.arcadian-article .article-cta .btn-primary:hover,
.arcadian-article a.btn-primary:hover {
  opacity: 0.88;
  background: var(--teal) !important;
  color: var(--navy) !important;
  border-bottom: none;
}

@media (max-width: 900px) {
  .arcadian-article .article-wrap { padding: 56px 5% 80px; }
  .arcadian-article .article-wrap p { font-size: 17px; }
  .data-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .arcadian-article .article-hero { padding: 100px 5% 48px; }
  .arcadian-article .article-headline { font-size: 28px; }
  .arcadian-article .article-deck { font-size: 16px; }
  .arcadian-article .article-wrap { padding: 40px 5% 64px; }
  .arcadian-article .article-wrap p { font-size: 16px; line-height: 1.72; }
  .arcadian-article .article-wrap h2 { font-size: 22px; margin-top: 40px; }
  .data-row { grid-template-columns: 1fr; }
  .pull-quote p { font-size: 18px; }
  .callout { padding: 20px; }
  .data-number { font-size: 28px; }
}

/* Block editor preview helpers for the custom article blocks */
.editor-styles-wrapper .pull-quote { padding: 16px 24px; }
.editor-styles-wrapper .callout.is-editor { color: rgba(255,255,255,0.85); }
.editor-styles-wrapper .callout.is-editor .callout-label,
.editor-styles-wrapper .callout.is-editor .callout-body { color: inherit; }
.editor-styles-wrapper .data-row.is-editor .data-number { color: var(--teal); }