/* ==========================================================================
   NickShana — services.css: the service pages (light on script, fast to load)
   Type: Gloock (display), Schibsted Grotesk (text), General Sans (wordmark)
   ========================================================================== */
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --night: #0D0C0A; --coal: #16130F; --cream: #F4EFE4; --lume: #F2A65A;
  --dim: rgba(244, 239, 228, .66); --line: rgba(244, 239, 228, .16);
  --f-disp: "Gloock", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-logo: "General Sans", "Schibsted Grotesk", Arial, sans-serif;
  --gut: clamp(16px, 3.2vw, 52px); --gap: clamp(12px, 1.6vw, 28px); --sec: clamp(72px, 9vw, 150px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 1.0625rem/1.55 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lume); outline-offset: 3px; }
.u-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.u-link:hover { text-decoration-color: currentColor; }
.ring-link { display: inline-flex; align-items: center; gap: .62em; font-weight: 600; text-decoration: none; }
.ring-link i { width: 1.3em; height: 1.3em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .5s var(--ease), box-shadow .5s, background .5s; }
.ring-link:hover i { transform: scale(1.18); box-shadow: inset 0 0 0 1.5px var(--lume), 0 0 16px 3px rgba(242, 166, 90, .55); }

.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gut) 18px; background: linear-gradient(var(--night) 60%, rgba(13, 12, 10, 0)); font-weight: 500; }
.brand { font: 400 clamp(1.3rem, 1.7vw, 1.6rem)/1 var(--f-logo); letter-spacing: -.02em; text-decoration: none; }

.s-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: center; padding: clamp(40px, 6vw, 90px) var(--gut) var(--sec); }
.s-hero-txt { grid-column: 1 / span 6; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; font-size: .88rem; color: var(--dim); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cream); }
h1 { margin-top: 18px; font: 400 clamp(2.6rem, 5.6vw, 6rem)/.95 var(--f-disp); letter-spacing: -.028em; }
.lead { margin-top: 22px; max-width: 46ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--dim); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 30px; }
.s-media { grid-column: 8 / -1; }
.s-media img, .s-media video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
figcaption { margin-top: 10px; font-size: .85rem; color: var(--dim); }

.s-what, .s-work, .s-how, .s-faq { padding: 0 var(--gut) var(--sec); }
h2 { font: 400 clamp(2rem, 3.8vw, 3.8rem)/1 var(--f-disp); letter-spacing: -.02em; border-top: 1px solid var(--line); padding-top: 28px; }
.s-items { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px var(--gap); }
.s-items h3, .s-how h3 { font: 400 clamp(1.3rem, 1.7vw, 1.7rem)/1.1 var(--f-disp); color: var(--lume); }
.s-items p, .s-how p { margin-top: 8px; color: var(--dim); max-width: 38ch; }
.s-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.s-grid a { display: block; overflow: hidden; border-radius: 3px; background: var(--coal); }
.s-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.s-grid a:hover img { transform: scale(1.04); }
.more { margin-top: 24px; }
.s-how ol { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px var(--gap); counter-reset: step; }
.s-faq details { max-width: 60rem; border-bottom: 1px solid var(--line); }
.s-faq details:first-of-type { margin-top: 20px; }
.s-faq summary { cursor: pointer; list-style: none; padding: 20px 0; font: 400 clamp(1.2rem, 1.6vw, 1.5rem)/1.2 var(--f-disp); display: flex; justify-content: space-between; gap: 20px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; font-family: var(--f-text); color: var(--lume); transition: transform .4s var(--ease); }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq details p { padding-bottom: 22px; color: var(--dim); max-width: 60ch; }
.s-cta { position: relative; overflow: hidden; padding: var(--sec) var(--gut); background: #1A120B; }
.s-cta::before { content: ""; position: absolute; left: 70%; top: 40%; width: 80vmax; height: 80vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(242, 166, 90, .28), transparent 60%); pointer-events: none; }
.s-cta > * { position: relative; }
.s-cta h2 { border: 0; padding: 0; font-size: clamp(2.4rem, 5.4vw, 5.6rem); max-width: 14ch; }
.s-cta p { margin-top: 18px; color: var(--dim); }
.direct { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 500; color: var(--cream) !important; }
.s-foot { padding: 48px var(--gut) calc(env(safe-area-inset-bottom, 0px) + 32px); display: grid; gap: 14px; font-size: .95rem; }
.s-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.s-foot nav a { text-decoration: none; opacity: .75; }
.s-foot nav a:hover, .s-foot nav a[aria-current="page"] { opacity: 1; color: var(--lume); }
.s-foot .fine { font-size: .82rem; color: var(--dim); }

@media (max-width: 900px) {
  .s-hero-txt, .s-media { grid-column: 1 / -1; }
  .s-media { max-width: 460px; }
  .s-items, .s-grid, .s-how ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .s-items, .s-how ol { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }