/* ==========================================================================
   Grafico — service pages (/uslugi/, /uslugi/{service}/)
   Same universe as the homepage (NIGHT/COAL/IVORY/CRIMSON, Satoshi,
   selective Newsreader, mark-derived geometry) but deliberately calmer —
   the homepage is the spectacle, these pages deepen trust and
   understanding. Enqueued only on service views (inc/service-assets.php).

   Section styles only (`sections` layer). Tokens, element reset, header,
   footer and the primary CTA (.btn-primary) live in base.css.
   Phase 6 (docs/rebuild/33-SERVICES-PHASE6.md): archive = .svc-*,
   single = .service-*. No decorative numbering, no card grids.
   ========================================================================== */
@layer sections {
body.grafico-services{line-height:1.15}
body.grafico-services .media-pic{display:contents}
body.grafico-services :is(.service-section,.svc-head,.svc-pillar,.svc-start,.service-hero,.service-close) p{line-height:1.55}

/* shared small pieces */
.service-breadcrumb{font-size:.78rem;color:var(--smoke);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.service-breadcrumb a:hover{color:currentColor;text-decoration:underline}
.service-hero--ivory .service-breadcrumb,.svc-head .service-breadcrumb{color:var(--ash)}
.service-hero-actions,.svc-head-actions{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.75rem}
.service-hero-link{font-size:.95rem;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:.15rem;transition:color .18s ease,border-color .18s ease}
.service-hero--night .service-hero-link{color:var(--ivory)}
.service-hero--night .service-hero-link:hover{color:var(--smoke)}
.service-hero--ivory .service-hero-link:hover,.svc-head .service-hero-link:hover,.svc-start .service-hero-link:hover{color:var(--crimson)}
.service-inline-link{font-size:.9rem;border-bottom:1px solid rgba(13,13,12,.35);padding-bottom:.1rem;transition:color .18s ease,border-color .18s ease}
.service-inline-link:hover{color:var(--crimson);border-color:currentColor}

/* ==========================================================================
   /uslugi/ — three pillars
   ========================================================================== */
.svc-head{background:var(--ivory);color:var(--night);padding:8.5rem 0 4.5rem}
.svc-head-inner{max-width:88rem;margin:0 auto;padding:0 var(--edge);display:grid;gap:1.5rem}
.svc-head h1{font-weight:900;font-size:clamp(2.3rem,6.2vw,5.2rem);letter-spacing:-.03em;line-height:.98;max-width:15ch;margin-top:1.1rem}
.svc-head-lead{font-size:var(--fs-lead);color:var(--ash);max-width:40ch}
@media (min-width:64rem){
  .svc-head-inner{grid-template-columns:7fr 5fr;column-gap:4rem;align-items:end}
  .svc-head .service-breadcrumb{grid-column:1 / -1}
  .svc-head h1{margin-top:0}
}

.svc-pillar{padding:5.5rem 0}
.svc-pillar--night{background:var(--night);color:var(--ivory)}
.svc-pillar--crimson{background:var(--crimson);color:var(--ivory)}
.svc-pillar--ivory{background:var(--ivory);color:var(--night)}
.svc-pillar-inner{max-width:88rem;margin:0 auto;padding:0 var(--edge);display:grid;gap:3rem}
.svc-pillar-lead h2{font-weight:800;font-size:clamp(2rem,4.2vw,3.5rem);letter-spacing:-.025em;line-height:1.02}
.svc-pillar-lead>p{margin-top:1.1rem;max-width:34ch;font-size:1.05rem;opacity:.86}
.svc-pillar--night .svc-pillar-lead>p{color:rgba(242,239,230,.78);opacity:1}
.svc-pillar--ivory .svc-pillar-lead>p{color:var(--ash);opacity:1}
.svc-pillar-hub{display:inline-block;margin-top:1.4rem;font-size:.9rem;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:.1rem;transition:opacity .18s ease}
.svc-pillar-hub:hover{opacity:.7}
.svc-pillar-visual{display:block;margin-top:2.5rem;max-width:30rem}
.svc-pillar-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--coal)}
.svc-pillar-media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-lock)}
.svc-pillar-visual:hover .media-img{transform:scale(1.025)}
.svc-pillar-caption{display:block;margin-top:.75rem;font-size:.85rem;opacity:.8}
.svc-pillar-visual:hover .svc-pillar-caption{text-decoration:underline;text-underline-offset:.2em}

