/* ==========================================================
   SUAS — Inner pages (career, contact, product)
   Page-section styles only. Tokens, base, type, buttons,
   header and footer come from theme.css (loaded first).
   The old variable names below are kept as aliases of the
   theme tokens so the page sections (and the inline <style>
   blocks in each page) pick up the new palette and type.
   ========================================================== */
:root{
  --color-bg:            var(--paper);
  --color-bg-alt:        var(--mist);
  --color-ink:           var(--txt);
  --color-ink-soft:      var(--txt-2);
  --color-accent:        var(--blue);
  --color-accent-deep:   var(--accent-hover);
  --color-accent-light:  var(--blue-tint);
  --color-panel:         var(--mist);
  --color-line:          var(--line);
  --color-dark-panel:    var(--navy);
  --font-display: var(--f-display);
  --font-body:    var(--f-body);
  --font-mono:    var(--f-body);
  --header-h: var(--hdr);
  --max-w: 1180px;
  --radius-md: 10px;
  --radius-lg: 18px;
  /* Shared section heading size: same variable and values as home.css / about.css
     (neither is loaded on product, career or contact) */
  --h-section:clamp(32px,3.4vw,50px);
  --h-section-lh:1.04;
}
@media (max-width:600px){
  :root{--h-section:32px}
}

/* Base for page content (theme.css zeroes these margins) */
main{line-height:1.5}
main p{margin:0 0 1em}
main h1,main h2,main h3{margin:0 0 .5em;line-height:1.12}
main h1,main h2{font-family:var(--f-display);font-weight:800;font-stretch:100%;text-transform:uppercase;letter-spacing:-.005em;line-height:1.06}
main h3{font-family:var(--f-display);font-weight:700;font-stretch:104%}
.sprite-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Old button names, new look (see .btn in theme.css) */
.btn--solid{background:var(--accent-hover);color:#fff}
.btn--solid:hover{background:var(--accent-press)}
.btn--outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}

/* ==========================================================
   Kinematic trace line — signature decorative element
   A thin dashed path with a moving dot, echoing a tool path,
   running the height of the page. Desktop only.
   ========================================================== */
.trace-line{
  position:absolute;
  top:0; left: 22px;
  width: 3px;
  height: 100%;
  pointer-events:none;
  z-index:1;
}
.trace-line path{
  fill:none;
  stroke: var(--color-line);
  stroke-width: 2;
  stroke-dasharray: 2 10;
}
.trace-line circle{
  fill: var(--color-accent);
}
@media (max-width: 900px){
  .trace-line{ display:none; }
}

/* ==========================================================
   Shared: eyebrow pill, section head, body copy
   ========================================================== */
.eyebrow-light{ color: var(--color-accent-light); }
.eyebrow-pill{
  display:inline-block;
  background: var(--color-accent-light);
  color: var(--color-ink);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 1.2em;
}

.section-head{
  max-width: 720px;
  margin: 0 auto 2.4em;
  text-align:center;
}
.section-head h2{ font-size: var(--h-section); line-height: var(--h-section-lh); }
.section-sub{ color: var(--color-ink-soft); font-size: 1.02rem; margin:0; }

.body-copy{ color: var(--color-ink-soft); font-size: 1.02rem; }

.text-link{
  font-weight: 600;
  color: var(--color-accent-deep);
  border-bottom: 1.5px solid var(--color-accent-light);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease);
}
.text-link:hover{ border-color: var(--color-accent-deep); }

section{ position: relative; z-index: 2; }

/* subtle robot arm loop animation inside the SVG illustrations */
.anim-arm{ transform-origin: 560px 460px; animation: armSway 4.5s ease-in-out infinite; }
.anim-arm-alt{ transform-origin: 330px 460px; animation: armSway 4.5s ease-in-out infinite; }
.anim-arm-center{ transform-origin: 480px 440px; animation: armSway 4.5s ease-in-out infinite; }
.anim-shopfloor-arm{ transform-origin: 650px 220px; animation: armSway 4.2s ease-in-out infinite; }
@keyframes armSway{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-6deg); }
}

/* Round icon badge (contact info cards) */
.info-icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  width: 52px; height:52px;
  border-radius:50%;
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  margin-bottom: 18px;
}
.info-icon svg{ width:26px; height:26px; }

/* ==========================================================
   Call to action
   ========================================================== */
.cta-section{
  padding: 110px 28px;
  text-align:center;
  max-width: 900px;   /* room for the --h-section title on one line */
  margin: 0 auto;
}
.cta-section h2{ font-size: var(--h-section); line-height: var(--h-section-lh); }
.cta-copy{ color: var(--color-ink-soft); font-size: 1.04rem; }
.cta-buttons{
  display:flex;
  gap: 16px;
  justify-content:center;
  margin-top: 1.6em;
  flex-wrap:wrap;
}

/* ==========================================================
   Contact form
   ========================================================== */
.contact-section{
  background: var(--color-accent-light);
  padding: 70px 28px 90px;
}
.contact-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin: 0 auto 2em;
  max-width: var(--max-w);
}

