/* ═══════════════════════════════════════════════════════════
   Artizen Construction — services section (shared)
   Photo service cards, the compass-centre card grid, the desktop
   services orbit and the explore links. Used on every page that
   shows the services compass.
═══════════════════════════════════════════════════════════ */

/* Service cards with photos */
.sc-photo {
  position:relative;overflow:hidden;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer; text-decoration:none; border-radius:8px;
}

/* ═══ Compass-centre services layout ═══
   The medallion card sits in the middle column as a centrepiece,
   with the six service cards circling it down each side. */
.services-grid--compass {
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  grid-auto-rows:1fr;
  gap:2.2rem;
  align-items:stretch;
}
.services-grid--compass .sc-photo { min-height:300px; height:100%; }
/* Centre medallion card: column 2, spanning all three rows */
.sc-compass {
  grid-column:2; grid-row:1 / span 3;
  min-height:0;
}
.sc-compass-video {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none;
}
.sc-compass .sc-photo-overlay {
  background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.52) 55%, rgba(0,0,0,0.82) 100%);
}
.sc-compass:hover .sc-photo-overlay {
  background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.58) 55%, rgba(0,0,0,0.86) 100%);
}
.sc-compass .sc-photo-body {
  margin-top:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.sc-compass .sc-photo-body p { max-width:34ch; margin-left:auto; margin-right:auto; }
.sc-compass .sc-photo-cta { align-self:center; }
/* Eyebrow tag marking it as the signature piece */
.sc-compass-tag {
  position:absolute; top:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-ui); font-size:0.6rem; letter-spacing:0.32em; text-transform:uppercase;
  color:rgba(255,255,255,0.82); white-space:nowrap;
}
.sc-compass-tag::before, .sc-compass-tag::after {
  content:""; display:inline-block; width:22px; height:1px; vertical-align:middle;
  background:rgba(255,255,255,0.45); margin:0 0.8em;
}
@media (prefers-reduced-motion: reduce){ .sc-compass-video { display:none; } }

/* ═══════════════════════════════════════════════════════
   SERVICES ORBIT — desktop-only constellation
   Watermark dial rotates anticlockwise behind; six circular
   nodes orbit clockwise (counter-spun to stay upright); the
   compass medallion sits at the centre. Ring pauses on hover,
   hovered node enlarges and reveals its description.
   The readable grid below is the fallback for tablet, mobile
   and reduced-motion users.
═══════════════════════════════════════════════════════ */
.svc-orbit { display:none; }

@media (prefers-reduced-motion: no-preference){
  /* Show orbit, hide the readable grid on desktop */
  .svc-orbit { display:block; }
  .services-grid--compass { display:none; }

  .svc-orbit {
    position:relative;
    /* Desktop default compass proportions (overridden smaller on tablet/phone below) */
    --node:182px; --r:366px; --centre:352px;
    width:min(960px, 86vw);
    aspect-ratio:1 / 1;
    margin:0 auto;
  }

  /* Rotating compass behind everything — same asset as the hero cover */
  .svc-orbit-dial {
    position:absolute; left:50%; top:50%;
    width:128%; height:128%;
    transform:translate(-50%,-50%);
    z-index:0; pointer-events:none;
    animation:svc-dial-spin 140s linear infinite;
    will-change:transform;
  }
  .svc-orbit-dial::before {
    content:""; position:absolute; inset:0;
    background:url('images/hero-compass.webp') center/contain no-repeat;
    opacity:0.12;
  }
  @keyframes svc-dial-spin {
    from { transform:translate(-50%,-50%) rotate(0deg); }
    to   { transform:translate(-50%,-50%) rotate(-360deg); }
  }

  /* The rotating ring that carries the nodes (clockwise) */
  .svc-orbit-ring {
    position:absolute; inset:0; z-index:2;
    animation:svc-ring-spin 100s linear infinite;
    will-change:transform;
  }
  @keyframes svc-ring-spin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
  }
  /* Pause the whole ring (and counter-spin) when hovering any node or the stage */
  .svc-orbit:hover .svc-orbit-ring,
  .svc-orbit:hover .svc-node-inner { animation-play-state:paused; }

  /* Each node is positioned on the ring via a rotation + translate.
     --a is the node's angle around the circle; --r the orbit radius. */
  .svc-node {
    position:absolute; left:50%; top:50%;
    width:0; height:0;
    transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  }
  /* Inner wrapper counter-rotates against the ring so labels stay upright */
  .svc-node-inner {
    position:absolute; left:50%; top:50%;
    width:var(--node); height:var(--node);
    margin-left:calc(var(--node) / -2);
    margin-top:calc(var(--node) / -2);
    animation:svc-node-counter 100s linear infinite;
    will-change:transform;
  }
  @keyframes svc-node-counter {
    from { transform:rotate(0deg); }
    to   { transform:rotate(-360deg); }
  }

  /* The visible circular card */
  .svc-node-card {
    position:absolute; inset:0; border-radius:50%;
    overflow:hidden; text-decoration:none;
    background:var(--ink-mid);
    box-shadow:0 18px 40px -18px rgba(0,0,0,0.7);
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  }
  .svc-node-bg {
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    transition:transform 0.7s var(--ease-out);
  }
  .svc-node-scrim {
    position:absolute; inset:0; z-index:1;
    background:radial-gradient(circle at 50% 50%, rgba(21,19,16,0.42) 0%, rgba(21,19,16,0.62) 60%, rgba(21,19,16,0.86) 100%);
    transition:background 0.5s;
  }

  /* Big faded bearing letter, fills the card, sits behind the name */
  .svc-node-bearing {
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    font-family:var(--font-display); font-weight:400; line-height:1;
    color:#B0A090; opacity:0.32;
    text-shadow:0 2px 20px rgba(0,0,0,0.5);
    pointer-events:none; user-select:none;
    transition:opacity 0.5s, color 0.5s;
  }
  .svc-node-bearing > span {
    display:block; line-height:1; text-align:center;
    /* tiny optical lift so the display-type letters sit true-centre in the circle */
    transform:translateY(-0.02em);
  }
  /* Capital cardinal points (N E S W) fill almost the whole card */
  .svc-node--card .svc-node-bearing { font-size:clamp(6rem,11vw,9.5rem); text-transform:uppercase; }
  /* Intercardinals (NE SE SW NW) — uppercase, a touch smaller (two letters are wider) and more transparent */
  .svc-node--inter .svc-node-bearing { font-size:clamp(3.4rem,6vw,5.4rem); text-transform:uppercase; opacity:0.2; letter-spacing:0.02em; }
  /* North uses the brand red, a touch stronger */
  .svc-node--north .svc-node-bearing { color:#C8341F; opacity:0.4; }

  /* When the compass re-orients on hover, bearings are re-lettered to their true
     bearing relative to the new North. Size + weight then follow the LETTER COUNT
     (data-len) rather than the card's fixed cardinal/intercardinal class. */
  .svc-orbit.is-aiming .svc-node-bearing[data-len="1"] {
    font-size:clamp(6rem,11vw,9.5rem); opacity:0.3; letter-spacing:0;
  }
  .svc-orbit.is-aiming .svc-node-bearing[data-len="2"] {
    font-size:clamp(3.4rem,6vw,5.4rem); opacity:0.2; letter-spacing:0.02em;
  }
  /* The card that is currently North fades its own ghost letter back, letting the
     red "N" marker read as the active bearing instead. */
  .svc-orbit.is-aiming .svc-node-bearing[data-north="true"] { opacity:0; }
  /* While aiming, the ORIGINAL north card is no longer north — drop its red colour
     back to the neutral ghost tone so only the hovered card reads red. */
  .svc-orbit.is-aiming .svc-node--north .svc-node-bearing { color:#B0A090; }

  /* Service name, always visible, centred on top of the faded letter */
  .svc-node-label {
    position:absolute; inset:0; z-index:4; padding:0 0.9rem;
    display:flex; align-items:center; justify-content:center; text-align:center;
    transition:transform 0.4s var(--ease-out);
  }
  .svc-node-name {
    display:block; font-family:var(--font-display); font-weight:400;
    font-size:clamp(0.78rem,1.05vw,0.95rem); line-height:1.16; color:#F4F1EB; margin:0;
    letter-spacing:0.01em; text-shadow:0 1px 10px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.5);
    transition:text-shadow 0.5s var(--ease-out), color 0.5s var(--ease-out);
  }
  /* Warm glow on the service name when hovered — echoes the centre medallion title */
  .svc-node:hover .svc-node-name {
    color:#FFF7EC;
    text-shadow:0 1px 10px rgba(0,0,0,0.6),
                0 0 18px rgba(255,220,170,0.85),
                0 0 36px rgba(240,160,72,0.6),
                0 0 60px rgba(214,128,52,0.4);
  }

  /* Hover content: one-line description, fades in beneath the name */
  .svc-node-desc {
    position:absolute; left:0; right:0; bottom:0; z-index:5;
    display:flex; align-items:flex-end; justify-content:center;
    padding:0 1.3rem 14%; text-align:center;
    opacity:0; transition:opacity 0.4s;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(16,14,12,0) 0%, rgba(16,14,12,0.5) 46%, rgba(16,14,12,0.82) 100%);
  }
  .svc-node-desc p {
    font-family:var(--font-body); font-size:clamp(0.62rem,1.05vw,0.92rem);
    line-height:1.48; color:#FFFFFF; margin:0; font-weight:500;
    text-shadow:0 1px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7);
  }

  /* Warm ember glow that radiates off the hovered card and fades into the dark */
  .svc-node-ember {
    position:absolute; left:50%; top:50%; z-index:-1;
    width:215%; height:215%; transform:translate(-50%,-50%) scale(0.55);
    border-radius:50%; pointer-events:none; opacity:0;
    background:radial-gradient(circle at 50% 50%,
      rgba(240,160,72,0.7) 0%,
      rgba(214,128,52,0.46) 28%,
      rgba(150,78,34,0.24) 50%,
      rgba(90,46,22,0.1) 68%,
      rgba(21,19,16,0) 80%);
    transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    filter:blur(10px);
  }

  /* Enlarge, glow up + reveal on hover */
  /* While any node is hovered, fade the others back so the focus is deliberate */
  .svc-orbit-ring:hover .svc-node { transition:opacity 0.4s var(--ease-out); }
  .svc-orbit-ring:hover .svc-node:not(:hover) { opacity:0.55; }

  .svc-node:hover { z-index:30; opacity:1 !important; }
  .svc-node:hover .svc-node-card {
    transform:scale(1.72);
    box-shadow:0 40px 90px -20px rgba(0,0,0,0.92),
               0 0 90px 4px rgba(240,160,72,0.75),
               0 0 160px 22px rgba(214,128,52,0.45),
               0 0 0 1px rgba(255,222,170,0.35);
  }
  /* the photo brightens / glows up */
  .svc-node:hover .svc-node-bg { transform:scale(1.08); filter:brightness(1.38) saturate(1.18) contrast(1.05); }
  .svc-node:hover .svc-node-scrim {
    background:radial-gradient(circle at 50% 50%, rgba(40,26,12,0.14) 0%, rgba(28,22,16,0.4) 60%, rgba(21,19,16,0.76) 100%);
  }
  .svc-node:hover .svc-node-bearing { opacity:0.16; }
  .svc-node:hover .svc-node-label { transform:translateY(-14%); }
  .svc-node:hover .svc-node-desc { opacity:1; }
  .svc-node:hover .svc-node-ember { opacity:1; transform:translate(-50%,-50%) scale(1); }

  /* ── Hover bearing behaviour ──
     The faint ghost bearing letters stay (ghosting effect kept); the hovered
     card gently reveals a soft brand-red "N" north marker behind its name. ── */
  /* Red North marker — one per node, hidden until that node is hovered */
  .svc-node-north {
    position:absolute; inset:0; z-index:3;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:var(--font-display); font-weight:400; line-height:1;
    font-size:clamp(6rem,11vw,9.5rem); text-transform:uppercase;
    color:#C8341F; opacity:0;
    text-shadow:0 2px 24px rgba(0,0,0,0.45), 0 0 30px rgba(200,52,31,0.35);
    pointer-events:none; user-select:none;
    transition:opacity 0.5s var(--ease-out);
  }
  .svc-node-north > span { display:block; line-height:1; transform:translateY(-0.02em); }
  .svc-node:hover .svc-node-north { opacity:0.42; }

  /* Centre medallion — circular compass-video centrepiece, spreads just past the ring */
  .svc-centre {
    position:absolute; left:50%; top:50%; z-index:10;
    width:var(--centre); height:var(--centre);
    margin-left:calc(var(--centre) / -2);
    margin-top:calc(var(--centre) / -2);
    border-radius:50%; overflow:hidden; text-decoration:none;
    box-shadow:0 30px 70px -24px rgba(0,0,0,0.85);
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  }
  .svc-centre-video {
    position:absolute; inset:0; z-index:0; width:100%; height:100%;
    object-fit:cover; object-position:center; pointer-events:none;
  }
  .svc-centre-scrim {
    position:absolute; inset:0; z-index:1;
    background:radial-gradient(circle at 50% 50%, rgba(21,19,16,0.22) 0%, rgba(21,19,16,0.4) 58%, rgba(21,19,16,0.74) 100%);
    transition:background 0.5s;
  }

  .svc-centre-body {
    position:absolute; inset:0; z-index:5;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:0 2rem; gap:0.85rem;
  }
  .svc-centre-body h3 {
    font-family:var(--font-display); font-weight:400; line-height:1.12;
    font-size:clamp(1.3rem,2.2vw,1.85rem); color:#fff; margin:0;
    text-shadow:0 1px 14px rgba(0,0,0,0.6);
  }
  .svc-centre-body h3 em { font-style:italic; color:#D8D2C6; }
  /* Logo dead-centre — the anchor at the heart of the compass */
  .svc-explore {
    display:flex; align-items:center; justify-content:center;
    width:78px; height:78px; flex:none;
    transition:transform 0.5s var(--ease-out);
  }
  .svc-explore img {
    display:block; width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,0.6));
    transition:transform 0.5s var(--ease-out);
  }
  /* Explore button under the logo — signals the centre is clickable */
  .svc-centre-cta {
    display:inline-flex; align-items:center; gap:0.5em;
    font-family:var(--font-ui); font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase;
    color:#F4F1EB; padding:0.6em 1.2em;
    border:1px solid rgba(244,241,235,0.5); border-radius:2px;
    text-shadow:0 1px 6px rgba(0,0,0,0.5);
    box-shadow:0 0 0 0 rgba(240,160,72,0);
    transition:background 0.4s, color 0.4s, border-color 0.4s, gap 0.4s, box-shadow 0.5s var(--ease-out), text-shadow 0.4s;
  }
  .svc-centre-cta span { transition:transform 0.4s var(--ease-out); }
  /* Glow up: warm amber halo + soft white core when the centre is hovered */
  .svc-centre:hover .svc-centre-cta {
    background:var(--white); color:var(--ink);
    border-color:rgba(255,222,170,0.95); gap:0.8em;
    text-shadow:none;
    box-shadow:0 0 18px 2px rgba(240,160,72,0.65),
               0 0 42px 10px rgba(214,128,52,0.4),
               0 0 0 1px rgba(255,222,170,0.5) inset;
  }
  .svc-centre:hover .svc-centre-cta span { transform:translateX(0.15rem); }
  /* Direct hover on the button itself also glows it up, a touch stronger */
  .svc-centre-cta:hover {
    background:var(--white); color:var(--ink);
    border-color:rgba(255,230,185,1);
    box-shadow:0 0 24px 4px rgba(240,160,72,0.78),
               0 0 54px 14px rgba(214,128,52,0.46),
               0 0 0 1px rgba(255,230,185,0.6) inset;
  }
  .svc-centre:hover .svc-explore img { transform:scale(1.08) rotate(8deg); }
  /* Centre expands a lot on its own hover */
  .svc-centre:hover { transform:scale(1.16); z-index:20; }
  .svc-centre:hover .svc-centre-scrim {
    background:radial-gradient(circle at 50% 50%, rgba(21,19,16,0.28) 0%, rgba(21,19,16,0.46) 58%, rgba(21,19,16,0.78) 100%);
  }

  /* ── Unified compass: ring + interior on ONE layer, concentric with the centre.
     A static wrapper (scalable on hover) holds an inner rotating layer so the
     whole compass can grow with the centre without fighting the spin animation. ── */
  .svc-centre-compass {
    position:absolute; left:50%; top:50%; z-index:11;
    width:calc(var(--centre) + 86px); height:calc(var(--centre) + 86px);
    margin-left:calc((var(--centre) + 86px) / -2);
    margin-top:calc((var(--centre) + 86px) / -2);
    pointer-events:none;
    transition:transform 0.55s var(--ease-out);
  }
  /* the centre's own hover expands the compass ring to match (sibling after .svc-centre) */
  .svc-centre:hover ~ .svc-centre-compass { transform:scale(1.16); }
  .svc-centre-compass-spin {
    position:absolute; inset:0;
    animation:svc-ring-cw 90s linear infinite;
    will-change:transform;
  }
  @keyframes svc-ring-cw {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
  }
  /* Outer ring — always present */
  .svc-centre-compass-ring {
    position:absolute; inset:0;
    background:url('images/artizen-compass-ring.png') center/contain no-repeat;
    opacity:0.42;
  }
  /* Interior compass rose — fades in inside the same ring on hover, very transparent */
  .svc-centre-compass-rose {
    position:absolute; inset:13%;
    background:url('images/hero-compass.webp') center/contain no-repeat;
    opacity:0; transition:opacity 1s var(--ease-out);
  }
  .svc-orbit.is-aiming .svc-centre-compass-rose { opacity:0.1; }

  /* Needle: a point on the ring that swings to aim at the hovered card.
     Concentric with the compass. Point sits at top (-90deg from +X), rotate (aim+90). */
  .svc-centre-needle {
    position:absolute; left:50%; top:50%; z-index:12;
    width:calc(var(--centre) + 86px); height:calc(var(--centre) + 86px);
    margin-left:calc((var(--centre) + 86px) / -2);
    margin-top:calc((var(--centre) + 86px) / -2);
    transform:rotate(calc(var(--aim, -90deg) + 90deg));
    transition:transform 0.5s var(--ease-out), opacity 0.4s;
    opacity:0; pointer-events:none;
  }
  .svc-orbit.is-aiming .svc-centre-needle { opacity:1; }
  .svc-centre-needle::before {
    content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
    width:0; height:0;
    border-left:9px solid transparent; border-right:9px solid transparent;
    border-bottom:20px solid #C8341F;
    filter:drop-shadow(0 0 8px rgba(200,52,31,0.6));
  }

  /* Red beam — begins at the far edge of the hovered card and shoots across the
     entire screen. It never overlaps the card itself; it fades in and out. */
  .svc-centre-line {
    position:absolute; left:calc(50% - 1px); top:50%; z-index:8;
    width:2px; height:150vmax; transform-origin:top center;
    /* aim, then push the start point out past the card's outer edge along that axis */
    transform:rotate(calc(var(--aim, 90deg) - 90deg)) translateY(calc(var(--r) + 150px));
    background:linear-gradient(180deg,
      rgba(200,52,31,0) 0%,
      rgba(200,52,31,0.9) 4%,
      rgba(200,52,31,0.6) 30%,
      rgba(200,52,31,0.28) 64%,
      rgba(200,52,31,0) 100%);
    box-shadow:0 0 12px rgba(200,52,31,0.55);
    opacity:0;
    transition:opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out);
    pointer-events:none;
  }
  /* Fade the beam in on hover (and out on leave) */
  .svc-orbit.is-aiming .svc-centre-line { opacity:1; }

  /* ── Centre-hover starburst: hovering the Medallions centre sends a red beam
     out to EVERY card at once (rather than the single aimed beam above), and
     every outer card's bearing letter reads red — "all cards go north". The
     burst lives inside the ring so it inherits the ring's live rotation and
     always lines up with the cards' true on-screen angle. ── */
  .svc-centre-burst {
    position:absolute; inset:0;
    opacity:0; pointer-events:none;
    transition:opacity 0.45s var(--ease-out);
  }
  .svc-burst-line {
    position:absolute; left:50%; top:50%; height:2px; width:150vmax;
    transform-origin:0 50%;
    transform:rotate(var(--a));
    background:linear-gradient(90deg,
      rgba(200,52,31,0.95) 0%,
      rgba(200,52,31,0.62) 14%,
      rgba(200,52,31,0.24) 42%,
      rgba(200,52,31,0) 78%);
    box-shadow:0 0 12px rgba(200,52,31,0.5);
  }
  /* Reveal the burst + relight every bearing letter red on centre hover */
  .svc-centre:hover ~ .svc-orbit-ring .svc-centre-burst { opacity:1; }
  .svc-centre:hover ~ .svc-orbit-ring .svc-node-bearing { color:#C8341F; opacity:0.5; }
  .svc-centre:hover ~ .svc-orbit-ring .svc-node--inter .svc-node-bearing { opacity:0.34; }
  /* The needle also swings up to join the burst while the centre is hovered */
  .svc-centre:hover ~ .svc-centre-needle { opacity:1; }
  /* Every card's letter becomes a matching red "N" (text swapped via JS,
     styled here) so the whole ring reads North together */
  .svc-orbit.is-centre-aiming .svc-node-bearing {
    color:#C8341F; opacity:0.55;
  }
  .svc-orbit.is-centre-aiming .svc-node-bearing[data-len="1"] {
    font-size:clamp(6rem,11vw,9.5rem); opacity:0.55; letter-spacing:0;
  }
}

/* ═══ Orbit responsive scaling — compass shows on tablet & phone too ═══ */
@media (prefers-reduced-motion: no-preference){
  /* Tablet: scale the whole compass down via its driving vars */
  @media (max-width:900px){
    .svc-orbit { --node:116px; --r:214px; --centre:190px; width:min(560px,86vw); margin:1.5rem auto 2.5rem; }
    .svc-node-name { font-size:clamp(0.62rem,2.4vw,0.8rem); }
    .svc-centre-body h3 { font-size:clamp(1.3rem,4.4vw,1.9rem); }
  }
  /* Large phone */
  @media (max-width:600px){
    .svc-orbit { --node:88px; --r:124px; --centre:116px; width:min(340px,92vw); margin:2.5rem auto 3rem; }
    .svc-node-name { font-size:0.6rem; line-height:1.15; letter-spacing:0.01em; }
    .svc-centre-body { padding:0 0.9rem; text-align:center; gap:0; }
    .svc-centre-body h3 { font-size:1.05rem; text-align:center; }
    .svc-explore, .svc-centre-cta { display:none; }
    /* Scrap the busy spinning compass dial + degree ring on mobile — too cluttered */
    .svc-orbit-dial { display:none; }
    /* Slow the ring so cards are easier to grab and tap — ring + counter MUST match */
    .svc-orbit-ring { animation-duration:170s; }
    .svc-node-inner { animation-duration:170s; }
  }
  /* Small phone */
  @media (max-width:400px){
    .svc-orbit { --node:80px; --r:110px; --centre:104px; width:min(300px,94vw); margin:2rem auto 2.5rem; }
    .svc-node-name { font-size:0.54rem; }
    .svc-centre-body { padding:0 0.65rem; gap:0; }
    .svc-centre-body h3 { font-size:0.92rem; text-align:center; }
  }
  /* Grab cursor + no text selection while dragging the compass */
  .svc-orbit { cursor:grab; touch-action:pan-y; }
  .svc-orbit.is-dragging { cursor:grabbing; }
  .svc-orbit.is-dragging .svc-orbit-ring,
  .svc-orbit.is-dragging .svc-node-inner,
  .svc-orbit.is-dragging .svc-orbit-dial { animation-play-state:paused; }
}