.svc-rows{border-top:1px solid currentColor;border-top-color:rgba(242,239,230,.22);align-self:start}
.svc-pillar--ivory .svc-rows{border-top-color:rgba(13,13,12,.18)}
.svc-row{display:grid;grid-template-columns:1fr auto;column-gap:1.5rem;row-gap:.4rem;align-items:center;padding:1.7rem 0;border-bottom:1px solid rgba(242,239,230,.22);position:relative;transition:padding-left .3s var(--ease-lock)}
.svc-pillar--ivory .svc-row{border-bottom-color:rgba(13,13,12,.18)}
.svc-row h3{font-weight:700;font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.015em;line-height:1.1}
.svc-row p{grid-column:1;font-size:.98rem;max-width:46ch;color:rgba(242,239,230,.78)}
.svc-pillar--ivory .svc-row p{color:var(--ash)}
/* crimson pillar: ivory at .78 / .8 gave 4.02:1 and 4.16:1 (WCAG 1.4.3); .92 = 5.0:1 (Phase 11Z) */
.svc-pillar--crimson .svc-row p{color:rgba(242,239,230,.92)}
.svc-pillar--crimson .svc-pillar-caption{opacity:.92}
.svc-row-go{grid-row:1 / span 2;grid-column:2;font-size:1.3rem;transition:transform .25s var(--ease-lock)}
.svc-row::before{content:"";position:absolute;left:-1.05rem;top:50%;width:.6rem;height:.7rem;margin-top:-.35rem;background:currentColor;clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);opacity:0;transition:opacity .25s ease}
.svc-row:hover,.svc-row:focus-visible{padding-left:1.1rem}
.svc-row:hover::before,.svc-row:focus-visible::before{opacity:1}
.svc-row:hover .svc-row-go,.svc-row:focus-visible .svc-row-go{transform:translateX(.3rem)}
@media (min-width:64rem){
  .svc-pillar-inner{grid-template-columns:5fr 7fr;column-gap:5rem;align-items:start}
  .svc-pillar.is-flipped .svc-pillar-lead{order:2}
  .svc-pillar.is-flipped .svc-pillar-inner{grid-template-columns:7fr 5fr}
  .svc-pillar.is-flipped .svc-pillar-visual{margin-left:auto}
}
@media (max-width:63.99rem){
  .svc-pillar{padding:4rem 0}
  .svc-row::before{display:none}
  .svc-row:hover,.svc-row:focus-visible{padding-left:0}
}

.svc-start{background:var(--ivory);color:var(--night);padding:6rem 0}
.svc-start-inner{max-width:88rem;margin:0 auto;padding:0 var(--edge)}
.svc-start h2{font-weight:800;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em;max-width:18ch;line-height:1.05}
.svc-start p{margin-top:1.1rem;max-width:48ch;color:var(--ash)}

/* ==========================================================================
   /uslugi/{service}/ — hero (Phase 6H)
   Two regions in one grid, no canvas:
     LEFT   the service introduction (breadcrumb at the top, headline + lead + actions at the bottom);
     RIGHT  a composition of the service's real project work (inc/service-hero.php): 1 to 4 artworks at their
            real aspect ratios, laid out as aligned rows and stacks, sized by width AND height so there is no
            empty frame around it; a caption line of real links sits directly under it.
   The column split follows the material: a single artwork gets a narrower media column and the text more
   room, a multi-artwork composition gets about half. Services without project material show the official
   brand symbol on a small bounded frame.
   The media never overlaps the text: they are separate grid cells with a real gutter.
   ========================================================================== */