.contact-form{
  max-width: var(--max-w);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.form-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.form-row:last-of-type{ grid-template-columns: 1fr auto; align-items:end; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--wide{ grid-column: span 1; }
.field label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.field input, .field textarea{
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
  color: var(--color-ink);
  resize: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus{
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
  outline:none;
}
.btn--submit{ white-space:nowrap; height: 48px; }
.form-status{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-accent-deep);
  min-height: 1.2em;
  margin: 4px 0 0;
}

@media (max-width: 860px){
  .form-row{ grid-template-columns: 1fr 1fr; }
  .form-row:last-of-type{ grid-template-columns: 1fr; }
  .btn--submit{ width:100%; }
  .contact-section{ padding: 56px 20px 70px; }
}
@media (max-width: 520px){
  .form-row{ grid-template-columns: 1fr; }
}

/* ==========================================================
   Section label (career page)
   ========================================================== */

/* ----------------------------
   Shared "section label" — small accent bar + pill
   used above Career-page section headings
-----------------------------*/
.section-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 auto 2.4em;
  max-width: var(--max-w);
}
.section-label .label-bar{
  width:4px;
  height:22px;
  border-radius:2px;
  background: var(--color-accent-deep);
  flex-shrink:0;
}
.section-label .eyebrow-pill{
  margin:0;
  font-family: var(--font-display);
  font-weight:700;
  font-size:0.9rem;
}


/*======================================
PRODUCT EXPLORER (first section)
Reference: reference/SUAS_Product_Explorer_Split_Centered.html.
Light band (mist): the RTU features band below is the plain light shade.
Desktop (901px+): text column left (about a quarter), viewer card right;
the wrapper is wider than --maxw (up to 1600px), --pad stays the side minimum.
Below 901px: eyebrow, heading, text, feature lines, then the card.
======================================*/

.product-hero{
    padding:clamp(32px,8vw,64px) 0;
    background:var(--bg-alt);
}
.pv-wrap{
    max-width:1600px;
    margin:0 auto;
    padding:0 var(--pad);
    display:grid;
    gap:28px;
}
@media (min-width:901px){
    .pv-wrap{grid-template-columns:clamp(280px,24vw,400px) minmax(0,1fr);gap:clamp(24px,2.4vw,40px);align-items:center}
}

.pv-info{min-width:0}
.pv-eyebrow{
    margin:0 0 18px;
    font:700 12.5px/1.45 var(--f-body);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent-hover);       /* 4.5:1 on mist */
}
/* the page's single h1; size and its 600px override come from --h-section (shared rule below) */
.pv-info .pv-title{
    margin:0 0 18px;
    font-weight:700;
    text-transform:none;
    letter-spacing:-.05em;
    line-height:.97;
    color:var(--text);
}
.pv-title span{color:var(--text-muted);font-weight:600}   /* mockup grey #8d9296 is 2.5:1 here; 4.6:1 */
.pv-info .pv-text{margin:0 0 14px;max-width:380px;font-size:15px;line-height:1.7;color:var(--text-muted)}

/* ---------- RTU 360 viewer card (rtu360.js) ----------
   Header strip, stage (picture, breadcrumb, hint / caption slot), toolbar. The card is also the
   full screen element. The picture is contain-fitted in the stage by rtu360.js, with no box: its
   edges fade into the stage colour, the manifest's background colour (--rtu360-bg); zoomed in, it
   fills the whole stage. Labels sit in the stage margin beside the picture,
   or in the slot when that margin is too narrow (or on touch). Labels never cover the picture.
   --rtu360-ar = lg width / height in assets/rtu360/v1/manifest.json (rtu360.js re-applies it). */
.rtu360{
    --rtu360-ar:656 / 513;
    --rtu360-head:52px;
    --rtu360-tool:64px;
    --rtu360-slot:56px;              /* hint line, or a one-line caption (name + text); 76px on narrow cards */
    --rtu360-line:color-mix(in srgb,var(--line) 70%,#fff);
    --rtu360-radius:0px;             /* the mockup's card and buttons are square */
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    container-type:inline-size;      /* for the narrow-card rules below */
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--rtu360-radius);
    box-shadow:0 20px 60px color-mix(in srgb,var(--text) 6%,transparent);
    color:var(--text);
}

.rtu360__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:var(--rtu360-head);
    padding:0 24px;
    border-bottom:1px solid var(--rtu360-line);
}
main .rtu360__title,
main .rtu360__badge,
main .rtu360__crumb,
main .rtu360__status{margin:0;font-family:var(--f-display);font-stretch:100%;text-transform:uppercase}
.rtu360__title{font-size:12px;font-weight:800;letter-spacing:.14em;line-height:1.2}
.rtu360__badge{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-muted)}
.rtu360__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rtu360.is-expanded .rtu360__badge{margin-left:auto}

.rtu360__stage{
    position:relative;
    display:grid;
    grid-template-rows:auto var(--rtu360-slot);
    background:var(--rtu360-bg,#fff);
}
main .rtu360__crumb{
    position:absolute;
    top:16px;
    left:20px;
    z-index:1;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1.2;
    color:var(--text-muted);
    pointer-events:none;
    transition:opacity .15s var(--ease);
}
.rtu360.is-zoomed .rtu360__crumb{opacity:0}   /* zoomed in, the picture fills the stage under it */

.viewer-card{
    position:relative;
    height:var(--rtu360-h,auto);
    aspect-ratio:var(--rtu360-ar);
    overflow:hidden;
    touch-action:pan-y;             /* vertical swipes scroll the page, horizontal drags rotate */
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
}
.rtu360.is-dragging .viewer-card{cursor:grabbing}
.rtu360.is-pan .viewer-card{cursor:move;touch-action:none}
.rtu360.is-failed .viewer-card{cursor:default}

.rtu360__poster,
.rtu360__canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}
.rtu360__poster{max-width:none;object-fit:contain;transform-origin:50% 50%}   /* moved onto the picture box with transform by rtu360.js */
.rtu360.is-drawn .rtu360__poster{visibility:hidden}
.rtu360__canvas:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-4px;border-radius:4px}
.rtu360.is-failed .rtu360__canvas{display:none}

