/* ---------- 03 · Services: from brand to customers (SERVICES_CONCEPT_UK.md) ----------
   A sea chart of Tenerife with the eight sectors, and the six stages of the cycle as a vertical
   road. Every sector is written in its own panel; the eight panels stand in the same cells of
   one grid (subgrid rows), so the road keeps the height of the longest line whichever sector is
   chosen and nothing below it ever moves. Without the script the first sector shows and the
   rest are hidden (visibility), in the page for search. services.js moves the choice and plays
   the switch on top of this look: only transform, opacity and stroke-dashoffset move, and at
   rest nothing is 3D, so the lines stay sharp on Retina. The chart's lines scale with it: their
   widths are set in chart units for the size the chart is drawn at (--sw ≈ 1.25 px on screen). */
.services { --sw:1.36; padding:clamp(76px,6.8vw,100px) 0; background:var(--white); border-top:1px solid var(--line); }
.services > .container { width:min(1520px,calc(100% - 128px)); }
.services .eyebrow { display:flex; align-items:center; gap:14px; margin:0; letter-spacing:.18em; color:var(--muted); }
.services h2 { margin-top:20px; font-size:clamp(30px,3.2vw,50px); line-height:1.04; letter-spacing:-.036em; color:var(--ink); }
.services h2 > span { display:block; }
.services .headline-dot { display:inline-block; color:var(--accent); }
.sv-lede { margin-top:16px; max-width:64ch; font-size:var(--text-lead); line-height:1.52; color:var(--body); text-wrap:pretty; }
.sv-grid { display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); column-gap:clamp(40px,4vw,72px); align-items:start; margin-top:clamp(32px,3vw,44px); }
.sv-side { min-width:0; }
.sv-main { min-width:0; }