.service-hero{position:relative;overflow:hidden;--hero-line:rgba(13,13,12,.16)}
.service-hero--night{background:var(--night);color:var(--ivory);--hero-line:rgba(242,239,230,.24)}
.service-hero--ivory{background:var(--ivory);color:var(--night)}
.service-hero-inner{max-width:88rem;margin:0 auto;padding:7rem var(--edge) 3rem;position:relative;z-index:1;display:grid;gap:2.5rem}
.service-hero-copy{display:flex;flex-direction:column;gap:2.75rem;min-width:0}
.service-hero h1{font-weight:900;font-size:clamp(2rem,3.4vw,3.4rem);letter-spacing:-.028em;line-height:1.04;max-width:19ch;text-wrap:balance}
.service-hero-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);max-width:40ch}
.service-hero--night .service-hero-lead{color:rgba(242,239,230,.78)}
.service-hero--ivory .service-hero-lead{color:var(--ash)}

/* the media column */
.service-hero,.service-direction{--hmax:min(60vh,36rem)}
.service-hero-media{min-width:0;--hcR:var(--mR,1);--hcW:min(100%,38rem)}
.hc{position:relative;width:var(--hcW);aspect-ratio:var(--hcR)}
.hc-fig{position:absolute;margin:0;left:calc(var(--mx,0) * 1%);top:calc(var(--my,0) * 1%);width:calc(var(--mw,0) * 1%);aspect-ratio:var(--ar)}
.hc-fig[data-m="0"]{display:none}
.hc-fig .media-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.service-hero--night .hc-fig,.service-direction--night .hc-fig{box-shadow:0 0 0 1px rgba(242,239,230,.16),0 1px 2px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.42)}
.service-hero--ivory .hc-fig,.service-direction--ivory .hc-fig{box-shadow:0 0 0 1px rgba(13,13,12,.1),0 1px 2px rgba(13,13,12,.08),0 14px 36px rgba(13,13,12,.14)}
/* a mat for transparent logo files (ground and padding set per artwork) */
.hc-fig.is-mat{background:var(--ground)}
.hc-fig.is-mat .media-img{inset:var(--pad,0);width:calc(100% - 2 * var(--pad,0%));height:calc(100% - 2 * var(--pad,0%));object-fit:contain}
.hc-label{position:absolute;left:0;bottom:0;padding:.4rem .6rem;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--night);background:var(--ivory);box-shadow:0 0 0 1px rgba(13,13,12,.16)}
.hc-fig.is-dark .hc-label{color:var(--ivory);background:var(--night);box-shadow:0 0 0 1px rgba(242,239,230,.2)}

/* caption: the project the composition comes from, directly under it */
.hc-cap{display:flex;flex-wrap:wrap;gap:.2rem 1.75rem;width:var(--hcW);margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--hero-line);font-size:.9rem;line-height:1.35}
.hc-cap a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;padding:.25rem 0;transition:color .18s ease}
.hc-cap-brand{font-weight:800}
.service-hero--night .hc-cap-title,.service-direction--night .hc-cap-title{color:rgba(242,239,230,.7)}
.service-hero--ivory .hc-cap-title,.service-direction--ivory .hc-cap-title{color:var(--ash)}
.hc-cap-go{transition:transform .25s var(--ease-lock)}
.hc-cap a:hover .hc-cap-title,.hc-cap a:focus-visible .hc-cap-title{color:currentColor}
.hc-cap a:hover .hc-cap-go,.hc-cap a:focus-visible .hc-cap-go{transform:translateX(.25rem)}

/* no project material: the official symbol on a small bounded frame */
.hc-symbol{width:min(100%,24rem);aspect-ratio:2 / 1;display:grid;place-items:center}
.service-hero--night .hc-symbol{background:var(--coal)}
.service-hero--ivory .hc-symbol{background:color-mix(in srgb,var(--night) 7%,var(--ivory))}
.hc-symbol-mark{display:block;height:64%;width:auto;aspect-ratio:100 / 104;flex:none}
.service-hero--night .brand-symbol__upper{fill:var(--ivory)}
.service-hero--ivory .brand-symbol__upper{fill:var(--night)}
.service-hero .brand-symbol__lower{fill:var(--crimson)}

@media (min-width:48rem){
  .service-hero-media{--hcR:var(--R,1);--hcW:min(100%,40rem)}
  .hc-fig{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%)}
  .hc-fig[data-m="0"]{display:block}
}
@media (min-width:64rem){
  .service-hero{min-height:min(84vh,46rem);display:flex}
  .service-hero-inner{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,min(var(--media-col,48%),calc(var(--hmax) * var(--R,1))));column-gap:clamp(3rem,5vw,6rem);padding-top:8.5rem;padding-bottom:4.5rem;align-items:stretch}
  .has-media--single{--media-col:38%}
  .has-media--multi{--media-col:50%}
  .has-symbol{--media-col:34%}
  .hc-symbol{aspect-ratio:5 / 6}
  .hc-symbol-mark{height:42%}
  .service-hero-copy{justify-content:space-between}
  .service-hero-media{--hcW:100%;align-self:end}
}

/* ==========================================================================
   Hub: compact introduction with the two directions as the selector, then one band per direction
   ========================================================================== */
.service-hero--hub .service-hero-inner{display:grid;gap:3rem;padding-bottom:4rem}
.service-choose{border-top:1px solid rgba(13,13,12,.18);align-self:end}
.service-choose a{display:grid;grid-template-columns:1fr auto;column-gap:1.5rem;row-gap:.35rem;align-items:center;padding:1.6rem 0;border-bottom:1px solid rgba(13,13,12,.18);transition:padding-left .3s var(--ease-lock)}
.service-choose-name{font-weight:900;font-size:clamp(1.7rem,3.2vw,2.8rem);letter-spacing:-.028em;line-height:1.02;transition:color .18s ease}
.service-choose-line{grid-column:1;color:var(--ash);max-width:40ch;font-size:1rem}
.service-choose-go{grid-row:1 / span 2;grid-column:2;font-size:1.5rem;transition:transform .25s var(--ease-lock),color .18s ease}
.service-choose a:hover .service-choose-name,.service-choose a:focus-visible .service-choose-name{color:var(--crimson)}
.service-choose a:hover .service-choose-go,.service-choose a:focus-visible .service-choose-go{transform:translateX(.35rem);color:var(--crimson)}
@media (min-width:64rem){
  .service-hero--hub{min-height:0;display:block}
  .service-hero--hub .service-hero-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(4rem,7vw,8rem);align-items:end;padding-top:9rem;padding-bottom:4.5rem}
  .service-hero--hub .service-hero-copy{max-width:none;gap:4rem}
}

/* one band per direction: copy on the page surface, a composition of real work beside it (the same engine as the
   service heroes, no canvas); the second band is mirrored */
.service-direction{position:relative;overflow:hidden}
.service-direction--night{background:var(--night);color:var(--ivory);--dir-fg2:rgba(242,239,230,.78);--dir-line:rgba(242,239,230,.22);--hero-line:rgba(242,239,230,.24)}
.service-direction--ivory{background:var(--ivory);color:var(--night);--dir-fg2:var(--ash);--dir-line:rgba(13,13,12,.18);--hero-line:rgba(13,13,12,.16)}
.service-direction-inner{max-width:88rem;margin:0 auto;padding:4.5rem var(--edge) 2.5rem}
.service-direction-copy h2{font-weight:900;font-size:clamp(2.2rem,4.2vw,3.7rem);letter-spacing:-.03em;line-height:.98}
.service-direction-lead{margin-top:1.1rem;font-size:var(--fs-lead);max-width:34ch;color:var(--dir-fg2)}
.service-direction-list{margin-top:2rem;border-top:1px solid var(--dir-line);max-width:34rem}
.service-direction-list li{padding:.85rem 0;border-bottom:1px solid var(--dir-line);font-weight:600;font-size:1.05rem;letter-spacing:-.005em}
.service-direction-go{display:inline-block;margin-top:2rem;font-size:1rem;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:.15rem;transition:opacity .18s ease}
.service-direction-go:hover{opacity:.72}
.service-direction-media{padding:0 var(--edge) 4rem}
@media (min-width:64rem){
  .service-direction{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(48%,calc(var(--hmax) * var(--R,1))));column-gap:clamp(3rem,5vw,6rem);align-items:center;padding:5.5rem max(var(--edge),(100vw - 88rem)/2 + var(--edge))}
  .service-direction-inner{max-width:none;margin:0;padding:0}
  .service-direction-media{padding:0}
  .service-direction.is-mirrored{grid-template-columns:minmax(0,min(48%,calc(var(--hmax) * var(--R,1)))) minmax(0,1fr)}
  .service-direction.is-mirrored .service-direction-media{order:-1}
}