/* ---------- part pointers: faint ring, full on hover / focus; no animation at rest ---------- */
.rtu360__points{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden}
.rtu360.is-parts .rtu360__points{opacity:1;visibility:visible;transition:opacity .15s var(--ease)}   /* out: instantly */
.rtu360__pt{
    position:absolute;
    left:0;
    top:0;                          /* moved with transform by rtu360.js (no layout shift) */
    width:32px;
    height:32px;
    margin:-16px 0 0 -16px;         /* centred on its point */
    padding:0;
    border:0;
    border-radius:50%;
    background:none;
    display:grid;
    place-items:center;
    cursor:pointer;
    pointer-events:auto;
}
@media (pointer:coarse){
    .rtu360__pt{width:44px;height:44px;margin:-22px 0 0 -22px}
}
.rtu360__pt.is-off{visibility:hidden;pointer-events:none}
.rtu360.is-dragging .rtu360__pt{pointer-events:none}
.rtu360__dot{
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid var(--accent);
    background:color-mix(in srgb,var(--accent) 30%,transparent);
    box-shadow:0 0 0 1px #fff;
    opacity:var(--rtu360-rest,.25);
    transition:opacity .15s var(--ease),transform .15s var(--ease);
}
.rtu360__pt:hover .rtu360__dot,
.rtu360__pt:focus-visible .rtu360__dot,
.rtu360__pt.is-active .rtu360__dot{opacity:1;transform:scale(1.25)}
.rtu360__pt:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-5px;border-radius:50%}
.rtu360__pt::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:24px;
    height:24px;
    margin:-12px 0 0 -12px;
    border-radius:50%;
    border:2px solid var(--accent);
    box-shadow:0 0 0 1px #fff;
    opacity:0;
    pointer-events:none;
}
.rtu360.is-pulse .rtu360__pt::after{animation:rtu360DotPulse .6s ease-out 2}
@keyframes rtu360DotPulse{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}

/* ---------- loading ring (centred over the stage) and the error line ---------- */
.rtu360__loading{position:absolute;inset:0;z-index:2;width:44px;height:44px;margin:auto;padding:2px}
.rtu360__loading[hidden]{display:none}
.rtu360__loading svg{width:100%;height:100%;transform:rotate(-90deg)}
.rtu360__loading circle{fill:none;stroke-width:4}
.rtu360__loading-track{stroke:var(--line)}
.rtu360__loading-arc{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
main .rtu360__error{
    position:absolute;
    left:50%;
    bottom:12px;
    z-index:2;
    width:max-content;
    max-width:calc(100% - 24px);
    margin:0;
    padding:6px 12px;
    transform:translateX(-50%);
    background:#fff;
    font-size:14px;
    text-align:center;
    color:var(--accent-hover);       /* 5.6:1 on white */
}

/* ---------- leader line (labels in the stage margin) ---------- */
.rtu360__leader{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    display:none;
}
.rtu360__leader.is-shown{display:block}
.rtu360__leader line{stroke:var(--accent);stroke-width:1;opacity:.7}

/* ---------- the slot at the bottom of the stage: hint line, or the part label (caption) ---------- */
.rtu360__slot{
    display:grid;
    align-items:center;
    justify-items:center;
    height:var(--rtu360-slot);
    padding:0 16px;
}
.rtu360__slot > *{grid-area:1 / 1}
main .rtu360__hint{
    display:inline-flex;
    align-items:center;
    gap:9px;
    max-width:100%;
    margin:0;
    padding:7px 14px;
    border:1px solid var(--rtu360-line);
    background:#fff;
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    color:var(--text-muted);         /* 5.8:1 on white */
    transition:opacity .2s var(--ease);
}
.rtu360__hint svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rtu360.has-caption .rtu360__hint{opacity:0;visibility:hidden}
.rtu360__hint-text{display:inline-grid}    /* texts from the HINT_* constants in rtu360.js */
.rtu360__hint-text > span{grid-area:1 / 1}
.rtu360__hint-b,
.rtu360__hint-text.is-alt .rtu360__hint-a{visibility:hidden}
.rtu360__hint-text.is-alt .rtu360__hint-b{visibility:visible}

.rtu360__label{
    display:flex;
    flex-direction:column;
    gap:2px;
    max-width:100%;
    padding:6px 12px;
    background:#fff;
    border:1px solid var(--accent);
    border-radius:10px;
    box-shadow:0 10px 28px -12px color-mix(in srgb,var(--text) 35%,transparent);
    color:var(--text);               /* 17:1 on white */
    text-align:left;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .12s var(--ease),visibility 0s linear .12s;
}
.rtu360__label.is-shown{opacity:1;visibility:visible;transition:opacity .12s var(--ease),visibility 0s}
.rtu360__slot .rtu360__label:not(.is-side) .rtu360__label-name{line-height:1.25}
.rtu360__slot .rtu360__label:not(.is-side) .rtu360__label-text{line-height:1.3}
.rtu360__label.is-side{position:absolute;left:0;top:0;z-index:3;width:max-content;padding:8px 12px}   /* placed with transform, in the stage */
.rtu360__label-name{font:600 16px/1.3 var(--f-body)}
.rtu360__label-text{font-size:14px;line-height:1.4;color:var(--text-muted)}   /* 5.8:1 on white */
.rtu360__label-num{
    align-self:flex-start;
    min-width:22px;
    padding:1px 6px;
    border-radius:999px;
    background:var(--accent-hover);
    color:#fff;
    font:600 14px/1.3 var(--f-body);
    text-align:center;
}

/* ---------- toolbar: Auto, previous, next | label | info, zoom out, zoom in, Reset, full screen ---------- */
.rtu360__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px 12px;
    min-height:var(--rtu360-tool);
    padding:10px 16px;
    border-top:1px solid var(--rtu360-line);
}
.rtu360__group{display:flex;align-items:center;gap:10px}
main .rtu360__status{font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.2;color:var(--text-muted);text-align:center;white-space:nowrap}
.rtu360__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--rtu360-radius);
    background:#fff;
    color:color-mix(in srgb,var(--text) 80%,var(--text-muted));
    cursor:pointer;
    touch-action:manipulation;       /* previous / next can be held down */
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.rtu360__btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
    .rtu360__btn:hover:not(:disabled):not([aria-disabled="true"]){background:var(--bg);border-color:color-mix(in srgb,var(--text-muted) 60%,#fff)}
}
.rtu360__btn:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px;border-radius:var(--rtu360-radius)}   /* 5.6:1 on white */
.rtu360__btn:disabled,
.rtu360__btn[aria-disabled="true"]{opacity:.4;cursor:default}
.rtu360__btn--auto{
    min-width:96px;
    padding:0 16px;
    background:var(--dark);
    border-color:var(--dark);
    color:#fff;                      /* 17:1 */
    font:800 12px/1 var(--f-display);
    letter-spacing:.08em;
}
.rtu360__btn--auto svg{width:15px;height:15px;stroke-width:1.9}
@media (hover:hover){
    .rtu360__btn--auto:hover:not(:disabled){background:var(--dark-3);border-color:var(--dark-3)}
}
.rtu360__btn--auto[aria-pressed="true"],
.rtu360__btn--auto[aria-pressed="true"]:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}   /* on: 5.6:1 */
.rtu360__ic-pause,
.rtu360__btn--auto[aria-pressed="true"] .rtu360__ic-play{display:none}
.rtu360__btn--auto[aria-pressed="true"] .rtu360__ic-pause{display:block}
.rtu360__ic-exit,
.rtu360__btn--full[aria-pressed="true"] .rtu360__ic-enter{display:none}
.rtu360__btn--full[aria-pressed="true"] .rtu360__ic-exit{display:block}
.rtu360__btn--info{font:700 18px/1 Georgia,'Times New Roman',serif}
.rtu360__btn--info[aria-expanded="true"]{background:var(--bg);border-color:var(--accent)}
.rtu360__btn--reset{position:relative}
.rtu360__btn--reset::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:var(--rtu360-radius);
    border:2px solid var(--accent);
    opacity:0;
    pointer-events:none;
}
/* while the intro bubble is up: 2 soft pulses every 6 s (opacity / scale only) */
.rtu360.has-intro .rtu360__btn--reset::after{animation:rtu360ResetPulse 6s ease-out infinite}
.rtu360.is-offscreen .rtu360__btn--reset::after{animation-play-state:paused}
@keyframes rtu360ResetPulse{
    0%{opacity:.85;transform:scale(1)}
    12%{opacity:0;transform:scale(1.18)}
    12.01%{opacity:.85;transform:scale(1)}
    24%{opacity:0;transform:scale(1.18)}
    100%{opacity:0;transform:scale(1.18)}
}