/* ═══ Service click-to-expand page transition ═══
   The clicked circle grows a few times its own size right where it is —
   no page-filling stretch, no vignette trick — then a clean solid fade
   covers the screen and the next page loads. Works on desktop and mobile. */
.svc-transition {
  position:fixed; z-index:9999; border-radius:50%;
  background-size:cover; background-position:center;
  pointer-events:none; will-change:transform,opacity;
  opacity:1;
  box-shadow:0 20px 60px -10px rgba(0,0,0,0.5);
  transition:transform 0.5s cubic-bezier(0.5,0,0.25,1),
             opacity 0.35s ease 0.25s;
}
.svc-transition.is-fading { opacity:0; }
.svc-transition-fade {
  position:fixed; inset:0; z-index:9998; background:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity 0.4s ease 0.2s;
}
.svc-transition-fade.is-on { opacity:1; }
@media (prefers-reduced-motion: reduce){
  .svc-transition, .svc-transition-fade { display:none !important; }
}


/* Reduced-motion fallback grid: single-column compass-led flow */
@media (prefers-reduced-motion: reduce){
  .services-grid--compass { grid-template-columns:1fr 1fr; }
  .services-grid--compass > .sc-photo { grid-column:auto !important; grid-row:auto !important; }
  .sc-compass { grid-column:1 / -1 !important; grid-row:auto !important; min-height:360px; order:-1; }
}
@media (max-width:600px){
  .services-grid--compass { grid-template-columns:1fr; }
}

