/* ==========================================================================
   Service pages - vividls.com/interpreting.php and /translations.php

   Both pages share this one sheet on purpose: the client asked for the two to
   match, and one sheet is the only way to guarantee they stay matched when
   either is edited later.

   Deliberately self-contained. Everything is prefixed .vsvc- and this file
   declares its own colours and buttons rather than leaning on vivid-2026.css,
   because that sheet is only linked from the homepage. Nothing in here can
   reach the theme's own classes, so style.css is unaffected.

   Font is inherited - the site loads Muli globally in theme-default.css.
   ========================================================================== */

.vsvc-wrap{
  --navy:#0d2149;
  --navy-soft:#1b3364;
  --orange:#e87121;
  --ink:#33415c;
  --muted:#6b7a93;
  --line:#e4e9f2;
  --bg:#f6f8fb;
}

/* ---------- shared ---------- */
.vsvc-wrap section{position:relative;}
.vsvc-inner{max-width:1180px; margin:0 auto; padding:0 22px;}
.vsvc-eyebrow{
  color:var(--orange); font-size:13px; font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase; margin:0 0 12px;
}
.vsvc-h2{color:var(--navy); font-size:34px; font-weight:800; line-height:1.22; margin:0 0 14px;}
.vsvc-lead{color:var(--muted); font-size:16.5px; line-height:1.65; margin:0 0 8px;}