/* ---------- Reset tooltip and intro bubble (same look), info popover: white panels with an amber edge ---------- */
.rtu360__tip,
.rtu360__info{
    position:absolute;
    left:0;
    top:0;
    z-index:6;
    width:max-content;
    background:#fff;
    border:1px solid var(--accent);
    border-radius:10px;
    box-shadow:0 12px 30px -12px color-mix(in srgb,var(--text) 40%,transparent);
    color:var(--text);
}
.rtu360__tip{
    --arrow-x:50%;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:min(260px,calc(100vw - 32px));
    padding:8px 12px;
    font:600 14px/1.35 var(--f-body);
    pointer-events:none;                    /* never blocks the button under the pointer */
}
.rtu360__tip--intro{pointer-events:auto;padding-right:6px}
.rtu360__tip::before{                       /* the little arrow towards Reset */
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    background:#fff;
    border:0 solid var(--accent);
    transform:rotate(45deg);
}
.rtu360__tip[data-side="right"]::before{left:-6px;top:calc(50% - 5px);border-left-width:1px;border-bottom-width:1px}
.rtu360__tip[data-side="below"]::before{top:-6px;left:calc(var(--arrow-x) - 5px);border-left-width:1px;border-top-width:1px}
.rtu360__tip[data-side="above"]::before{bottom:-6px;left:calc(var(--arrow-x) - 5px);border-right-width:1px;border-bottom-width:1px}
.rtu360__tip-close{
    flex:none;
    display:inline-grid;
    place-items:center;
    width:26px;
    height:26px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--text);
    font:700 18px/1 var(--f-body);
    cursor:pointer;
}
.rtu360__tip-close:hover{background:var(--bg-alt)}
.rtu360__tip-close:focus-visible{outline:2px solid var(--accent-hover);outline-offset:1px}
@media (pointer:coarse){
    .rtu360__tip-close{width:44px;height:44px;margin:-8px -6px -8px 0}
}
.rtu360__info{
    max-width:min(280px,calc(100vw - 32px));
    padding:12px 14px;
}
main .rtu360__info-title{margin:0 0 6px;font:600 16px/1.3 var(--f-body);text-transform:none;letter-spacing:0}
main .rtu360__info-text p{margin:0 0 4px;font-size:14px;line-height:1.45;color:var(--text-muted)}   /* 5.8:1 on white */
main .rtu360__info-text p:last-child{margin-bottom:0}

/* ---------- full screen (Fullscreen API) and the in-page expanded mode (no API, e.g. iPhone Safari) ---------- */
.rtu360.is-full{width:100%;height:100%;max-width:none;border:0;box-shadow:none}
.rtu360.is-full .rtu360__stage{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr) var(--rtu360-slot)}
.rtu360.is-full .viewer-card{height:auto;aspect-ratio:auto;max-height:none;min-height:0}
.rtu360.is-expanded{position:fixed;inset:0;z-index:1000;height:100%;height:100dvh}
html.rtu360-lock,html.rtu360-lock body{overflow:hidden}   /* page scroll locked while the expanded viewer is open */
html.rtu360-lock .product-hero{z-index:1000}   /* the section's stacking context goes above the sticky site header */
.rtu360__close{flex:none}
.pv-wrap.is-holding{min-height:var(--rtu360-hold)}   /* keeps the section's height while the card is full screen */