/* ── The chart ─────────────────────────────────────────────────────────────────────────────── */
.sv-map { position:relative; width:100%; max-width:460px; aspect-ratio:500/428.4; margin:-8px 0 0 -6px; }
.sv-map-in { position:absolute; inset:0; }
.sv-chart { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* the sea: four waterlines around the coast, each fainter than the last */
.sv-water path { fill:none; stroke:var(--line); stroke-width:calc(var(--sw) * .8); stroke-linejoin:round; opacity:calc(1 - var(--w) * .2); }
.sv-coast { fill:none; stroke:#111315b3; stroke-width:var(--sw); stroke-linejoin:round; stroke-linecap:round; }
.sv-peak { fill:var(--white); stroke:#111315b3; stroke-width:calc(var(--sw) * .9); stroke-linejoin:round; }
/* the route the dot flies (services.js draws it for the flight and lets it go) */
.sv-route { fill:none; stroke:var(--accent); stroke-width:calc(var(--sw) * 1.1); stroke-linecap:round; stroke-dasharray:1 2; stroke-dashoffset:1; opacity:0; }
.sv-teide { position:absolute; left:var(--x); top:var(--y); margin:-7px 0 0 11px; font-size:11px; line-height:14px; white-space:nowrap; color:var(--muted); pointer-events:none; }

/* the points: 8 px Ink, a white ring off the coast; the place's name when chosen or pointed at */
.sv-pt { position:absolute; left:var(--x); top:var(--y); width:0; height:0; }
.sv-pt > i { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 2px var(--white); }
.services.is-armed .sv-pt::before { content:''; position:absolute; left:-15px; top:-15px; width:30px; height:30px; border-radius:50%; cursor:pointer; }
.sv-place { position:absolute; top:0; font-size:11px; font-weight:550; line-height:14px; letter-spacing:.01em; white-space:nowrap; color:var(--ink); opacity:0; pointer-events:none;
  text-shadow:0 0 2px var(--white),0 0 4px var(--white),0 0 6px var(--white); transition:opacity 220ms ease; }
.sv-pt--l .sv-place { right:12px; translate:0 -50%; }
.sv-pt--r .sv-place { left:12px; translate:0 -50%; }
.sv-pt--t .sv-place { top:-12px; translate:-50% -100%; }
.sv-pt--b .sv-place { top:12px; translate:-50% 0; }
.sv-pt.is-active .sv-place,.sv-pt.is-near .sv-place { opacity:1; }
.sv-map-in.is-flying .sv-pt.is-active:not(.is-near) .sv-place { opacity:0; transition:none; }
.sv-pt.is-near:not(.is-active) > i { box-shadow:0 0 0 2px var(--white),0 0 0 5px #11131514; }
/* the Saffron dot: a layer the size of the chart, moved by a translate in per cent of itself */
.sv-you { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.sv-you-dot,.sv-you-ring { position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; }
.sv-you-dot { background:var(--accent); box-shadow:0 0 0 5px #f4b0002b,0 0 18px 5px #f4b0003d; }
.sv-you-ring { border:1px solid var(--accent); opacity:0; }

/* the pause button: the process's, in a corner of the chart */
/* the coastline's credit (ODbL asks for it where the map is seen): quiet, in the chart's free corner */
.sv-credit { position:absolute; left:6px; bottom:0; z-index:2; margin:0; font-size:11px; line-height:14px; letter-spacing:.01em; color:var(--muted); pointer-events:none; }
.sv-pause { position:absolute; right:-6px; bottom:-2px; z-index:3; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:none; color:var(--ink); cursor:pointer; opacity:0; visibility:hidden; transition:opacity 300ms ease,visibility 0s linear 300ms; }
.sv-pause.is-on { opacity:1; visibility:visible; transition:opacity 300ms ease; }
.sv-pause[hidden] { display:none; }
.sv-pause::before { content:''; position:absolute; inset:7px; border:1px solid #11131533; border-radius:50%; background:#ffffffd9; transition:border-color var(--micro),background var(--micro); }
.sv-pause:hover::before { border-color:#11131566; background:var(--white); }
.sv-pause:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:-3px; }
.sv-pause svg { position:relative; width:11px; height:11px; }
.sv-pause .hp-play,.sv-pause[aria-pressed="true"] .hp-pause { display:none; }
.sv-pause[aria-pressed="true"] .hp-play { display:block; }

/* ── The eight sectors: rows as in the FAQ, the chosen one with its Saffron bar ─────────────── */
.sv-sectors { display:grid; margin-top:14px; border-top:1px solid var(--line); }
.sv-sector { position:relative; display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; column-gap:14px; width:100%; min-height:46px; margin:0;
  padding:7px 10px 7px 16px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; font:inherit; color:inherit; text-align:left; -webkit-tap-highlight-color:transparent; }
.sv-sector:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:-2px; }
.sv-bar { position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform 320ms var(--ease); }
.sv-sector.is-active .sv-bar { transform:none; }
.sv-icon { width:18px; height:18px; color:var(--muted); transition:color 220ms ease; }
/* the name keeps the room of its bold self, so choosing it never rewraps the row */
.sv-sector-name { display:grid; font-size:15.5px; line-height:1.3; letter-spacing:-.01em; color:#111315c4; transition:color 220ms ease; }
.sv-sector-name > span,.sv-sector-name::after { grid-area:1/1; }
.sv-sector-name > span { align-self:center; }
.sv-sector-name::after { content:attr(data-text); content:attr(data-text) / ""; font-weight:550; visibility:hidden; pointer-events:none; }
.sv-sector.is-active .sv-sector-name { color:var(--ink); font-weight:550; }
.sv-sector.is-active .sv-icon { color:var(--ink); }
.sv-real { display:inline-flex; align-items:center; gap:7px; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--muted); }
.sv-real::before { content:''; width:5px; height:5px; flex:none; border-radius:50%; background:var(--accent); }
.services.is-armed .sv-sector { cursor:pointer; }
@media(hover:hover) and (pointer:fine) {
 .sv-sector:not(.is-active):hover { background:var(--paper); }
 .sv-sector:hover .sv-sector-name,.sv-sector:hover .sv-icon { color:var(--ink); }
}

/* ── The road: six stages in the rows of one grid; every sector's panel lies over them ───────── */
.sv-track { --pad:10px; --lh:26px; position:relative; display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); grid-template-rows:auto repeat(6,auto);
  column-gap:clamp(24px,2.4vw,40px); touch-action:pan-y; }
.sv-stages { grid-column:1; grid-row:2 / span 6; display:grid; grid-template-rows:subgrid; margin:0; padding:0; list-style:none; }
.sv-stages li { position:relative; min-width:0; padding:var(--pad) 0 var(--pad) 32px; }
/* a node on the first line of its row; the segment from it runs to the next row's node */
.sv-node { position:absolute; left:0; top:calc(var(--pad) + var(--lh) / 2 - 5.5px); z-index:1; width:11px; height:11px; border-radius:50%; background:var(--white); box-shadow:inset 0 0 0 1.5px #1113152e; }
.sv-node > i { position:absolute; inset:0; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #f4b00024; }
.sv-seg { position:absolute; left:4.75px; top:calc(var(--pad) + var(--lh) / 2); width:1.5px; height:100%; background:var(--line); }
.sv-seg > i { position:absolute; inset:0; background:var(--accent); transform-origin:top; }
.sv-stage { display:block; font:500 12px/var(--lh) ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:var(--ink); }
.sv-num { margin-right:4px; color:var(--muted); }
.sv-note { display:block; margin-top:0; font-size:13px; line-height:1.42; color:var(--muted); text-wrap:pretty; }

.sv-panel { grid-column:1 / -1; grid-row:1 / span 7; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; min-width:0; }
.sv-panel:not(.is-active):not(.is-leaving) { visibility:hidden; }
/* the sector's name and its case: all eight at the foot of the same row, over the same line */
.sv-head-row { grid-column:1 / -1; grid-row:1; align-self:end; display:grid; justify-items:start; gap:8px; padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.sv-head-row h3 { font-size:clamp(28px,2vw,32px); line-height:1.15; letter-spacing:-.03em; color:var(--ink); }
.sv-lines { grid-column:2; grid-row:2 / span 6; display:grid; grid-template-rows:subgrid; margin:0; padding:0; list-style:none; }
.sv-lines li { min-width:0; padding:var(--pad) 0; font-size:clamp(17px,1.3vw,18.5px); line-height:var(--lh); letter-spacing:-.012em; color:var(--ink); text-wrap:pretty; }

/* the case: its tag, its name, and the way to it (the FAQ's call: a Saffron dot comes on hover) */
.sv-case { position:relative; display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; min-height:28px; font-size:15px; line-height:1.4; color:var(--ink); }
.sv-case-tag { display:inline-flex; align-items:center; gap:7px; align-self:center; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sv-case-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px #f4b00029; }
.sv-case-name { font-weight:550; }
.sv-case-go { padding-bottom:1px; border-bottom:1px solid #1113153d; transition:border-color var(--micro),transform 320ms var(--ease); }
.sv-case::after { content:''; position:absolute; inset:-8px -6px; }
.sv-case:focus-visible { outline:none; }
.sv-case:focus-visible .sv-case-go { outline:var(--border-focus) solid var(--focus); outline-offset:4px; border-radius:2px; }
@media(hover:hover) and (pointer:fine) {
 .sv-case:hover .sv-case-go { border-color:var(--ink); transform:translateX(4px); }
}

/* ── All in one place ────────────────────────────────────────────────────────────────────────── */
.sv-all { margin-top:clamp(26px,2.4vw,36px); padding-top:22px; border-top:1px solid var(--line); }
.sv-all-title { margin:0; font-size:11.5px; line-height:1.3; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.sv-chips { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.sv-chips li { padding:5px 10.5px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:14px; line-height:1.3; white-space:nowrap; color:var(--body); }

/* ── Entrance, once (the script's is-armed / is-in / is-entering; nothing hidden without it) ─── */
@media(prefers-reduced-motion:no-preference) {
 .services.is-armed:not(.is-in) .accent-rule { transform:scaleX(0); }
 .services.is-armed:not(.is-in) :is(.eyebrow,.sv-lede,.sv-teide,.sv-pt,.sv-you,.sv-water path,.sv-peak,.sv-sector,.sv-stages li,.sv-panel.is-active .sv-head-row,.sv-panel.is-active .sv-lines li,.sv-all-title,.sv-chips li) { opacity:0; }
 .services.is-armed:not(.is-in) h2 > span { opacity:0; clip-path:inset(0 0 105% 0); transform:translateY(24px); }
 .services.is-armed:not(.is-in) .sv-coast { stroke-dasharray:1 2; stroke-dashoffset:1; }
 .services.is-armed:not(.is-in) .sv-seg > i { transform:scaleY(0); }
 .services.is-entering .accent-rule { animation:rule-draw 420ms var(--ease) backwards; }
 .services.is-entering .eyebrow { animation:enter 540ms var(--ease) 60ms backwards; }
 .services.is-entering h2 > span { animation:line-reveal 680ms var(--ease) 140ms backwards; }
 .services.is-entering h2 > span + span { animation-delay:240ms; }
 .services.is-entering .sv-lede { animation:enter 600ms var(--ease) 360ms backwards; }
 .services.is-entering .sv-coast { animation:sv-draw 1200ms cubic-bezier(.45,0,.25,1) 300ms backwards; }
 .services.is-entering .sv-water path { animation:sv-fade 700ms ease-out backwards; animation-delay:calc(800ms + var(--w) * 110ms); }
 .services.is-entering :is(.sv-peak,.sv-teide) { animation:sv-fade 500ms ease-out 1150ms backwards; }
 .services.is-entering .sv-pt { animation:sv-pop 420ms cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(900ms + var(--k, 0) * 60ms); }
 .services.is-entering .sv-sector { animation:enter 480ms var(--ease) backwards; animation-delay:calc(900ms + var(--k) * 45ms); }
 .services.is-entering .sv-you { animation:sv-fade 360ms ease-out 1380ms backwards; }
 .services.is-entering .sv-you-ring { animation:sv-ping 760ms ease-out 1480ms; }
 .services.is-entering .sv-stages li { animation:enter 480ms var(--ease) backwards; animation-delay:calc(1150ms + var(--k) * 50ms); }
 .services.is-entering .sv-node > i { animation:sv-light 300ms cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(1300ms + var(--k) * 120ms); }
 .services.is-entering .sv-seg > i { animation:sv-grow 120ms linear backwards; animation-delay:calc(1300ms + var(--k) * 120ms); }
 .services.is-entering .sv-panel.is-active .sv-head-row { animation:enter 520ms var(--ease) 1250ms backwards; }
 .services.is-entering .sv-panel.is-active .sv-lines li { animation:sv-rise 420ms var(--ease) backwards; animation-delay:calc(1300ms + var(--k) * 60ms); }
 .services.is-entering .sv-all-title { animation:enter 480ms var(--ease) 1500ms backwards; }
 .services.is-entering .sv-chips li { animation:enter 420ms var(--ease) backwards; animation-delay:calc(1550ms + var(--k) * 18ms); }
}
@keyframes sv-draw { from { stroke-dasharray:1 2; stroke-dashoffset:1; } to { stroke-dasharray:1 2; stroke-dashoffset:0; } }
@keyframes sv-fade { from { opacity:0; } }
@keyframes sv-pop { from { opacity:0; transform:scale(.3); } }
@keyframes sv-light { from { opacity:0; transform:scale(.4); } }
@keyframes sv-grow { from { transform:scaleY(0); } }
@keyframes sv-rise { from { opacity:0; transform:translateY(10px); } }
@keyframes sv-ping { from { opacity:.75; transform:none; } to { opacity:0; transform:scale(3.4); } }

/* Still: held, off screen, a hidden tab: every part stands in its final look. */
.services.is-still :is(*,*::before,*::after) { animation:none!important; transition:none!important; }

/* ── Small laptop (1025–1439): the process's and the footer's grid ─────────────────────────── */
@media(min-width:1025px) and (max-width:1439px) {
 .services > .container { width:min(1200px,calc(100% - 80px)); }
 .sv-lines li { font-size:17px; }
 .sv-sector-name { font-size:15px; }
 .sv-grid { grid-template-columns:minmax(0,36fr) minmax(0,64fr); column-gap:clamp(36px,3.4vw,48px); }
 .sv-map { max-width:420px; }
 .sv-sector { min-height:44px; }
 .sv-track { --pad:9px; }
 .sv-note { font-size:12.5px; }
}
/* ── Narrower (681–1179): the chart and the sectors side by side, the road under them ──────── */
@media(max-width:1179px) {
 .sv-grid { grid-template-columns:minmax(0,1fr); row-gap:clamp(36px,5vw,52px); }
 .sv-side { display:grid; grid-template-columns:minmax(0,52fr) minmax(0,48fr); column-gap:clamp(24px,4vw,48px); align-items:center; }
 .sv-map { --sw:1.5; max-width:none; margin:0; }
 .sv-sectors { margin-top:0; }
}
@media(max-width:1024px) {
 .services > .container { width:min(900px,calc(100% - 64px)); }
}

.sv-legend { display:none; align-items:center; gap:7px; margin:10px 0 0; font-size:12px; line-height:1.3; color:var(--muted); }
.sv-legend::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ── Phone (≤680): chart, sectors two by two, the road in one column, the chips ────────────── */
@media(max-width:680px) {
 .services { padding:64px 0 56px; }
 .services > .container { width:calc(100% - 40px); }
 .services h2 { margin-top:18px; font-size:clamp(26px,7.4vw,34px); }
 .sv-lede { margin-top:14px; font-size:15.5px; line-height:1.5; }
 .sv-grid { margin-top:22px; row-gap:26px; }
 .sv-side { display:block; }
 /* the chart runs the full width, 260 px high at 390: only its sea is cut, 28.5 units at the top and the foot */
 .sv-map { --sw:1.8; aspect-ratio:500/371.4; overflow:hidden; }
 .sv-map-in { inset:0 0 auto; aspect-ratio:500/428.4; margin-top:-5.7%; }
 .sv-pt--l .sv-place { right:auto; top:11px; translate:-50% 0; }
 .sv-pt--b .sv-place { translate:calc(16px - 100%) 0; }
 /* two labels that would fall on a neighbour here: Santa Cruz in two lines, clear of Puerto de la
    Cruz; Callao Salvaje over its point, clear of Costa Adeje, a touch to the west of Vilaflor */
 .sv-pt[data-point="2"] .sv-place { width:6.5em; white-space:normal; text-align:right; }
 .sv-pt[data-point="3"] .sv-place { top:-11px; translate:calc(-50% - 8px) -100%; }
 .sv-pause { right:-4px; bottom:-2px; }
 /* the island's south tip meets the foot here, so the credit takes the free corner at the top */
 .sv-credit { top:0; bottom:auto; left:0; font-size:12px; }
 .sv-sectors { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:14px; border:0; }
 .sv-sector { grid-template-columns:18px minmax(0,1fr); column-gap:10px; min-height:58px; padding:8px 10px 8px 13px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
 .sv-sector.is-active { background:var(--paper); }
 .sv-sector-name { font-size:13.5px; line-height:1.28; }
 /* a case is a Saffron dot in the tile's corner; its words stay for a screen reader */
 .sv-real { position:absolute; right:9px; top:9px; }
 .sv-real::before { width:6px; height:6px; }
 .sv-real-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .sv-place,.sv-teide,.sv-case-tag { font-size:12px; }
 /* a touch tighter, and no tracking after the last letter, so «Case study» leaves «See the case» on its line at 390 in Safari too */
 .sv-case-tag { letter-spacing:.1em; margin-right:-.1em; }
 .sv-all-title { font-size:12px; }
 .sv-legend { display:flex; }
 /* the road: each stage's name over its line, in one column */
 .sv-track { --pad:12px; --lh:23px; grid-template-columns:minmax(0,1fr); column-gap:0; }
 .sv-stages { grid-column:1; }
 .sv-stages li { padding-left:28px; }
 .sv-stage { font-size:12px; line-height:20px; }
 .sv-node { top:calc(var(--pad) + 10px - 5.5px); }
 .sv-seg { top:calc(var(--pad) + 10px); }
 .sv-note { display:none; }
 .sv-lines { grid-column:1; }
 .sv-lines li { padding:calc(var(--pad) + 24px) 0 var(--pad) 28px; font-size:16px; }
 .sv-head-row { padding-bottom:14px; }
 .sv-head-row h3 { font-size:26px; }
 .sv-case { font-size:14.5px; }
 .sv-chips { gap:6px; }
 .sv-chips li { padding:6px 11px; font-size:13.5px; }
}
/* Narrower still: the credit's free corner is smaller, so it takes two lines and keeps off the
   coast; a tile's long first word reaches its top corner, so the case's dot takes the lower one. */
@media(max-width:359px) {
 .sv-credit { max-width:58%; white-space:normal; }
 .sv-real { top:auto; bottom:9px; }
}

@media(prefers-reduced-motion:reduce) {
 .services *,.services *::before,.services *::after { animation:none!important; transition:none!important; }
 .sv-pause,.sv-route,.sv-you-ring { display:none!important; }
}