/* /services and /translation-services hubs, v2 bodies (5 Oct 2026, Mohamed: "do the main menu pages and contact and about
   first"). Loaded after site-v2.css and site-v2-pages.css; every rule is scoped to the two page wrappers. Same visual
   language as the homepage and the live v2 pages: photo tiles, navy bands with an orange rule, hairline lists. */

/* hero: one column of copy over the blended photo */
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-pg-hero-copy{max-width:1000px}
.sv2-pg-translation-services .sv2-pg-kicker{display:inline-block;padding:7px 14px;border-radius:999px;background:rgba(4,16,33,.66);box-shadow:inset 0 0 0 1px rgba(255,145,78,.5);font:600 14px/1.4 Inter,sans-serif;color:#fff}
/* breadcrumb words light enough to read over the lighter photo shade (the shade itself is shared and stays) */
.sv2-pg-services .sv2-hero .sv2-crumbs ol{color:#eef2f6}
.sv2-pg-services .sv2-hero .sv2-crumbs li[aria-current]{color:#ffe3d2}
/* outline buttons over photos keep a dark fill (as site-v2-pages.css gives the hero one) and the house white hover */
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-cta .sv2-btn-outline-light{background:rgba(4,16,33,.55)}
:is(.sv2-pg-services,.sv2-pg-translation-services) :is(.sv2-hero,.sv2-cta) .sv2-btn-outline-light:hover{background:#fff;color:var(--ink)}
.sv2-pg-services .sv2-pg-points{margin-top:24px}
@media(min-width:601px){.sv2-pg-translation-services .sv2-hero-lead{max-width:500px}}
.sv2-pg-services .sv2-pg-points li+li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-inline-end:22px}
.sv2-pg-services .sv2-pg-points{gap:8px 22px}
/* words that the translation strings colour inline keep the house heading colour (as on the live v2 pages) */
:is(.sv2-pg-services,.sv2-pg-translation-services) :is(h1,h2,h3) span[style]{color:inherit!important}

/* photo tiles that link to the service page (the whole tile is the link, as the old card was) */
:is(.sv2-pg-services,.sv2-pg-translation-services) a.sv2-tile>img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
:is(.sv2-pg-services,.sv2-pg-translation-services) a.sv2-tile:hover>img{transform:scale(1.045)}
:is(.sv2-pg-services,.sv2-pg-translation-services) a.sv2-tile:focus-visible{outline:3px solid #ff914e;outline-offset:3px;border-radius:16px;box-shadow:none}
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-tile .sv2-tile-link{position:static}
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-tile .sv2-tile-link::after{content:none}
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-tile .sv2-tile-link .sv2-arrow{color:#ff914e}
.sv2-pg-services .sv2-pg-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sv2-pg-services .sv2-pg-tiles-4 .sv2-tile{min-height:560px}
.sv2-pg-services .sv2-pg-tiles-4 .sv2-tile-body{padding:22px 22px 24px}
.sv2-pg-services .sv2-pg-tiles-4 .sv2-tile h3{font-size:22px}
.sv2-pg-services .sv2-pg-tiles-4 .sv2-tile p{font-size:15px}

/* navy bands: columns with a short orange rule (homepage credentials row), each column a link */
.sv2-pg-services .sv2-pg-cols{display:grid;column-gap:48px}
.sv2-pg-services .sv2-pg-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv2-pg-services .sv2-pg-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sv2-pg-services .sv2-pg-col{position:relative;display:flex;flex-direction:column;padding-block:32px 36px;border-top:1px solid rgba(255,255,255,.18);color:#fff}
.sv2-pg-services .sv2-pg-col::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:48px;height:3px;background:var(--accent)}
.sv2-pg-services .sv2-pg-col h3{font-size:24px;line-height:1.25;color:#fff;transition:color .18s}
.sv2-pg-services .sv2-pg-col p{margin-top:10px;font-size:17px;line-height:1.65;color:var(--on-dark)}
.sv2-pg-services .sv2-pg-col:hover h3{color:var(--warm)}
.sv2-pg-services .sv2-pg-cols-4 .sv2-pg-col h3{font-size:21px}
.sv2-pg-services .sv2-pg-cols-4 .sv2-pg-col p{font-size:16px}
.sv2-pg-services .sv2-pg-cols-link .sv2-pg-col:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--accent)}
.sv2-pg-services .sv2-pg-more{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:20px;padding-bottom:3px;border-bottom:1px solid rgba(255,145,78,.7);font:600 15px/1.3 Inter,sans-serif;color:#fff}
.sv2-pg-services .sv2-pg-more .sv2-arrow{color:#ff914e}
.sv2-pg-services .sv2-pg-col:hover .sv2-pg-more{color:#ffb489;border-color:#ffb489}
.sv2-pg-services .sv2-navy a:focus-visible{outline-color:#ff914e;box-shadow:none}

/* light band: a two-column list with hairlines (title, line, orange link words) */
.sv2-pg-services .sv2-pg-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;border-top:1px solid var(--line-strong)}
.sv2-pg-services .sv2-pg-row{display:flex;flex-direction:column;padding-block:28px 30px;border-bottom:1px solid var(--line-strong);color:var(--ink)}
.sv2-pg-services .sv2-pg-row h3{font-size:22px;line-height:1.3;color:var(--ink);transition:color .18s}
.sv2-pg-services .sv2-pg-row p{margin-top:8px;font-size:16px;line-height:1.65;color:var(--muted);max-width:560px}
.sv2-pg-services .sv2-pg-row .sv2-pg-more{margin-top:14px;color:var(--orange);border-bottom-color:rgba(199,66,13,.45)}
.sv2-pg-services .sv2-pg-row .sv2-pg-more .sv2-arrow{color:var(--orange)}
.sv2-pg-services .sv2-pg-row:hover h3{color:var(--orange)}
.sv2-pg-services .sv2-pg-row:hover .sv2-pg-more{color:var(--orange-hover);border-color:var(--orange-hover)}

/* languages: a five-column hairline link list */
.sv2-pg-translation-services .sv2-pg-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* laptops below 1100px */
@media(max-width:1100px){
.sv2-pg-services .sv2-pg-tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-services .sv2-pg-tiles-4 .sv2-tile{min-height:400px}
.sv2-pg-services .sv2-pg-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* tablets */
@media(max-width:850px){
.sv2-pg-services .sv2-pg-cols-3{grid-template-columns:minmax(0,1fr)}
.sv2-pg-services .sv2-pg-rows{grid-template-columns:minmax(0,1fr)}
.sv2-pg-translation-services .sv2-pg-cols-5{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
/* phones */
@media(max-width:600px){
.sv2-pg-services .sv2-pg-points{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}
.sv2-pg-services .sv2-pg-points li::before,.sv2-pg-services .sv2-pg-points li+li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-inline-end:12px}
.sv2-pg-translation-services .sv2-pg-kicker{font-size:13px;padding:6px 12px}
/* phones: the photo sits on top and fades into the navy card, the words sit below it on navy (the lighter shade over a
   full-height photo left titles unreadable on bright photos) */
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-pg-tiles .sv2-tile{min-height:0;justify-content:flex-start}
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-pg-tiles .sv2-tile>img{position:relative;inset:auto;display:block;height:auto;aspect-ratio:16/10;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
:is(.sv2-pg-services,.sv2-pg-translation-services) .sv2-pg-tiles .sv2-tile-body{margin-top:-8px;padding-top:0}
.sv2-pg-services .sv2-pg-tiles-4{grid-template-columns:minmax(0,1fr)}
.sv2-pg-services .sv2-pg-tiles-4 .sv2-tile h3{font-size:22px}
.sv2-pg-services .sv2-pg-cols-4{grid-template-columns:minmax(0,1fr)}
.sv2-pg-services .sv2-pg-col{padding-block:24px 26px}
.sv2-pg-services .sv2-pg-col::before{width:40px}
.sv2-pg-services .sv2-pg-col h3,.sv2-pg-services .sv2-pg-cols-4 .sv2-pg-col h3{font-size:21px}
.sv2-pg-services .sv2-pg-col p{font-size:16px}
.sv2-pg-services .sv2-pg-row{padding-block:22px 24px}
.sv2-pg-services .sv2-pg-row h3{font-size:20px}
.sv2-pg-services .sv2-pg-more{min-height:32px}
}
@media(prefers-reduced-motion:reduce){:is(.sv2-pg-services,.sv2-pg-translation-services) a.sv2-tile:hover>img{transform:none}}