/* SERVICES */
/* Bento index — one dominant block (controlled disruption) */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.bento__i{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:var(--s3);border-radius:var(--radius);background:var(--white);color:var(--midnight);border:1px solid var(--mist);overflow:hidden;isolation:isolate;
  transition:background var(--d-mid) var(--e-shift),color var(--d-mid) var(--e-shift),border-color var(--d-mid)}
.bento__i[data-theme="blue"]{grid-column:1/-1;min-height:220px;background:var(--blue);color:var(--white);border-color:var(--blue)}
.bento__n{font-weight:600;font-size:1.375rem;line-height:1;color:var(--blue);margin-bottom:auto;transition:color var(--d-mid)}
.bento__i[data-theme="blue"] .bento__n{color:var(--white);font-size:clamp(1.5625rem,2.33vw,1.9375rem)}
.bento__i strong{font-size:clamp(0.9062rem,1.27vw,1.0938rem);font-weight:600;line-height:1.4}
.bento__i[data-theme="blue"] strong{font-size:clamp(1.25rem,1.77vw,1.5625rem)}
.bento__s{font-size:var(--t-small);color:var(--deep);transition:color var(--d-mid)}
.bento__i[data-theme="blue"] .bento__s{color:var(--mist);font-size:0.875rem}
.bento__a{position:absolute;top:var(--s3);left:var(--s3);width:24px;height:24px;transition:transform var(--d-mid) var(--e-shift)}
.bento__i:hover,.bento__i:focus-visible{background:var(--blue);color:var(--white);border-color:var(--blue)}
.bento__i:hover .bento__n,.bento__i:hover .bento__s,.bento__i:focus-visible .bento__n,.bento__i:focus-visible .bento__s{color:var(--white)}
.bento__i[data-theme="blue"]:hover{background:var(--midnight);border-color:var(--midnight)}
.bento__i:hover .bento__a{transform:rotate(-45deg)}

/* v10 · CATALOG redesign — flat Mist field, white sheets, icon tile per service (same icon family as the
   bento), menu-style price rows (name · detail chip · leader · price), sticky jump-rail on desktop. */
.cat-grid{display:block}
.cat-rail{display:none}
.catalog{display:flex;flex-direction:column;gap:12px}
.acc{background:var(--white);border-radius:var(--radius);overflow:hidden;scroll-margin-top:calc(var(--hdr) + var(--s3));border:1px solid transparent;transition:border-color var(--d-mid)}
.acc:has(.acc__btn[aria-expanded="true"]){border-color:var(--blue)}
.acc__h{margin:0}
.acc__btn{width:100%;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(12px,1.6vw,var(--s3));padding:clamp(14px,1.8vw,var(--s3)) clamp(var(--s2),2.2vw,var(--s4));text-align:start;color:var(--midnight)}
.acc__tile{width:clamp(44px,4vw,56px);aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:var(--mist);color:var(--blue);transition:background var(--d-mid) var(--e-shift),color var(--d-mid) var(--e-shift),transform var(--d-mid) var(--e-shift)}
.acc__svg{width:52%;height:52%}
.acc__num{font-weight:500;font-size:0.8125rem;line-height:1;color:var(--deep);min-width:2ch;font-variant-numeric:tabular-nums}
.acc__t{font-size:clamp(1rem,1.5vw,1.3125rem);font-weight:600;line-height:1.4;transition:color var(--d-fast)}
.acc__btn:hover .acc__t{color:var(--blue)}
.acc__btn:hover .acc__tile{transform:rotate(-6deg)}
.acc__ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--mist);transition:background var(--d-fast),border-color var(--d-fast),color var(--d-fast)}
.acc__btn:hover .acc__ic{border-color:var(--midnight)}
.acc__ic svg{width:18px;height:18px}
.acc__ic .v{transition:transform var(--d-mid) var(--e-shift);transform-origin:center}
.acc__btn[aria-expanded="true"] .acc__tile{background:var(--blue);color:var(--white)}
.acc__btn[aria-expanded="true"] .acc__ic{background:var(--blue);border-color:var(--blue);color:var(--white)}
.acc__btn[aria-expanded="true"] .acc__ic .v{transform:scaleY(0)}
.acc__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--d-mid) var(--e-shift)}
.acc__panel.is-collapsed{grid-template-rows:0fr}
.acc__inner{overflow:hidden;min-height:0;padding-inline:clamp(var(--s2),2.2vw,var(--s4))}
.acc__panel:not(.is-collapsed) .acc__inner{padding-bottom:clamp(var(--s2),2.2vw,var(--s4))}
.acc:target{outline:3px solid var(--blue);outline-offset:-3px}