/* ---------- desktop: the card fits the window ---------- */
@media (min-width:901px){
    /* stage picture row height from the window: section padding, header strip, slot, toolbar and borders take the rest */
    .rtu360__stage{--rtu360-h:clamp(240px,calc(100svh - var(--hdr) - 2 * var(--pad-y,32px) - var(--rtu360-head) - var(--rtu360-tool) - var(--rtu360-slot) - 4px),700px)}
    .viewer-card{aspect-ratio:auto}
}
/* narrow card (any window): room for a two-line caption; narrower still: the centre label goes */
@container (max-width:820px){
    .rtu360__stage{--rtu360-slot:76px}
}
@container (max-width:700px){
    main .rtu360__status{display:none}
}

/* short desktop windows: a slightly tighter text column, so the card sets the row height */
@media (min-width:901px) and (max-height:780px){
    .pv-eyebrow{margin-bottom:12px}
    .pv-info .pv-title{margin-bottom:14px}
    .pv-info .pv-text{margin-bottom:10px;line-height:1.6}
}

/* ---------- phones and narrow windows ---------- */
@media (max-width:900px){
    .pv-info .pv-text{max-width:640px}
    .rtu360{--rtu360-head:48px}
    .rtu360__head{padding:0 14px}
    main .rtu360__crumb{top:12px;left:14px}
    .viewer-card{max-height:62svh}
    .rtu360__bar{padding:10px 12px}
}
@media (max-width:599px){
    .rtu360__head{gap:10px;padding:0 12px}
    .rtu360__title,.rtu360__badge{white-space:nowrap}
    main .rtu360__title{font-size:11px;letter-spacing:.08em}
    main .rtu360__badge{gap:6px;font-size:10px;letter-spacing:.08em}
    main .rtu360__status{display:none}
    .rtu360__bar{flex-wrap:wrap}
    .rtu360__group{width:100%}
    .rtu360__group .rtu360__btn{flex:1 1 0}
    .rtu360__btn--auto{flex-grow:2}
}

/*======================================
FEATURE LIST
======================================*/

.feature-list{

    width:100%;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:0 45px;

}

.feature-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid var(--line-inv);

}

.feature-row:last-child{

    border-bottom:none;

}

.feature-name{

    flex:1;

    font-size:16px;

    color:var(--inv);

    line-height:1.6;

}

/*======================================
STATUS
======================================*/

.feature-status{

    width:90px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.status-check{

    font-size:24px;

    color:var(--green);   /* 6:1 on the dark card */

    font-weight:700;

}

.status-option{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:color-mix(in srgb,var(--accent-on-dark) 14%,transparent);

    color:var(--accent-on-dark);

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

}

/*======================================
SPECIFICATION TABLE
======================================*/

.spec-table{

    width:100%;
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:0 45px;

}

.table-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid var(--line-inv);

}

.table-row:last-child{

    border-bottom:none;

}

.table-label{

    flex:1;

    color:var(--inv);

    font-size:16px;

    line-height:1.6;

}

.table-value{

    width:140px;

    text-align:right;

    font-weight:600;

    font-size:16px;

    color:var(--inv);

}

.table-value .status-option{

    float:right;

}

/*======================================
CONTENT
======================================*/

.spec-content{

    background:var(--dark-2);

    border-radius:24px;

    padding:45px 55px;

    border:1px solid var(--line-inv);

    box-shadow:

        0 18px 40px -16px rgba(0,0,0,.65);

}

/*======================================
RESPONSIVE
======================================*/

@media(max-width:768px){

.feature-row,

.table-row{

    flex-direction:column;

    align-items:flex-start;

}

.feature-status,

.table-value{

    width:100%;

    justify-content:flex-start;

    text-align:left;

}

.spec-content{

    padding:30px 24px;

}

}

@media(max-width:900px){

    .feature-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    .feature-grid{

        grid-template-columns:1fr;

    }

    .spec-table{

        grid-template-columns:1fr;

    }

    .feature-row,

    .table-row{

        gap:15px;

    }

}
/*======================================
RTU FEATURES (#capabilities, light band)
Reference: reference/suas_rtu_features_hmi_footer_removed.html, rebuilt
with the theme tokens and type (every class prefixed cap-). The drawn
machines keep raw neutral greys; the HMI shows the real SUAS control
screen (assets/images/about/software-engineering.png). Animations pause
off-screen (.cap-is-off, scriptproduct.js) and stop under
prefers-reduced-motion (theme.css).
======================================*/

.cap-section{padding:clamp(56px,8vw,96px) 0;background:var(--bg)}
.cap-wrap{width:100%;max-width:min(1200px,92%);margin:0 auto}   /* max-width: the one-window rule sets width:100% on section wrappers */

.cap-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(22px,3.6vh,35px)}
.cap-eyebrow{display:flex;align-items:center;gap:14px}
.cap-eyebrow::before{content:"";width:40px;height:2px;flex:none;background:var(--accent)}
main .cap-title{margin:0;color:var(--txt)}
.cap-accent{color:var(--accent-hover)}
.cap-section .cap-sub{max-width:420px;margin:0 0 4px;color:var(--txt-2);font-size:15px;line-height:1.65}

.cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cap-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 28px color-mix(in srgb,var(--text) 4%,transparent);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.cap-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 20px 40px color-mix(in srgb,var(--text) 11%,transparent)}