/* grouped scope (services whose range is wider than their portfolio) */
.service-scope-groups{margin-top:2.25rem;border-top:1px solid rgba(13,13,12,.18)}
.service-scope-group{display:grid;gap:.9rem;padding:1.5rem 0;border-bottom:1px solid rgba(13,13,12,.18)}
.service-scope-group h3{font-weight:800;font-size:1.25rem;letter-spacing:-.012em}
.service-scope-group ul{color:var(--ash)}
.service-scope-group li{padding-left:1.1rem;position:relative;margin-bottom:.4rem;break-inside:avoid}
.service-scope-group li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.55rem;background:var(--crimson);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.service-scope-note{margin-top:1.75rem;max-width:62ch;color:var(--ash)}
@media (min-width:56rem){
  .service-scope-group{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:3rem;align-items:start}
  .service-scope-group ul{columns:2;column-gap:2.5rem}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.service-section{padding:5.5rem 0}
.service-section-ivory{background:var(--ivory);color:var(--night)}
.service-section-night{background:var(--night);color:var(--ivory)}
.service-section-inner{max-width:64rem;margin:0 auto;padding:0 var(--edge)}
.service-section-inner-wide{max-width:88rem;margin:0 auto;padding:0 var(--edge)}
.service-section h2{font-weight:800;font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.022em;line-height:1.06;max-width:22ch}
@media (max-width:63.99rem){.service-section{padding:4rem 0}}

/* problem */
.service-problem{padding-bottom:3rem}
.service-problem-grid{display:grid;gap:1.75rem}
.service-problem-body{display:grid;gap:1.1rem;max-width:56ch;font-size:1.08rem;color:var(--ash)}
@media (min-width:64rem){
  .service-problem-grid{grid-template-columns:7fr 5fr;column-gap:5rem;align-items:start}
  .service-problem h2{max-width:20ch}
  .service-problem-body{padding-top:.5rem}
}

/* what we deliver */
.service-delivers{padding-top:3rem}
.service-delivers h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.service-delivers-list{margin-top:2rem;border-top:1px solid rgba(13,13,12,.18)}
.service-delivers-row{display:grid;gap:.35rem;padding:1.3rem 0;border-bottom:1px solid rgba(13,13,12,.18)}
.service-delivers-row dt{font-weight:700;font-size:1.12rem;letter-spacing:-.005em}
.service-delivers-row dd{margin:0;color:var(--ash);max-width:56ch}
@media (min-width:56rem){
  .service-delivers-row{grid-template-columns:5fr 7fr;column-gap:3rem;align-items:baseline}
}

/* kiedy warto */
.service-when-grid{display:grid;gap:2.5rem}
.service-when-head p{margin-top:1.1rem;max-width:30ch;color:rgba(242,239,230,.72)}
.service-when h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.service-when-list{border-top:1px solid rgba(242,239,230,.2)}
.service-when-item{padding:1.7rem 0;border-bottom:1px solid rgba(242,239,230,.2);display:grid;gap:.6rem;justify-items:start}
.service-when-item h3{font-weight:700;font-size:clamp(1.25rem,2.1vw,1.7rem);letter-spacing:-.012em;line-height:1.15}
.service-when-item p{max-width:54ch;color:rgba(242,239,230,.74)}
.service-when-link{font-size:.92rem;font-weight:500;border-bottom:1px solid rgba(242,239,230,.45);padding-bottom:.1rem;transition:border-color .18s ease,color .18s ease}
.service-when-link:hover{color:var(--ivory);border-color:var(--ivory)}
.service-when-item.is-alt{border-left:3px solid var(--crimson);padding-left:1.25rem}
.service-when-tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke)}
@media (min-width:64rem){
  .service-when-grid{grid-template-columns:4fr 8fr;column-gap:5rem;align-items:start}
  .service-when-head{position:sticky;top:6.5rem}
}