.vsvc-btn{
  display:inline-block; padding:15px 30px; border-radius:6px;
  font-size:15px; font-weight:700; text-decoration:none;
  border:2px solid transparent; transition:all .2s ease; cursor:pointer;
}
.vsvc-btn i{margin-left:7px;}
.vsvc-btn-primary{background:var(--orange); color:#fff;}
.vsvc-btn-primary:hover{background:#d4620f; color:#fff; text-decoration:none;}
.vsvc-btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.vsvc-btn-ghost:hover{background:#fff; color:var(--navy); text-decoration:none;}
.vsvc-btn-ghost i{margin:0 7px 0 0;}
.vsvc-btn-outline{background:transparent; color:var(--navy); border-color:#cfd8e6;}
.vsvc-btn-outline:hover{border-color:var(--orange); color:var(--orange); text-decoration:none;}

/* ---------- HERO ---------- */
.vsvc-hero{
  position:relative; background:var(--navy);
  padding:78px 0 68px; overflow:hidden;
}
.vsvc-hero:before{
  content:""; position:absolute; inset:0;
  background:url(../../images/interpreting-services.jpg) center center / cover no-repeat;
  opacity:.34;
}
/* Left-weighted so the copy stays readable while the photo still shows on the
   right. A flat overlay would flatten the image back into a solid block - at
   .22 opacity under a .94 gradient the photo was invisible, which is the same
   trap the footer's world map fell into. */
.vsvc-hero:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,33,73,.93) 0%, rgba(13,33,73,.78) 46%, rgba(13,33,73,.42) 100%);
}
/* Translations page hero art.
   The only large translation image on the server is images/translation-service.jpg,
   a 1600x417 banner with the words "LANGUAGE TRANSLATION" burned into the left of
   it - as a hero background that text would sit underneath our own headline. So
   images/translation-hero.jpg is the right-hand crop of it, speech bubbles only,
   anchored right where the gradient is lightest. Its purple is warmer than the
   navy, hence the slightly lower opacity than the interpreting hero. */
.vsvc-hero.is-translation:before{
  background-image:url(../../images/translation-hero.jpg);
  background-position:right center;
  opacity:.28;
}
.vsvc-hero .vsvc-inner{position:relative; z-index:2;}
.vsvc-hero h1{color:#fff; font-size:45px; font-weight:800; line-height:1.16; margin:0 0 18px; max-width:760px;}
.vsvc-hero p{color:#c6d1e4; font-size:17.5px; line-height:1.62; max-width:640px; margin:0 0 30px;}
.vsvc-herobtns{display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- MODE JUMP CHIPS ----------
   Three modes is exactly the point of this page, so they are named and
   linkable straight from the top instead of making people scroll to find out. */
.vsvc-modes{background:#fff; border-bottom:1px solid var(--line); padding:22px 0;}
.vsvc-modelist{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.vsvc-mode{
  display:flex; align-items:center; gap:10px;
  padding:12px 22px; border:1px solid var(--line); border-radius:40px;
  background:#fff; color:var(--navy); font-size:14.5px; font-weight:700;
  text-decoration:none; transition:all .2s ease;
}
.vsvc-mode i{color:var(--orange); font-size:16px;}
.vsvc-mode:hover{border-color:var(--orange); color:var(--orange); text-decoration:none; transform:translateY(-2px);}
.vsvc-mode:hover i{color:var(--orange);}

/* ---------- ALTERNATING SERVICE BLOCKS ---------- */
/* scroll-margin clears the theme's sticky header, which the jump chips would
   otherwise hide the target underneath. Measured, not guessed:
   - desktop: #sticky-header is `relative` at rest and flips to `fixed` (87px)
     only once the page scrolls, so the browser computes the landing position
     BEFORE the header starts overlapping. Every value therefore lands 87px
     short and the 87 has to be added on top of the gap we actually want.
   - mobile: #sticky-header is 0px tall and the mean-bar scrolls away with the
     page, so there is nothing to clear - a desktop-sized value here would just
     dump the reader in the middle of the section. */
/* Applied by attribute rather than by listing ids, so a new jump target only
   needs an id on its <section> and never a matching CSS edit. */
.vsvc-wrap section[id]{scroll-margin-top:20px;}
@media (min-width:992px){
  .vsvc-wrap section[id]{scroll-margin-top:190px;}
}
.vsvc-svc{padding:76px 0;}
/* Alternation is driven by a PHP-added class, NOT :nth-of-type - these blocks
   share the <section> element with the hero, industries, training and CTA, so
   nth-of-type counts those too and would shift the moment a section is added. */
.vsvc-svc.is-alt{background:var(--bg);}
.vsvc-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
/* photo moves to the right on every second block */
.vsvc-svc.is-flipped .vsvc-photo{order:2;}

/* max-width is a deliberate quality cap, not a layout choice: the three source
   photos are only 390x290. A half-width column here is ~540px, which would
   upscale them ~1.4x and show as softness on any retina screen. 490 keeps it
   to ~1.25x. Raise this if the client ever supplies larger originals.
   aspect-ratio 4/3 (1.333) is a hair off the source 1.345, so `cover` crops
   almost nothing. */
.vsvc-photo{
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 44px rgba(13,33,73,.16);
  aspect-ratio:4/3;
  width:100%; max-width:490px;
  margin-right:auto;
}
.vsvc-svc.is-flipped .vsvc-photo{margin:0 0 0 auto;}
/* cover, never stretch - these three photos are different shapes */
.vsvc-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.vsvc-badge{
  position:absolute; left:0; bottom:0;
  background:var(--navy); color:#fff;
  padding:11px 20px; border-radius:0 12px 0 0;
  font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
}
.vsvc-badge i{margin-right:8px; color:var(--orange);}

.vsvc-copy h2{color:var(--navy); font-size:31px; font-weight:800; line-height:1.24; margin:0 0 8px;}
.vsvc-tag{color:var(--orange); font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 12px;}
.vsvc-copy > p{color:var(--muted); font-size:16px; line-height:1.68; margin:0 0 22px;}

.vsvc-points{list-style:none; margin:0 0 24px; padding:0;}
.vsvc-points li{
  position:relative; padding:0 0 0 30px; margin:0 0 12px;
  color:var(--ink); font-size:15.5px; line-height:1.55;
}
.vsvc-points li:before{
  content:"\f00c"; font-family:FontAwesome;
  position:absolute; left:0; top:1px; color:var(--orange); font-size:14px;
}

.vsvc-bestfor{
  border-top:1px solid var(--line); padding-top:20px;
}
.vsvc-bestfor strong{
  display:block; color:var(--navy); font-size:13px; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase; margin:0 0 12px;
}
.vsvc-chips{display:flex; flex-wrap:wrap; gap:8px;}
.vsvc-chip{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:7px 13px; color:var(--muted); font-size:13px;
}
.vsvc-svc.is-alt .vsvc-chip{background:#fff;}

/* ---------- INDUSTRIES ---------- */
.vsvc-ind{padding:76px 0; background:#fff;}
.vsvc-head{text-align:center; max-width:720px; margin:0 auto 44px;}
.vsvc-indgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.vsvc-indcard{
  padding:28px 26px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  transition:all .25s ease;
}
.vsvc-indcard:hover{border-color:var(--orange); box-shadow:0 14px 32px rgba(13,33,73,.10); transform:translateY(-3px);}
.vsvc-indicon{
  width:50px; height:50px; border-radius:12px;
  background:rgba(232,113,33,.10); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:21px; margin:0 0 16px;
}
.vsvc-indcard h3{color:var(--navy); font-size:18px; font-weight:700; margin:0 0 9px;}
.vsvc-indcard p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0;}

/* Card variant used on the translations page for the three services that have
   no photograph of their own. Same card, made clickable, with the arrow the
   course cards use so a link still looks like a link. */
a.vsvc-indcard{display:block; text-decoration:none;}
a.vsvc-indcard:hover{text-decoration:none;}
.vsvc-indcta{
  display:inline-block; margin-top:14px;
  color:var(--navy); font-size:13.5px; font-weight:700;
}
.vsvc-indcta i{margin-left:6px; color:var(--orange);}

/* Two cards in a three-column grid leaves a hole on the right. A modifier
   rather than a new grid class, so both grids stay the same component. */
.vsvc-indgrid.is-two{grid-template-columns:repeat(2,1fr);}

/* Section-level call to action, for bands that need one without being a
   full CTA panel. Centred to match .vsvc-head above it. */
.vsvc-secbtns{margin-top:34px; text-align:center;}


/* Alternating band background, so consecutive card sections stay separable.
   A modifier on the section rather than a differently-named section class -
   the section's class should say what it contains, not what colour it is. */
.vsvc-ind.is-alt{background:var(--bg);}

/* ---------- HOW IT WORKS ----------
   Translation buyers ask "how do I actually send you a file and what happens
   next" far more than they ask about linguistics, and the old page answered
   neither. Four steps, numbered, no photography needed. */
.vsvc-stepgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.vsvc-step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:30px 24px 26px;
}
.vsvc-stepnum{
  width:42px; height:42px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; margin:0 0 16px;
}
.vsvc-step h3{color:var(--navy); font-size:17px; font-weight:700; margin:0 0 8px;}
.vsvc-step p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0;}

/* ---------- INTERPRETER TRAINING ---------- */
.vsvc-train{padding:76px 0; background:var(--navy); position:relative; overflow:hidden;}
.vsvc-train:before{
  content:""; position:absolute; inset:0;
  background:url(../images/world-map-dots.png) center center / cover no-repeat;
  opacity:.16;
}
.vsvc-train .vsvc-inner{position:relative; z-index:2;}
.vsvc-train .vsvc-head{margin-bottom:40px;}
.vsvc-train .vsvc-h2{color:#fff;}
.vsvc-train .vsvc-lead{color:#c6d1e4;}
.vsvc-coursegrid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:800px; margin:0 auto 34px;}
/* One card left in a two-column grid stretches to half the width and looks
   like something failed to load. auto-fit with a floor keeps a single card at
   a sensible size and still gives two across when there are two. */
.vsvc-coursegrid{grid-template-columns:repeat(auto-fit,minmax(320px,389px)); justify-content:center;}

/* "X is in development" line under the course cards. Deliberately quiet - it
   is a note, not an offer. */
.vsvc-soon{max-width:800px; margin:0 auto 26px; text-align:center; color:var(--muted);
           font-size:15px; line-height:1.6;}
.vsvc-soon strong{color:var(--navy);}
.vsvc-soon a{color:var(--orange); font-weight:700; text-decoration:none;}
.vsvc-soon a:hover{text-decoration:underline;}
.vsvc-course{
  display:flex; flex-direction:column;
  background:#fff; border-radius:14px; overflow:hidden;
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;
}
.vsvc-course:hover{transform:translateY(-5px); box-shadow:0 20px 44px rgba(0,0,0,.28); text-decoration:none;}
/* An icon band rather than the LMS cover art - see the note in interpreting.php:
   both courses currently serve the same HIPAA picture, so using it would put the
   wrong product image on the medical interpreting card. */
.vsvc-coursepic{
  height:112px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#122a5c 0%,#1b3f86 100%);
}
.vsvc-coursepic i{color:#fff; font-size:38px; opacity:.92;}
.vsvc-coursebody{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1;}
.vsvc-course h3{color:var(--navy); font-size:18.5px; font-weight:700; line-height:1.35; margin:0 0 8px;}
.vsvc-courseblurb{color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 16px;}
.vsvc-coursemeta{display:flex; align-items:center; gap:16px; margin:0 0 16px;}
.vsvc-price{color:var(--orange); font-size:22px; font-weight:800;}
.vsvc-dur{color:var(--muted); font-size:13.5px;}
.vsvc-dur i{margin-right:6px;}
.vsvc-coursecta{
  margin-top:auto; color:var(--navy); font-size:14px; font-weight:700;
}
.vsvc-coursecta i{margin-left:6px; color:var(--orange);}
.vsvc-trainfoot{text-align:center;}

/* ---------- WHY VLS ---------- */
.vsvc-why{padding:70px 0; background:var(--bg);}
.vsvc-whygrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.vsvc-whyitem strong{
  display:block; color:var(--navy); font-size:34px; font-weight:800; line-height:1; margin:0 0 10px;
}
.vsvc-whyitem span{color:var(--muted); font-size:14.5px; line-height:1.5; display:block;}

/* ---------- CLOSING CTA ---------- */
.vsvc-cta{background:var(--navy-soft); padding:66px 0; text-align:center;}
.vsvc-cta h2{color:#fff; font-size:31px; font-weight:800; margin:0 0 12px;}
.vsvc-cta p{color:#c6d1e4; font-size:16.5px; line-height:1.6; margin:0 0 28px;}
.vsvc-ctabtns{display:flex; justify-content:center; flex-wrap:wrap; gap:14px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px){
  .vsvc-hero{padding:60px 0 52px;}
  .vsvc-hero h1{font-size:35px;}
  .vsvc-hero p{font-size:16px;}
  .vsvc-svc{padding:56px 0;}
  .vsvc-row{grid-template-columns:1fr; gap:32px;}
  /* photo always above the copy once stacked, whichever side it sat on, and
     centred - the 490px cap would otherwise leave it hugging one edge of a
     full-width column on tablets. */
  .vsvc-svc.is-flipped .vsvc-photo{order:0;}
  .vsvc-photo, .vsvc-svc.is-flipped .vsvc-photo{margin-left:auto; margin-right:auto;}
  /* Stacked, the badge on the photo sits directly above the eyebrow and both
     say the same words - it reads as a stutter. Side by side on desktop it
     does not, so the eyebrow only goes once the columns collapse. */
  .vsvc-row .vsvc-tag{display:none;}
  .vsvc-copy h2{font-size:26px;}
  .vsvc-h2{font-size:28px;}
  .vsvc-indgrid{grid-template-columns:repeat(2,1fr);}
  .vsvc-stepgrid{grid-template-columns:repeat(2,1fr);}
  .vsvc-whygrid{grid-template-columns:repeat(2,1fr); gap:28px 20px;}
}
@media (max-width:767px){
  .vsvc-hero h1{font-size:28px;}
  .vsvc-hero p{font-size:15.5px;}
  .vsvc-herobtns .vsvc-btn{width:100%; text-align:center;}
  .vsvc-modelist{gap:8px;}
  .vsvc-mode{padding:10px 16px; font-size:13px;}
  .vsvc-h2, .vsvc-copy h2{font-size:23px;}
  .vsvc-indgrid, .vsvc-indgrid.is-two{grid-template-columns:1fr;}
  .vsvc-stepgrid{grid-template-columns:1fr;}
  .vsvc-coursegrid{grid-template-columns:1fr;}
  .vsvc-ind, .vsvc-train, .vsvc-why{padding:52px 0;}
  .vsvc-cta{padding:52px 0;}
  .vsvc-cta h2{font-size:23px;}
  .vsvc-ctabtns .vsvc-btn{width:100%;}
  .vsvc-photo{aspect-ratio:16/10;}
}
@media (max-width:479px){
  .vsvc-whygrid{grid-template-columns:1fr; gap:24px;}
  .vsvc-inner{padding:0 18px;}
}