/* ---- visual area + labelled index badge ---- */
.cap-visual{position:relative;height:300px;overflow:hidden;background:linear-gradient(145deg,#f9fafb,#e9edf1 62%,#dbe0e5)}
.cap-visual::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7)}
.cap-visual>svg{display:block;width:100%;height:100%}
.cap-section .cap-index{position:absolute;z-index:3;top:18px;left:18px;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 24px);margin:0;padding:7px 10px;
  border-radius:5px;color:var(--text);line-height:1.1;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
.cap-index::after{content:"";width:26px;height:1px;flex:none;background:var(--text)}
.cap-index-num{font-size:11px;font-weight:800}
.cap-index-label{font-size:10px;font-weight:700;letter-spacing:.07em}

.cap-copy{flex:1;padding:21px 25px 23px}
.cap-copy h3{margin:0 0 8px;font-size:1.3rem;line-height:1.25;color:var(--txt)}
.cap-section .cap-copy p{margin:0;color:var(--txt-2);font-size:14px;line-height:1.7}

/* ---- 01: the real SUAS control screen on a tilted panel (no stand, no footer) ---- */
.cap-hmi{position:absolute;left:4%;right:3%;top:62px;aspect-ratio:1.77;overflow:hidden;background:#222831;
  border:8px solid #252b33;border-bottom-width:12px;border-radius:12px;
  box-shadow:5px 17px 28px rgba(25,35,48,.25),inset 0 1px rgba(255,255,255,.4);
  transform:perspective(1000px) rotateY(-7deg) rotateZ(-2deg);transition:transform .5s var(--ease)}
.cap-card:hover .cap-hmi{transform:perspective(1000px) rotateY(-2deg) rotateZ(0deg)}
.cap-hmi-screen{display:block;width:100%;height:100%;object-fit:fill}

