:root{--service-gold:#d6a85e;--service-cream:#eadfc9}
body[data-page="services"]{background:#070807}
.services-hero{min-height:calc(100vh - 92px);padding:clamp(28px,3.5vw,54px) 0 clamp(50px,6vw,88px);color:var(--service-cream);background:radial-gradient(circle at 18% 32%,rgba(255,255,255,.018),transparent 24%),radial-gradient(circle at 82% 72%,rgba(214,168,94,.028),transparent 30%),repeating-linear-gradient(96deg,rgba(255,255,255,.008) 0 1px,transparent 1px 5px),#070807}
.services-shell{width:min(1760px,calc(100% - 72px));margin-inline:auto}
.signal-path{position:relative;display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:clamp(16px,2.4vw,44px);align-items:start;margin:0;padding:8px clamp(8px,2vw,30px) clamp(34px,4vw,62px);list-style:none;border-bottom:1px solid rgba(229,189,109,.18)}
.signal-path::before{content:"";position:absolute;z-index:0;top:clamp(49px,4.1vw,66px);left:5%;right:3%;height:2px;background:var(--service-gold);box-shadow:0 0 16px rgba(214,168,94,.1)}
.signal-step{position:relative;z-index:1;display:grid;justify-items:center;gap:12px;color:var(--service-gold)}
.signal-action{display:grid;justify-items:center;gap:12px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.signal-action:focus-visible{outline:2px solid #f0cb82;outline-offset:5px;border-radius:3px}
.signal-action .signal-screen{transition:color .18s,filter .18s,transform .18s}
.signal-action:hover .signal-screen,.signal-action:focus-visible .signal-screen{color:#f4d69b;filter:drop-shadow(0 0 9px rgba(214,168,94,.26));transform:translateY(-2px)}
.signal-action:active .signal-screen{transform:scale(.93)}
.signal-step.is-active .signal-screen{color:#f0cb82;filter:drop-shadow(0 0 10px rgba(214,168,94,.34))}
.signal-step.is-active b{color:#f0cb82}
.signal-step b{color:var(--service-cream);font:500 clamp(.92rem,1.35vw,1.36rem)/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.signal-screen{display:grid;place-items:center;width:clamp(102px,8vw,142px);height:clamp(68px,5.4vw,96px);padding:5px;background:#070807}
.signal-screen svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(214,168,94,.08))}
.signal-screen .signal-led{fill:currentColor;stroke:currentColor}.signal-globe{width:clamp(86px,7vw,120px)}
.services-main{display:grid;grid-template-columns:minmax(360px,.72fr) minmax(560px,1.28fr);gap:clamp(48px,6vw,106px);align-items:center;padding:clamp(38px,5vw,76px) clamp(8px,2vw,30px) 0}
.services-copy h1{margin:0;color:var(--service-cream);font:600 clamp(5.8rem,8.5vw,11.6rem)/.77 "Barlow Condensed",sans-serif;letter-spacing:-.035em;text-transform:uppercase;text-shadow:0 1px rgba(255,255,255,.16)}
.services-kicker{display:flex;align-items:center;gap:18px;margin:28px 0 34px;color:var(--service-gold);font:500 clamp(1rem,1.45vw,1.38rem)/1 "Barlow Condensed",sans-serif;letter-spacing:.055em;text-transform:uppercase}
.services-kicker>span{width:58px;height:2px;background:currentColor}
.service-selector-wrap{display:grid;grid-template-columns:minmax(270px,390px) minmax(190px,1fr);gap:clamp(18px,2.2vw,36px);align-items:start}.service-selector{display:grid}
.service-option{position:relative;display:flex;align-items:center;gap:18px;width:100%;min-height:54px;padding:10px 15px;border:1px solid transparent;border-bottom-color:rgba(234,223,201,.19);border-radius:4px;background:transparent;color:#d9cfbc;font:500 clamp(.98rem,1.2vw,1.18rem)/1 "Barlow Condensed",sans-serif;letter-spacing:.075em;text-align:left;text-transform:uppercase;cursor:pointer;transition:color .18s,border-color .18s,background .18s,transform .18s}
.service-option-icon{display:none}
.service-option:hover,.service-option:focus-visible,.service-option.is-active{z-index:1;border-color:var(--service-gold);background:rgba(214,168,94,.025);color:var(--service-cream);transform:translateX(3px)}
.service-option:focus-visible{outline:2px solid #f0cb82;outline-offset:3px}
.service-bullet{flex:0 0 auto;width:19px;height:19px;border:2px solid var(--service-gold);border-radius:50%;box-shadow:inset 0 0 0 4px #070807;transition:background .18s,box-shadow .18s}
.service-option:hover .service-bullet,.service-option:focus-visible .service-bullet,.service-option.is-active .service-bullet{background:var(--service-gold);box-shadow:inset 0 0 0 4px #070807,0 0 12px rgba(214,168,94,.26)}
.service-detail{padding:13px 0 0;transition:opacity .16s,transform .16s}.service-detail.is-changing{opacity:.25;transform:translateY(5px)}
.service-rate{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;color:var(--service-gold);font:500 clamp(.92rem,1.05vw,1.08rem)/1.25 "Barlow Condensed",sans-serif;letter-spacing:.045em;text-transform:uppercase}
.service-rate>span{flex:0 0 auto;width:10px;height:10px;margin-top:2px;border-radius:50%;background:#e62f26;box-shadow:0 0 11px rgba(230,47,38,.56)}
.service-detail>p:not(.service-rate){margin:0 0 15px;color:#aaa291;font-size:.88rem;line-height:1.55}.service-detail a{color:var(--service-cream);font:600 .86rem "Barlow Condensed",sans-serif;letter-spacing:.09em;text-decoration-color:var(--service-gold);text-underline-offset:5px;text-transform:uppercase}
.service-stage{position:relative;margin:0;border:2px solid var(--service-gold);border-radius:3px;background:#080807;box-shadow:22px 22px 0 -20px rgba(214,168,94,.55),0 28px 70px rgba(0,0,0,.36);overflow:hidden}
.service-window-bar{display:flex;align-items:center;min-height:38px;padding:7px 10px 7px 14px;border-bottom:1px solid var(--service-gold);color:var(--service-gold);font:500 .88rem "Barlow Condensed",sans-serif;letter-spacing:.13em;text-transform:uppercase}.service-window-bar span{margin-right:auto}.service-window-bar i{position:relative;width:24px;height:20px}.service-window-bar i::before,.service-window-bar i::after{content:"";position:absolute;inset:50% auto auto 50%;width:11px;height:1px;background:var(--service-gold);transform:translate(-50%,-50%)}.service-window-bar i:nth-last-child(2)::before{width:9px;height:8px;border:1px solid var(--service-gold);background:transparent}.service-window-bar i:last-child::before{transform:translate(-50%,-50%) rotate(45deg)}.service-window-bar i:last-child::after{transform:translate(-50%,-50%) rotate(-45deg)}
.service-image-wrap{position:relative;aspect-ratio:16/10.25;overflow:hidden}.service-image-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(234,223,201,.08)}.service-image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;filter:none;transition:opacity .2s,transform .55s cubic-bezier(.2,.7,.2,1)}.service-stage:hover img{transform:scale(1.012)}.service-stage.is-changing img{opacity:0}
.services-cta{border-top:1px solid rgba(214,168,94,.24);background:#0a0a09}.services-cta .eyebrow{color:var(--service-gold)}.services-cta h2{color:var(--service-cream);font-family:"Barlow Condensed",sans-serif;text-transform:uppercase}
@media(max-width:1180px){.services-shell{width:min(100% - 40px,1760px)}.services-main{grid-template-columns:minmax(330px,.82fr) minmax(470px,1.18fr);gap:42px}.service-selector-wrap{grid-template-columns:1fr}.service-detail{padding-top:4px}}
@media(max-width:920px){.services-main{grid-template-columns:1fr}.services-copy h1{font-size:clamp(5.8rem,20vw,10rem)}.service-selector-wrap{grid-template-columns:minmax(270px,1fr) minmax(220px,.7fr)}.service-stage{width:100%}}
@media(max-width:740px){
  .services-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(68px,19vw,84px);
    column-gap:10px;
    align-items:start;
    width:min(100% - 26px,1760px);
  }
  .signal-path{
    position:sticky;
    top:84px;
    grid-column:2;
    grid-row:1;
    grid-template-columns:1fr;
    gap:17px;
    margin:0;
    padding:8px 0 20px;
    overflow:visible;
    border-bottom:0;
    scroll-snap-type:none;
  }
  .signal-path::before{
    top:18px;
    bottom:28px;
    left:50%;
    right:auto;
    width:1px;
    height:auto;
    background:var(--service-gold);
    opacity:.72;
  }
  .signal-step{gap:5px;min-width:0;scroll-snap-align:none}
  .signal-action{gap:5px}
  .signal-step b{font-size:.65rem;letter-spacing:.1em}
  .signal-screen,.signal-globe{width:min(60px,16vw);height:42px;padding:3px}
  .signal-screen svg{stroke-width:1.8}
  .services-main{grid-column:1;grid-row:1;padding:8px 0 0}
  .services-copy h1{max-width:100%;font-size:clamp(3.7rem,17.5vw,5.4rem);line-height:.82;letter-spacing:-.05em}
  .services-kicker{gap:12px;margin:22px 0 28px;font-size:.96rem;letter-spacing:.04em}
  .services-kicker>span{width:42px}
  .service-selector-wrap{grid-template-columns:1fr}
  .service-selector>.service-detail{
    margin:0 0 8px;
    padding:15px 15px 20px;
    border-right:1px solid rgba(214,168,94,.35);
    border-bottom:1px solid rgba(214,168,94,.35);
    border-left:1px solid rgba(214,168,94,.35);
    background:rgba(214,168,94,.035);
    overflow-anchor:none;
  }
  .service-selector>.service-stage{
    width:100%;
    margin:0;
    border-width:0 1px;
    border-color:rgba(214,168,94,.62);
    border-radius:0;
    box-shadow:none;
    overflow-anchor:none;
  }
  .service-selector>.service-stage .service-window-bar{min-height:36px;background:rgba(214,168,94,.04)}
  .service-selector>.service-stage .service-image-wrap{aspect-ratio:4/3}
  .service-selector>.service-detail .service-rate{margin-bottom:10px}
  .service-option{min-height:52px;scroll-margin-top:82px;transition:color .18s,border-color .18s,background .18s,transform .12s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
  .service-option:hover,.service-option:focus-visible{background:rgba(214,168,94,.075);box-shadow:inset 3px 0 var(--service-gold)}
  .service-option:active{transform:scale(.985);background:rgba(214,168,94,.13)}
  .service-option.is-active{background:rgba(214,168,94,.065);box-shadow:inset 3px 0 var(--service-gold),0 0 18px rgba(214,168,94,.05)}
  .service-detail{min-height:0}
  .service-image-wrap{aspect-ratio:4/3}

  body[data-mobile-icon-layout] .services-shell{
    display:block;
    width:min(100% - 26px,1760px);
  }
  body[data-mobile-icon-layout] .signal-path{
    position:relative;
    top:auto;
    grid-column:auto;
    grid-row:auto;
    margin:0;
  }
  body[data-mobile-icon-layout] .signal-path::before{display:none}
  body[data-mobile-icon-layout] .services-main{
    grid-column:auto;
    grid-row:auto;
    padding-top:34px;
  }

  /* Concept 01: a compact horizontal signal strip. */
  body[data-mobile-icon-layout="strip"] .signal-path{
    display:flex;
    gap:0;
    padding:10px 0 13px;
    overflow-x:auto;
    border-top:1px solid rgba(214,168,94,.22);
    border-bottom:1px solid rgba(214,168,94,.32);
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  body[data-mobile-icon-layout="strip"] .signal-path::-webkit-scrollbar{display:none}
  body[data-mobile-icon-layout="strip"] .signal-step{
    flex:0 0 112px;
    min-width:112px;
    padding:8px 10px 7px;
    border-right:1px solid rgba(214,168,94,.16);
    scroll-snap-align:start;
  }
  body[data-mobile-icon-layout="strip"] .signal-action{width:100%;gap:8px}
  body[data-mobile-icon-layout="strip"] .signal-screen,
  body[data-mobile-icon-layout="strip"] .signal-globe{width:78px;height:52px;padding:2px}
  body[data-mobile-icon-layout="strip"] .signal-step b{font-size:.78rem;letter-spacing:.13em}
  body[data-mobile-icon-layout="strip"] .signal-step.is-active{
    background:linear-gradient(180deg,rgba(214,168,94,.13),rgba(214,168,94,.025));
    box-shadow:inset 0 -2px var(--service-gold);
  }

  /* Concept 02: a two-column editorial process index. */
  body[data-mobile-icon-layout="index"] .signal-path{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    padding:0;
    border-top:1px solid rgba(214,168,94,.34);
    border-left:1px solid rgba(214,168,94,.34);
  }
  body[data-mobile-icon-layout="index"] .signal-step{
    min-height:142px;
    padding:17px 8px 14px;
    border-right:1px solid rgba(214,168,94,.34);
    border-bottom:1px solid rgba(214,168,94,.34);
  }
  body[data-mobile-icon-layout="index"] .signal-action{width:100%;gap:11px}
  body[data-mobile-icon-layout="index"] .signal-screen,
  body[data-mobile-icon-layout="index"] .signal-globe{width:min(118px,31vw);height:76px;padding:3px}
  body[data-mobile-icon-layout="index"] .signal-step b{font-size:.96rem;letter-spacing:.16em}
  body[data-mobile-icon-layout="index"] .signal-step.is-active{
    background:linear-gradient(135deg,rgba(214,168,94,.16),rgba(214,168,94,.025) 72%);
    box-shadow:inset 0 0 0 2px rgba(240,203,130,.72);
  }

  /* Concept 03: a full-width chapter list with oversized iconography. */
  body[data-mobile-icon-layout="chapters"] .signal-path{
    display:block;
    padding:0;
    border-top:1px solid rgba(214,168,94,.34);
    counter-reset:signal-chapter;
  }
  body[data-mobile-icon-layout="chapters"] .signal-step{
    display:block;
    min-height:102px;
    border-bottom:1px solid rgba(214,168,94,.27);
    counter-increment:signal-chapter;
  }
  body[data-mobile-icon-layout="chapters"] .signal-action{
    position:relative;
    display:grid;
    grid-template-columns:112px 1fr 42px;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:102px;
    padding:10px 8px 10px 0;
    text-align:left;
  }
  body[data-mobile-icon-layout="chapters"] .signal-action::after{
    content:counter(signal-chapter,decimal-leading-zero);
    color:rgba(214,168,94,.42);
    font:500 1.2rem/1 "Barlow Condensed",sans-serif;
    letter-spacing:.08em;
    text-align:right;
  }
  body[data-mobile-icon-layout="chapters"] .signal-screen,
  body[data-mobile-icon-layout="chapters"] .signal-globe{width:104px;height:72px;padding:2px}
  body[data-mobile-icon-layout="chapters"] .signal-step b{font-size:1.18rem;letter-spacing:.18em}
  body[data-mobile-icon-layout="chapters"] .signal-step.is-active{
    background:linear-gradient(90deg,rgba(214,168,94,.16),transparent 72%);
    box-shadow:inset 3px 0 var(--service-gold);
  }
  body[data-mobile-icon-layout="chapters"] .signal-step.is-active .signal-action::after{color:#f0cb82}

  /* Concept 04: the service menu itself becomes the illustrated accordion. */
  body[data-mobile-icon-layout="accordion"] .signal-path{display:none}
  body[data-mobile-icon-layout="accordion"] .services-main{padding-top:8px}
  body[data-mobile-icon-layout="accordion"] .service-selector{
    border-top:1px solid rgba(214,168,94,.34);
  }
  body[data-mobile-icon-layout="accordion"] .service-option{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:18px;
    min-height:104px;
    padding:12px 16px 12px 8px;
    border:0;
    border-bottom:1px solid rgba(214,168,94,.27);
    border-radius:0;
    background:transparent;
    transform:none;
  }
  body[data-mobile-icon-layout="accordion"] .service-option:hover,
  body[data-mobile-icon-layout="accordion"] .service-option:focus-visible,
  body[data-mobile-icon-layout="accordion"] .service-option.is-active{
    border-color:rgba(214,168,94,.42);
    background:linear-gradient(90deg,rgba(214,168,94,.15),rgba(214,168,94,.02) 76%);
    box-shadow:inset 3px 0 var(--service-gold);
    transform:none;
  }
  body[data-mobile-icon-layout="accordion"] .service-option-icon{
    display:grid;
    place-items:center;
    width:92px;
    height:68px;
    padding:2px;
    color:var(--service-gold);
    background:transparent;
  }
  body[data-mobile-icon-layout="accordion"] .service-option-icon svg{
    width:100%;
    height:100%;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  body[data-mobile-icon-layout="accordion"] .service-option-icon .signal-led{fill:currentColor;stroke:currentColor}
  body[data-mobile-icon-layout="accordion"] .service-option>.service-bullet{display:none}
  body[data-mobile-icon-layout="accordion"] .service-option>span:last-child{
    align-self:center;
    color:var(--service-cream);
    font-size:1.04rem;
    letter-spacing:.14em;
  }
  body[data-mobile-icon-layout="accordion"] .service-option.is-active .service-option-icon{
    color:#f0cb82;
    filter:drop-shadow(0 0 10px rgba(214,168,94,.3));
  }
  body[data-mobile-icon-layout="accordion"] .service-selector>.service-stage{
    border-top:1px solid rgba(214,168,94,.62);
  }
  body[data-mobile-icon-layout="accordion"] .service-selector>.service-detail{
    margin-bottom:0;
  }
}
@media(max-width:380px){
  .services-shell{grid-template-columns:minmax(0,1fr) 62px;column-gap:8px}
  .signal-path{gap:15px}
  .signal-screen,.signal-globe{width:54px;height:39px}
  .signal-step b{font-size:.6rem;letter-spacing:.08em}
  .services-copy h1{font-size:clamp(3.35rem,17vw,4rem)}
}
@media(prefers-reduced-motion:reduce){.service-option,.service-detail,.service-image-wrap img{transition:none}}