/* scopes */
.service-scopes-lead{margin-top:1rem;max-width:56ch;color:var(--ash)}
.service-common{margin-top:1.75rem;font-size:.9rem;color:var(--ash)}
.service-common span{font-weight:700;color:var(--night)}
.package-grid{margin-top:2.5rem;display:grid;gap:1px;background:rgba(13,13,12,.15);border:1px solid rgba(13,13,12,.15)}
.package-card{background:var(--ivory);padding:2rem 1.75rem;display:flex;flex-direction:column}
.package-card.is-recommended{background:var(--night);color:var(--ivory)}
.package-flag{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--crimson);font-weight:700;margin-bottom:.75rem}
.package-card.is-recommended .package-flag{color:var(--ivory)}
.package-title{font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.package-inclusions{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem;flex:1}
.package-inclusions li{font-size:.92rem;padding-left:1.15rem;position:relative}
.package-inclusions li::before{content:"";position:absolute;left:0;top:.4rem;width:.55rem;height:.6rem;background:var(--crimson);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.package-card.is-recommended .package-inclusions li::before{background:var(--ivory)}
.package-caveat{margin-top:1rem;font-size:.8rem;font-style:italic;color:var(--ash)}
.package-card.is-recommended .package-caveat{color:var(--smoke)}
.package-cta{margin-top:1.75rem}
@media (min-width:56rem){
  .package-grid{grid-template-columns:repeat(3,1fr)}
  .package-card.is-recommended{transform:scale(1.02)}
}

/* hub: offer list */
.service-offer-list{margin:2rem 0 0;border-top:1px solid rgba(13,13,12,.18)}
.service-offer-list li{border-bottom:1px solid rgba(13,13,12,.18)}
.service-offer-list a{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;align-items:center;padding:1.6rem 0;transition:padding-left .3s var(--ease-lock)}
.service-offer-name{font-weight:700;font-size:clamp(1.35rem,2.6vw,2.1rem);letter-spacing:-.015em}
.service-offer-line{grid-column:1;color:var(--ash);max-width:50ch}
.service-offer-go{grid-row:1 / span 2;grid-column:2;font-size:1.3rem;transition:transform .25s var(--ease-lock)}
.service-offer-list a:hover{padding-left:1rem}
.service-offer-list a:hover .service-offer-go{transform:translateX(.3rem)}
.service-offer-list a:hover .service-offer-name{color:var(--crimson)}
@media (max-width:63.99rem){.service-offer-list a:hover{padding-left:0}}

/* projects */
.service-projects-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin-bottom:3rem}
.service-projects-all{font-size:.92rem;font-weight:500;border-bottom:1px solid rgba(242,239,230,.45);padding-bottom:.1rem;transition:border-color .18s ease}
.service-projects-all:hover{border-color:var(--ivory)}
.service-projects-grid{display:grid;gap:3rem 1.5rem}
.service-project a{display:grid;gap:.4rem;align-content:start}
.service-project-media{display:block;position:relative;overflow:hidden;background:var(--coal);aspect-ratio:4/3;margin-bottom:.6rem}
.service-project-media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-lock)}
.service-project a:hover .media-img{transform:scale(1.025)}
.service-project-title{font-weight:700;font-size:1.2rem;letter-spacing:-.01em;line-height:1.2}
.service-project-meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.service-project-note{color:rgba(242,239,230,.74);font-size:.95rem;max-width:44ch}
.service-project-go{margin-top:.4rem;font-size:.88rem;font-weight:500;border-bottom:1px solid transparent;justify-self:start;transition:border-color .18s ease}
.service-project a:hover .service-project-go{border-color:currentColor}
@media (min-width:64rem){
  .service-projects-grid{grid-template-columns:repeat(12,1fr);align-items:start}
  .service-project--1{grid-column:1 / 8}
  .service-project--2{grid-column:8 / 13;align-self:end}
  .service-project--3{grid-column:2 / 8}
  .service-project--4{grid-column:8 / 13}
  .service-projects-grid[data-count="1"] .service-project--1{grid-column:1 / 10}
  .service-projects-grid[data-count="2"] .service-project--2{align-self:end}
  .service-projects-grid[data-count="4"] .service-project--3{grid-column:1 / 7}
  .service-projects-grid[data-count="4"] .service-project--4{grid-column:7 / 13}
}