/* price rows: one shared grid (display:contents) so names, chips and prices align across rows */
.price-table{display:grid;grid-template-columns:fit-content(46%) 1fr auto;width:100%;font-size:0.875rem;border-top:1px solid var(--mist)}
.price-table thead,.price-table tbody,.price-table tr{display:contents}
.price-table th{font-size:0.75rem;font-weight:500;color:var(--deep);text-align:start;padding:12px 0 10px;border-bottom:1px solid var(--mist)}
.price-table th:last-child{text-align:end}
.price-table td{display:flex;align-items:center;padding:16px 0;border-bottom:1px solid var(--mist);line-height:1.6;transition:background var(--d-fast)}
.price-table td:first-child{font-weight:500;padding-inline-end:var(--s2)}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table td:nth-child(2)::after{content:"";flex:1;min-width:var(--s2);margin-inline:14px;border-bottom:1px dashed rgba(0,7,36,.18)}
.price-table td.is-empty{color:rgba(0,7,36,.3)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--mist);color:var(--deep);font-size:0.75rem;font-weight:500;line-height:1.6;white-space:nowrap}
.price-table .price{justify-content:flex-end;gap:5px;white-space:nowrap;color:var(--deep);font-size:0.75rem;font-weight:500}
.price-table .price b{font-size:clamp(1rem,1.25vw,1.125rem);font-weight:600;color:var(--blue);letter-spacing:-.01em}
.price-table tbody tr:hover td:first-child{color:var(--blue)}
.note{margin-top:var(--s2);display:flex;gap:12px;align-items:flex-start;padding:14px 18px;background:var(--mist);border-radius:14px;color:var(--midnight);font-size:0.8125rem;line-height:1.8}
.note__i{flex:none;width:20px;height:20px;margin-top:2px;color:var(--blue)}
.note strong{color:var(--blue);margin-inline-end:6px}

/* desktop: sticky jump-rail (bento's own short labels) + scroll-spy highlight (services.js) */
@media (min-width:1024px){
  .cat-grid{display:grid;grid-template-columns:240px 1fr;gap:var(--s6);align-items:start}
  .cat-rail{display:block;position:sticky;top:calc(var(--hdr) + var(--s4))}
  .cat-rail ol{list-style:none;margin:0;padding:0;border-inline-start:1px solid rgba(0,7,36,.14)}
  .cat-rail a{position:relative;display:flex;align-items:baseline;gap:12px;padding:9px 18px;font-size:0.875rem;font-weight:500;color:var(--deep);transition:color var(--d-fast)}
  .cat-rail a::before{content:"";position:absolute;inset-block:6px;inset-inline-start:-1px;width:2px;background:var(--blue);transform:scaleY(0);transition:transform var(--d-mid) var(--e-shift)}
  .cat-rail .num{font-size:0.75rem;min-width:2ch;color:rgba(0,7,36,.4);font-variant-numeric:tabular-nums;transition:color var(--d-fast)}
  .cat-rail a:hover,.cat-rail a.is-on{color:var(--midnight)}
  .cat-rail a.is-on{font-weight:600}
  .cat-rail a.is-on::before{transform:scaleY(1)}
  .cat-rail a.is-on .num{color:var(--blue)}
}

/* v10 · bento: huge cropped service icon behind each tile (low opacity, brand "huge cropped symbol") */
.bento__bg{position:absolute;z-index:-1;left:-10%;bottom:-24%;width:min(64%,190px);height:auto;aspect-ratio:1;color:var(--blue);opacity:.1;pointer-events:none;
  transition:opacity var(--d-mid),color var(--d-mid),transform var(--d-slow) var(--e-shift)}
.bento__bg *{vector-effect:non-scaling-stroke;stroke-width:1.6px}
.bento__i[data-theme="blue"] .bento__bg{width:min(50%,320px);left:-6%;bottom:-18%;color:var(--white);opacity:.16}
.bento__i:hover .bento__bg,.bento__i:focus-visible .bento__bg{color:var(--white);opacity:.18;transform:rotate(-8deg) scale(1.06)}
@media (hover:none){.bento__i.is-live .bento__bg{color:var(--white);opacity:.18;transform:rotate(-8deg) scale(1.06)}}

@media (max-width:639px){
  .price-table{display:block;border-top:1px solid var(--mist)}
  .price-table thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .price-table tbody{display:block}
  .price-table tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--mist)}
  .price-table tbody tr:last-child{border-bottom:0}
  .price-table td{display:block;padding:0;border:0}
  .price-table td:nth-child(2){grid-column:1;grid-row:2}
  .price-table td:nth-child(2)::after{display:none}
  .price-table td.is-empty{display:none}
  .price-table td.price{grid-column:2;grid-row:1/span 2;align-self:center;display:flex;align-items:baseline}
  .acc__btn{grid-template-columns:auto 1fr auto}
  .acc__num{display:none}
  .bento__i{min-height:132px;padding:var(--s2)}
  .bento__a{top:var(--s2);left:var(--s2)}
}
@media (min-width:640px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento__i[data-theme="blue"]{grid-column:span 2;grid-row:span 2}
}
@media (min-width:1024px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento__i{min-height:160px}
}

/* v3 · touch devices: hover motion → centre-of-viewport trigger (site.js "live" module adds .is-live) */
@media (hover:none){
  .bento__i.is-live{background:var(--blue);color:var(--white);border-color:var(--blue)}
  .bento__i.is-live .bento__n,.bento__i.is-live .bento__s{color:var(--white)}
  .bento__i[data-theme="blue"].is-live{background:var(--midnight);border-color:var(--midnight)}
  .bento__i.is-live .bento__a{transform:rotate(-45deg)}
}