/* Felles for tjenestesidene og casene (/logodesign, /nettside, /seo, /palepop).
   Samme tokens som forsiden. Logoverdier ligger i brand.css. */
:root{
  --sky:#E7EEF5;--hull:#F3EEDD;--ink:#0E1E3A;--muted:#4A5874;
  --stripe:var(--brand-stripe-hi-light);--stripe-2:var(--brand-stripe-lo);
  --fender:#E8502F;--line:rgba(14,30,58,.14);--line-strong:rgba(14,30,58,.55);
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sky:#0F1B30;--hull:#16243D;--ink:#EAE4D0;--muted:#A3B0C8;--stripe:var(--brand-stripe-hi-dark);--fender:#FF6A47;--line:rgba(234,228,208,.16);--line-strong:rgba(234,228,208,.5);color-scheme:dark}}
:root[data-theme="dark"]{--sky:#0F1B30;--hull:#16243D;--ink:#EAE4D0;--muted:#A3B0C8;--stripe:var(--brand-stripe-hi-dark);--fender:#FF6A47;--line:rgba(234,228,208,.16);--line-strong:rgba(234,228,208,.5);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hull);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--fender);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mono{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--sky) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font-family:var(--f-display);font-style:italic;font-weight:850;font-stretch:115%;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo .bs-stripes{--bs-t:3px;width:28px}
.nav ul{display:flex;align-items:center;gap:clamp(12px,2.5vw,28px);list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:.92rem;font-weight:500;white-space:nowrap}
.nav ul a:hover{color:var(--stripe)}
@media (max-width:520px){.nav ul li:first-child{display:none}}
.tema{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap}
.tema:hover{border-color:var(--stripe);color:var(--stripe)}

.rule.bs-stripes{--bs-t:2px;max-width:420px}

/* åpning */
.top{padding-block:clamp(44px,7vw,96px) clamp(32px,5vw,64px)}
.folio{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line-strong)}
.folio a{text-decoration:none}.folio a:hover{color:var(--stripe)}
.top h1{margin:clamp(32px,5vw,64px) 0 0;max-width:16ch;font-family:var(--f-display);font-weight:800;font-stretch:104%;font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.top h1 em{font-style:italic;font-weight:900;font-stretch:122%;color:var(--stripe)}
.top .rule{margin-top:clamp(22px,3vw,36px)}
.lead{margin:clamp(22px,3vw,32px) 0 0;max-width:46ch;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45}

/* innhold */
.block{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.block.alt{background:var(--sky)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px clamp(24px,4vw,64px)}
.split > .mono{color:var(--stripe);padding-top:.5em}
.block h2{margin:0 0 .5em;font-family:var(--f-display);font-style:italic;font-weight:900;font-stretch:118%;font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.02em}
.block p{margin:0 0 1em;max-width:60ch}
.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.list li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:4px 24px;padding-block:14px;border-bottom:1px solid var(--line)}
.list strong{font-family:var(--f-display);font-weight:700;font-stretch:104%}
.list span{color:var(--muted)}
@media (max-width:640px){.split,.list li{grid-template-columns:minmax(0,1fr)}}

/* eksempler */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,3vw,36px)}
.case{margin:0;display:grid;gap:10px;align-content:start}
.case .shot{display:block;border:1px solid var(--line-strong);background:var(--hull);overflow:hidden}
.case .shot img{width:100%;aspect-ratio:1440/900;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case .shot:hover img{transform:scale(1.02)}
.case h3{margin:4px 0 0;font-family:var(--f-display);font-style:italic;font-weight:800;font-stretch:112%;font-size:1.35rem;line-height:1.1}
.case p{margin:0;color:var(--muted)}
.url{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--stripe);text-decoration:none;justify-self:start}
.url:hover{text-decoration:underline}

/* sitat */
.quote{margin:0}
.quote blockquote{margin:0}
.quote p{margin:0 0 .6em;max-width:30ch;font-family:var(--f-display);font-style:italic;font-weight:800;font-stretch:110%;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.18;letter-spacing:-.01em}
.quote .long{margin-top:clamp(18px,2.4vw,28px)}
.quote .long p{max-width:58ch;font-family:var(--f-body);font-style:normal;font-weight:400;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;letter-spacing:0}
.quote figcaption{margin-top:14px;color:var(--muted)}

/* bilder i case */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.gallery .shot{border:1px solid var(--line-strong);overflow:hidden;background:var(--hull);margin:0}
.gallery .g1{grid-column:1/-1}
.gallery .g2{grid-column:1/6}
.gallery .g3{grid-column:6/13;align-self:end}
@media (max-width:640px){.gallery .g2,.gallery .g3{grid-column:1/-1}}

/* kontakt */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--hull)}
.btn:hover{border-color:var(--stripe)}
.btn.primary:hover{background:var(--stripe);color:#fff}
.cta a.tel{font-family:var(--f-mono);font-size:.85rem;text-decoration:none}
.cta a.tel:hover{color:var(--stripe)}

.more{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.more a{text-decoration:none}.more a:hover{color:var(--stripe)}

footer{background:#0B1A33;color:rgba(220,230,245,.55)}
:root[data-theme="dark"] footer{background:#060E1D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) footer{background:#060E1D}}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px}
footer a{text-decoration:none;color:inherit}
footer a:hover{color:rgba(220,230,245,.9)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}