/* process */
.service-process-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem}
.service-approach{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid rgba(13,13,12,.18)}
.service-approach-item{padding:1.4rem 0;border-bottom:1px solid rgba(13,13,12,.18);opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s var(--ease-lock)}
.service-approach-item.is-visible{opacity:1;transform:translateY(0)}
/* without JavaScript nothing adds .is-visible: keep the steps readable (Phase 11Z) */
@media (scripting:none){.service-approach-item{opacity:1;transform:none}}
.service-approach-item h3{font-weight:700;font-size:1.08rem;letter-spacing:-.005em}
.service-approach-item p{margin-top:.5rem;color:var(--ash);max-width:34ch}
@media (min-width:64rem){
  .service-approach{grid-template-columns:repeat(4,1fr);column-gap:2.5rem;border-bottom:0}
  .service-approach-item{border-bottom:0}
}

/* related */
.service-related{padding-top:2rem}
.service-related-grid{display:grid;gap:2rem}
.service-related h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.service-related-list{border-top:1px solid rgba(13,13,12,.18)}
.service-related-list a{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid rgba(13,13,12,.18);transition:padding-left .3s var(--ease-lock)}
.service-related-name{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.service-related-why{grid-column:1;color:var(--ash);max-width:48ch}
.service-related-go{grid-row:1 / span 2;grid-column:2;font-size:1.2rem;transition:transform .25s var(--ease-lock)}
.service-related-list a:hover .service-related-name{color:var(--crimson)}
.service-related-list a:hover .service-related-go{transform:translateX(.3rem)}
@media (min-width:64rem){
  .service-related-grid{grid-template-columns:4fr 8fr;column-gap:5rem;align-items:start}
}

/* faq */
.service-faq-section{padding-top:2rem}
.service-faq-grid{display:grid;gap:2rem}
.service-faq-section h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.service-faq{border-top:1px solid rgba(13,13,12,.18)}
.service-faq-item{border-bottom:1px solid rgba(13,13,12,.18)}
.service-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding:1.25rem 0;font-weight:700;font-size:1.05rem;line-height:1.3}
.service-faq-item summary::-webkit-details-marker{display:none}
.service-faq-item summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;flex:none;transition:transform .25s var(--ease-lock)}
.service-faq-item[open] summary::after{transform:rotate(45deg)}
.service-faq-item p{padding:0 0 1.4rem;max-width:58ch;color:var(--ash)}
@media (min-width:64rem){
  .service-faq-grid{grid-template-columns:4fr 8fr;column-gap:5rem;align-items:start}
}

/* closing */
.service-close{position:relative;overflow:hidden;padding:6rem 0}
.service-close-plane{position:absolute;inset:0;background:linear-gradient(135deg,var(--crimson) -10%,var(--deep) 65%,var(--night) 120%)}
.service-close-inner{position:relative;max-width:88rem;margin:0 auto;padding:0 var(--edge)}
.service-close h2{color:var(--ivory);font-weight:800;font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:-.022em;line-height:1.04;max-width:16ch}
.service-close p{color:rgba(242,239,230,.88);margin-top:1.1rem;font-size:1.05rem;max-width:40ch}
.service-close-actions{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.service-close-ghost{color:rgba(242,239,230,.85);font-size:.92rem;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.service-close-ghost:hover{color:var(--ivory);border-color:currentColor}

@media (prefers-reduced-motion: reduce){
  body.grafico-services *{transition-duration:.001ms !important}
  .service-approach-item{opacity:1;transform:none}
  .svc-pillar-visual:hover .media-img,.service-project a:hover .media-img{transform:none}
}
}