.sc-photo-bg {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 0.7s ease;
}
.sc-photo:hover .sc-photo-bg { transform:scale(1.05); }
.sc-photo-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 28%, rgba(0,0,0,0.45) 62%, rgba(0,0,0,0.28) 100%);
  transition:background 0.5s;
}
.sc-photo:hover .sc-photo-overlay {
  background:linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.3) 100%);
}
.sc-photo-body {
  position:relative;z-index:2;
  padding:2.5rem;
}
.sc-photo-body .sc-n { color:rgba(255,255,255,0.55); }
.sc-photo-body h3 { color:#FFFFFF;margin-bottom:0.8rem; text-shadow:0 1px 12px rgba(0,0,0,0.5); transition:text-shadow 0.5s var(--ease-out); }
.sc-photo:hover .sc-photo-body h3 {
  text-shadow:0 1px 12px rgba(0,0,0,0.4),
              0 0 18px rgba(255,220,170,0.7),
              0 0 38px rgba(240,160,72,0.5);
}
.sc-photo-body p { color:rgba(255,255,255,0.9); text-shadow:0 1px 8px rgba(0,0,0,0.4); }
.sc-photo-cta {
  display:inline-flex; align-items:center; gap:0.5em; margin-top:1.4rem;
  font-family:var(--font-ui); font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--white); opacity:1;
  padding:0.7rem 1.2rem;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:2px;
  transition:gap 0.3s, background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.4s;
}
.sc-photo-cta span { display:inline-block; transition:transform 0.3s var(--ease-out); }
.sc-photo:hover .sc-photo-cta {
  gap:0.7em; background:var(--white); color:var(--ink); border-color:rgba(255,222,170,0.95);
  box-shadow:0 0 16px 1px rgba(240,160,72,0.5), 0 0 36px 8px rgba(214,128,52,0.3);
}
.sc-photo:hover .sc-photo-cta span { transform:translateX(0.3rem); }

/* ═══ Phones & tablets: readable service cards instead of the orbit ═══
   The orbit is a desktop (hover) experience; at the hamburger breakpoint
   and below, show the card grid with every description visible. */
@media (max-width:1024px){
  .svc-orbit { display:none !important; }
  .services-grid--compass {
    display:grid !important;
    grid-template-columns:1fr 1fr; grid-auto-rows:auto; gap:1.25rem;
  }
  .services-grid--compass > .sc-photo { grid-column:auto !important; grid-row:auto !important; min-height:320px; }
  .services-grid--compass > .sc-compass { grid-column:1 / -1 !important; grid-row:auto !important; min-height:380px; order:-1; }
}
@media (max-width:600px){
  .services-grid--compass { grid-template-columns:1fr; }
  .services-grid--compass > .sc-photo { min-height:300px; }
}