/* ---- 02: production outlook dashboard ---- */
.cap-visual--forecast{background:linear-gradient(125deg,#e4eaf0,#aebbc8 65%,#d9e0e7)}
.cap-fc{position:absolute;top:48px;bottom:10px;left:7%;right:6%;display:flex;flex-direction:column;justify-content:space-between;gap:3px;overflow:hidden;
  padding:11px 12px 10px;border:1px solid rgba(255,255,255,.6);border-radius:11px;color:#fff;
  background:linear-gradient(140deg,rgba(70,91,109,.94),rgba(38,55,72,.95));box-shadow:0 16px 28px rgba(28,48,64,.23),inset 0 1px rgba(255,255,255,.3);
  font-size:8px;line-height:1.3}
.cap-fc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cap-fc-kicker{font-size:7px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#ffb785}
.cap-fc-title{margin-top:2px;font-size:14px;font-weight:700;letter-spacing:-.3px}
.cap-fc-live{padding:4px 6px;border:1px solid rgba(255,255,255,.32);border-radius:20px;font-size:7px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.cap-fc-live i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--green);animation:capBlink 2s infinite}
.cap-fc-sub{display:flex;justify-content:space-between;gap:5px;margin-top:2px;color:#e5edf3}
.cap-fc-conf{font-size:6px;letter-spacing:.4px;text-transform:uppercase}
.cap-fc-conf b{color:#70eac4}
.cap-fc-chart{display:block;flex:1;width:100%;min-height:0;max-height:105px;margin:0}
.cap-fc-future{animation:capMarch 5s linear infinite}
.cap-fc-pulse{transform-origin:222px 57px;animation:capPulse 3s ease-out infinite}
.cap-fc-traveller{transform-box:fill-box;transform-origin:center;animation:capPoint 3s ease-in-out infinite}
.cap-fc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:6px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#dce7f0}
.cap-fc-foot i{display:inline-block;width:11px;height:2px;margin-right:3px;vertical-align:middle}
.cap-fc-hdot{background:#fff}
.cap-fc-pdot{background:var(--accent-on-dark)}
.cap-fc-update{margin-left:auto;color:#75e2b8;white-space:nowrap}
.cap-fc-metrics{display:flex;gap:5px}
.cap-fc-metric{flex:1;min-width:0;padding:5px 6px;border:1px solid rgba(255,255,255,.4);border-radius:5px;background:rgba(62,85,107,.27);font-size:7px;text-transform:uppercase}
.cap-fc-metric b{display:block;margin-top:1px;font-size:14px;text-transform:none}
.cap-fc-metric em{font-size:8px;font-style:normal;color:#5ce4b0}

/* ---- 03: LiDAR field sensor ---- */
.cap-visual--lidar{background:linear-gradient(145deg,#f4f6f8 0%,#dbe2e8 56%,#b5c0c9 100%)}
.cap-lidar-floor{opacity:.43}
.cap-lidar-field{opacity:.8;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent-on-dark) 19%,transparent))}
.cap-lidar-sweep{transform-origin:220px 176px;animation:capTraverse 4.8s cubic-bezier(.45,0,.55,1) infinite alternate}
.cap-lidar-hit{transform-box:fill-box;transform-origin:center;animation:capHit 4.8s ease-in-out infinite alternate}
.cap-lidar-hit--2{animation-delay:-1.5s}
.cap-lidar-hit--3{animation-delay:-3s}
.cap-lidar-glow{animation:capGlow 2.8s ease-in-out infinite alternate}

/* ---- 04: RTU serving two CNC machines ---- */
.cap-visual--integration{background:linear-gradient(145deg,#f3f6f8,#dce2e8)}
.cap-si-pulse{filter:drop-shadow(0 0 3px var(--accent-on-dark));animation:capShuttle 2.6s ease-in-out infinite}
.cap-si-pulse--2{animation-name:capShuttle2}
.cap-si-light{animation:capActive 2.6s ease-in-out infinite}
.cap-si-light--2{animation-delay:1.3s}

@keyframes capBlink{50%{opacity:.35}}
@keyframes capMarch{to{stroke-dashoffset:-48}}
@keyframes capPulse{0%{transform:scale(.5);opacity:.9}75%,100%{transform:scale(2);opacity:0}}
@keyframes capPoint{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.4)}}
@keyframes capTraverse{from{transform:rotate(135deg)}to{transform:rotate(405deg)}}
@keyframes capHit{0%,35%,100%{opacity:.22;transform:scale(.75)}55%,72%{opacity:1;transform:scale(1.22)}}
@keyframes capGlow{to{opacity:.55}}
@keyframes capShuttle{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}
@keyframes capShuttle2{0%,100%{transform:translateX(0)}50%{transform:translateX(31px)}}
@keyframes capActive{0%,100%{opacity:.35}45%,60%{opacity:1;filter:drop-shadow(0 0 3px var(--accent-on-dark))}}

/* pause the loops while the section is off-screen (scriptproduct.js) */
.cap-is-off *,.cap-is-off *::before,.cap-is-off *::after{animation-play-state:paused}

@media (max-width:1200px){
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-visual{height:310px}
  .cap-hmi{top:65px;left:5%;right:5%}
}
@media (max-width:900px){
  .cap-head{display:block}
  .cap-section .cap-sub{max-width:none;margin:16px 0 0}
}
@media (max-width:650px){
  .cap-grid{grid-template-columns:1fr;gap:17px}
  .cap-visual{height:295px}
  .cap-copy{padding:21px}
  .cap-section .cap-index{padding:6px 8px}
  .cap-index-label{font-size:9px}
  .cap-hmi{top:66px;left:4%;right:4%}
}
@media (prefers-reduced-motion:reduce){
  .cap-card,.cap-card:hover,.cap-hmi,.cap-card:hover .cap-hmi{transition:none}
  .cap-card:hover{transform:none}
}

/*======================================
PRODUCT SPECIFICATIONS
======================================*/

.product-specifications{

    padding:90px 0;

    background:var(--navy);   /* dark band */

}

.product-specifications .container{

    width:min(1200px,92%);

    margin:auto;

}

/*======================================
SECTION HEADING
======================================*/

.section-heading{

    text-align:center;

    margin-bottom:45px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:var(--blue-tint);

    color:var(--accent-hover);

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:18px;

}

/* on the dark specifications band */
.product-specifications .section-tag{

    background:color-mix(in srgb,var(--accent-on-dark) 14%,transparent);

    color:var(--accent-on-dark);

}

.section-heading h2{

    font-size:var(--h-section);

    line-height:var(--h-section-lh);

    color:var(--inv);

    margin-bottom:16px;

}

.section-heading p{

    max-width:700px;

    margin:auto;

    color:var(--inv-2);

    font-size:17px;

    line-height:1.7;

}

/*======================================
TABS
======================================*/

.spec-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:40px;

}

.spec-tab{

    border:none;

    background:rgba(255,255,255,.05);

    border:1px solid var(--line-inv);

    border-radius:30px;

    padding:12px 22px;

    font-size:14px;

    font-weight:600;

    color:var(--inv-2);

    cursor:pointer;

    transition:.3s;

}

.spec-tab:hover{

    color:#fff;

    border-color:var(--accent-on-dark);

    transform:translateY(-2px);

}

.spec-tab.active{

    background:var(--accent-hover);

    color:#fff;

    border-color:var(--accent-hover);

    box-shadow:0 10px 20px rgba(0,0,0,.35);

}

/*======================================
PRODUCT CTA
======================================*/

.product-cta{

    padding:90px 0;

    background:#ffffff;

}

.product-cta .container{

    width:min(900px,92%);

    margin:auto;

}

.cta-content{

    text-align:center;

}

.cta-content h2{

    font-size:var(--h-section);

    line-height:var(--h-section-lh);

    color:var(--txt);

    margin:20px 0;

}

.cta-content p{

    max-width:760px;

    margin:0 auto;

    color:var(--txt-2);

    font-size:18px;

    line-height:1.8;

}

.cta-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

/*======================================
WORKS WITH EXISTING INFRASTRUCTURE (#infra)
Removed from the product page; these rules are unused.
The stage itself is styled in bottom-sections.css (loaded
before this file); these rules only place it on this page.
======================================*/

/* the header is in flow here (.hdr--solid), so no --hdr offset */
.infra-section{padding:clamp(20px,3.5vh,44px) 0 clamp(24px,4vh,48px)}
/* same heading size as every other section heading (--h-section); it may wrap
   one word per line in the narrow column, but never inside a word */
.infra-section .display{font-size:var(--h-section);line-height:var(--h-section-lh);color:var(--txt);margin:0;
  overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
/* undo "main p" / "main h2" margins inside the section and the drawing
   (low specificity: the section's own class rules still win) */
main section:where(.infra-section) p{margin:0}

/* Desktop: two columns. Left (~32%): eyebrow, heading, lede and the note, as one
   vertically centred group. Right (~68%): the stage, bleeding into the container's
   right padding and the page margin, up to a small gutter before the window edge.
   bottom-sections.js scales the stage to that column (width and height).
   Below 901px everything stacks in source order: head, stage, note. */
@media (min-width:901px){
  .infra-section{container-type:inline-size}   /* 100cqw = section width, for the bleed */
  .infra-section>.wrap{
    --infra-gutter:clamp(16px,2vw,32px);
    --infra-bleed:calc(max(0px,(100cqw - var(--maxw)) / 2) + var(--pad) - var(--infra-gutter));
    max-width:var(--maxw);display:grid;align-items:center;
    grid-template-columns:minmax(0,32fr) minmax(0,68fr);grid-template-rows:1fr auto auto 1fr;
    column-gap:clamp(28px,3vw,52px)}
  .infra-section .infra-head{grid-column:1;grid-row:2;margin:0;text-align:left}
  .infra-section .infra-head .lede{margin:clamp(14px,2.4vh,24px) 0 0;max-width:none;font-size:clamp(15px,1.15vw,17px);line-height:1.6}
  .infra-section .infra-note{grid-column:1;grid-row:3;margin-top:clamp(18px,3.2vh,34px);text-align:left;font-size:14px;line-height:1.55}
  .infra-section .infra-note::before{content:"";display:block;width:36px;height:2px;margin-bottom:12px;background:var(--accent)}
  .infra-section .infra-fit{grid-column:2;grid-row:1/-1;margin-right:calc(-1 * var(--infra-bleed))}
}

/* ==========================================================
   Every section heading on product, career and contact uses
   the shared size (same as home / about).
   ========================================================== */
:is([data-page="product"],[data-page="career"],[data-page="contact"]) main>section :is(h1,h2){
  font-size:var(--h-section);line-height:var(--h-section-lh)}

/* ==========================================================
   One section per window: product, career, contact
   Same condition and values as home.css / about.css. The inner-page
   header (.hdr--solid) is sticky and in flow, so each section is
   100svh minus --hdr and needs no header offset in its padding.
   Below 901px wide or 620px tall: natural heights, no snapping.
   ========================================================== */
@media (min-width:901px) and (min-height:620px){
  html:has(>body:is([data-page="product"],[data-page="career"],[data-page="contact"])){
    scroll-snap-type:y proximity;scroll-padding-top:var(--hdr)}

  :is([data-page="product"],[data-page="career"],[data-page="contact"]){
    --pad-y:clamp(16px,3vh,36px);
    --gap-v:clamp(16px,3vh,40px);
  }
  :is([data-page="product"],[data-page="career"],[data-page="contact"]) main>section{
    box-sizing:border-box;min-height:calc(100svh - var(--hdr));scroll-snap-align:start;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:var(--pad-y);padding-bottom:var(--pad-y);margin-top:0}
  /* in a flex column, auto side margins would shrink these wrappers to their content width
     (.container keeps its own width:min(...)) */
  :is([data-page="product"],[data-page="career"],[data-page="contact"]) main>section>div:not(.container){width:100%}
  /* flex items stretch: keep the career CTA's pill at its own width */
  [data-page="career"] .cta-section>.eyebrow-pill{align-self:center}

  /* product: the explorer card height is set with the other rtu360 rules (--pad-y from here) */

  /* ---------- product: RTU features (#capabilities): 300px scenes on tall windows, less on short ones ---------- */
  .cap-visual{height:clamp(190px,32vh,300px)}

  /* ---------- product: specifications (tallest tab: Capacity, 13 rows) ---------- */
  .section-heading{margin-bottom:clamp(14px,2.4vh,32px)}
  .section-tag{margin-bottom:clamp(8px,1.4vh,18px)}
  .section-heading h2{margin-bottom:clamp(6px,1.2vh,16px)}
  .section-heading p{line-height:1.55}
  .spec-tabs{gap:10px;margin-bottom:clamp(12px,2.4vh,32px)}
  .spec-tab{padding:clamp(8px,1.2vh,12px) 20px}
  .spec-content{padding:clamp(14px,2.4vh,36px) clamp(24px,3vw,48px)}
  .feature-row,.table-row{padding:clamp(6px,1vh,14px) 0}
  .feature-name,.table-label{line-height:1.4}
  .status-check{font-size:20px;line-height:1}

  /* ---------- CTAs (product, career) ---------- */
  .cta-content h2{margin:clamp(10px,2vh,20px) 0}
  .cta-buttons{margin-top:clamp(16px,3vh,40px)}

  /* ---------- career: copy + application form ---------- */
  [data-page="career"] .career-hero h1{margin-bottom:clamp(10px,2vh,20px)}
  [data-page="career"] .career-content-inner{gap:clamp(32px,4vw,56px)}
  [data-page="career"] .career-text .section-label{margin-bottom:clamp(10px,2vh,24px)}
  [data-page="career"] .career-text .body-copy{line-height:1.5;margin-bottom:clamp(8px,1.4vh,16px)}
  [data-page="career"] .career-text h3{margin:clamp(10px,2vh,24px) 0 clamp(8px,1.4vh,12px)}
  [data-page="career"] .career-offer-list{gap:clamp(6px,1.2vh,14px);margin-bottom:clamp(10px,2vh,28px)}
  [data-page="career"] .career-offer-list li{line-height:1.45}
  [data-page="career"] .career-closing{margin:0;padding-top:clamp(10px,1.8vh,22px);line-height:1.5}
  [data-page="career"] .career-form-card{position:static;padding:clamp(18px,2.8vh,34px) 32px clamp(16px,2.6vh,30px)}
  [data-page="career"] .career-form-sub{margin-bottom:clamp(10px,1.8vh,24px)}
  /* name | email, phone | role side by side; message, resume and button full width */
  [data-page="career"] .career-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vh,14px) 14px}
  [data-page="career"] .career-form>:nth-child(n+5){grid-column:1/-1}
  [data-page="career"] .career-form .field input,[data-page="career"] .career-form .field select,[data-page="career"] .career-form .field textarea{min-width:0;width:100%;padding:clamp(9px,1.3vh,13px) 14px}
  [data-page="career"] .career-form .form-status{margin:0;min-height:0}

  /* ---------- contact: photo band, info cards, form ---------- */
  [data-page="contact"] .contact-quickfacts{margin-top:clamp(16px,3vh,32px)}
  [data-page="contact"] .contact-form-panel{padding:clamp(24px,4vh,48px) clamp(32px,4.5vw,64px)}
  [data-page="contact"] .contact-form-panel .contact-heading{margin-bottom:clamp(14px,2.6vh,29px)}
  [data-page="contact"] .contact-form-panel .field textarea{height:clamp(96px,18vh,160px)}
}