/* ==========================================================================
   Alma Service — style.css
   Design system
   --------------------------------------------------------------------------
   Palette      ink #14161A · gold #C6A052 · tile #EDE6D6 · stone #F3F1EC
                Taken from the business card: near-black ground, brass gold
                accent, warm off-white. Gold NEVER carries text on a light
                background — it only reaches 2.9:1 there. For text on light we
                use --gold-ink #8A6A22 (4.9:1), which passes WCAG AA.
   Display      Archivo 700
   Body         Public Sans 400 / 500 / 600
   Spacing      8px base, section rhythm via --sp
   Signature    the grout grid — four squares, one gold, repeated as the logo
                mark, an eyebrow marker, a placeholder texture and a hover state
   --------------------------------------------------------------------------
   Sections alternate dark and light, the way the two panels of the card do.
   Any element inside .section--dark / .site-head / .site-foot inherits the
   dark token set — see §2b.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted — see README for download + upload instructions)
   -------------------------------------------------------------------------- */
/* Archivo is a pinned 700 instance — the only weight the display face uses,
   and smaller than shipping the variable file for one weight. */
@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* Public Sans is ONE variable file covering 400–700. The body text uses 400,
   500 and 600; three static files would be three downloads, and Google serves
   the identical variable file for each of them anyway. The weight RANGE in the
   descriptor is what makes the browser interpolate — declare a single weight
   here and 500 and 600 render at 400. */
@font-face{
  font-family:"Public Sans";
  src:url("/fonts/publicsans-var.woff2") format("woff2-variations"),
      url("/fonts/publicsans-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* brand */
  --ink:#14161A;
  --ink-2:#1B1E23;
  --ink-3:#23272E;
  --line-dark:#31353C;

  --gold:#C6A052;
  --gold-2:#D9BC7A;      /* brighter — text and icons on dark */
  --gold-deep:#A8843A;
  /* Gold for text on light grounds. #8A6A22 passes on --paper (4.83:1) but
     lands on 4.48:1 against --stone and --gold-tint, which are a shade darker
     — under AA. This value clears 5.7:1 on the darkest of the three, so every
     place the token is used is safe rather than only most of them. */
  --gold-ink:#775A1C;
  --gold-tint:#F7F1E3;

  /* neutrals */
  --body-ink:#22262C;
  /* Muted grey for small text. #6E7278 is 4.63:1 on --paper but only 4.29:1
     on --stone, so any label that happened to sit in a stone section failed
     AA. This clears 5.7:1 on stone. Inside .section--dark the token is
     remapped to a light grey, so dark sections are unaffected. */
  --slate:#63676D;
  --slate-2:#585C62;
  --stone:#F3F1EC;
  --paper:#FBFAF7;
  --tile:#EDE6D6;
  --line:#E3DFD6;
  --line-2:#EEEBE4;
  --white:#fff;

  /* contextual — overridden inside dark blocks */
  --focus:#14161A;

  --font-display:Archivo,"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fs-display:clamp(2.6rem,7vw,5rem);
  --fs-h2:clamp(1.9rem,4vw,3rem);
  --fs-h3:clamp(1.15rem,2vw,1.375rem);
  --fs-lede:clamp(1.075rem,1.6vw,1.25rem);

  --sp:clamp(4rem,9vw,7.5rem);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --wrap-gutter:2.5rem;
  --rad:4px;
  --rad-lg:8px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- 2b. Dark context -------------------------------------------------------
   One switch. Anything nested inside picks up the inverted palette, so the
   same components work on both grounds without variant classes.
   -------------------------------------------------------------------------- */
.section--dark,.site-head,.site-foot,.hero{
  --focus:var(--gold-2);
  --line:var(--line-dark);
  --line-2:#282C33;
  --paper:var(--ink);
  --stone:var(--ink-2);
  --white:var(--ink-3);
  --body-ink:#C8CBCF;
  --slate:#9A9EA4;
  --slate-2:#B3B7BC;
  --gold-ink:var(--gold-2);
  --gold-tint:rgba(198,160,82,.14);

  background:var(--ink);
  color:#C8CBCF;
}
/* Headings on the dark ground. Note --white is remapped above, so this has to
   be a literal #fff. Footer column headings are handled by .site-foot__h. */
.section--dark h1,.section--dark h2,.section--dark h3,
.hero h1,.hero h2,.hero h3,.site-foot__name{color:#fff}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}

body{
  margin:0;
  background:var(--paper);
  color:var(--body-ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
  /* Norwegian compounds get very long — "Personvernerklæring" is one word and
     is wider than a 320px phone at display size. Let them break rather than
     push the whole page sideways. */
  overflow-wrap:break-word;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.25}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

img,svg,video{display:block;max-width:100%}
img{height:auto}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--gold-ink)}

ul,ol{margin:0;padding:0;list-style:none}

em.todo{
  display:inline-block;
  font-style:normal;
  font-size:.8125rem;
  color:var(--gold-ink);
  background:var(--gold-tint);
  border:1px dashed rgba(168,132,58,.5);
  border-radius:var(--rad);
  padding:.15rem .5rem;
  margin-top:.35rem;
}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--gold);color:var(--ink)}

.wrap{width:min(100% - var(--wrap-gutter),1180px);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);padding:.75rem 1.25rem;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   4. Logo mark — gable roof over the four-tile grid
      Same geometry as images/icon.svg. Tiles inherit currentColor, so the
      mark works on any ground; the roof and accent tile stay gold.
   -------------------------------------------------------------------------- */
.mark{flex:none}
.mark__roof{
  fill:none;stroke:var(--gold);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.mark__tile{fill:currentColor}
.mark__tile--gold{fill:var(--gold)}

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(20,22,26,.9);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line-dark);
}
.site-head__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:72px;
}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff}
.brand:hover{color:#fff}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);font-size:1.3rem;font-weight:700;
  letter-spacing:.04em;
}
.brand__sub{
  font-size:.625rem;letter-spacing:.34em;color:var(--gold);
  text-transform:uppercase;margin-top:.3rem;
}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem)}
.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav__list a{
  text-decoration:none;font-size:.95rem;font-weight:500;
  color:#C8CBCF;position:relative;padding-block:.4rem;
}
.nav__list a:hover{color:#fff}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list a.is-active::after{transform:scaleX(1)}
.nav__list a.is-active{color:#fff}

/* Language toggle — shows the language you would switch TO, so it stays one
   compact control. A NO|EN pair does not fit beside the logo and the burger
   on a 280px screen. */
.langswitch{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  min-height:44px;padding:0 .55rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  color:#C8CBCF;text-decoration:none;
  border:1px solid var(--line-dark);border-radius:var(--rad);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.langswitch:hover{color:#fff;border-color:var(--gold)}
.langswitch svg{flex:none;color:var(--gold)}

/* DOM order is brand → langswitch → burger → nav, which gives the right tab
   order and puts the burger last on mobile. On desktop the burger is hidden
   and `order` moves the switcher to the far right, after the menu. Visual
   reordering only — tab order still follows the DOM. */
.brand{margin-inline-end:auto}
@media (min-width:900px){
  .site-head__in > .nav{order:2}
  .site-head__in > .langswitch{order:3}
}

/* Below 320px (Galaxy Fold folded, and not much else) the sub-page header runs
   out of room for logo + language toggle + a text button. The logo is already
   a link to the front page, so the button is the one that goes. */
@media (max-width:319px){
  .headnav{display:none}
}

.navtoggle{
  display:none;width:44px;height:44px;border:1px solid var(--line-dark);
  background:var(--ink-3);border-radius:var(--rad);cursor:pointer;
  padding:0;place-items:center;
}
.navtoggle__bar{
  display:block;width:19px;height:2px;background:#fff;
  margin:3.5px auto;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s linear;
}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--gold);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;font-weight:600;
  padding:.9rem 1.6rem;border:1px solid var(--gold);border-radius:var(--rad);
  text-decoration:none;cursor:pointer;
  transition:transform .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--ink);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}

/* Ghost — outline that adapts to whichever ground it sits on */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.section--dark .btn--ghost,.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.btn--sm{padding:.6rem 1rem;font-size:.9rem}
.btn--block{width:100%}

/* --------------------------------------------------------------------------
   7. Section furniture
   -------------------------------------------------------------------------- */
.section{padding-block:var(--sp)}
.section--stone{background:var(--stone);border-block:1px solid var(--line)}
.section--dark{border-block:1px solid var(--line-dark)}

.section__head{max-width:38ch;margin-bottom:1.35rem}
.section__head--wide{max-width:52ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__intro{color:var(--slate-2);font-size:var(--fs-lede);margin-top:1.1rem}

.section__grid{display:grid;gap:clamp(2rem,5vw,4.5rem)}
.section__body{max-width:62ch;color:var(--body-ink)}

/* Blanket insurance against the min-width:auto trap on grid/flex children —
   without this a single long word widens the whole page on a narrow phone. */
.hero__copy,.hero__visual,.section__body,.section__head,
.services > *,.steps > *,.trust > *,.reasons > *,.gallery > *,
.stats > *,.trustbar > *,.faq > *{min-width:0}

/* eyebrow — the grout-grid marker */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;
  /* --slate-2, not --slate: at 12px on the stone background --slate is only
     4.29:1, under the 4.5:1 AA threshold. This went unnoticed on the homepage
     because scroll-reveal keeps the element at opacity:0, so an automated
     audit skips it — the generated landing pages, which do not animate,
     exposed it. */
  text-transform:uppercase;color:var(--slate-2);
  margin:0 0 1.1rem;
}
.eyebrow__tiles{
  display:grid;grid-template-columns:repeat(2,5px);grid-auto-rows:5px;
  gap:2px;flex:none;
}
.eyebrow__tiles i{display:block;width:5px;height:5px;border-radius:1px;background:var(--slate)}
.eyebrow__tiles i:last-child{background:var(--gold)}

.ticks{margin-top:1.6rem;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.9rem;color:var(--body-ink)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:1px;background:var(--gold);
}

/* --------------------------------------------------------------------------
   8. Hero — the dark panel, mirroring the top half of the business card
   -------------------------------------------------------------------------- */
.hero{
  padding-block:clamp(3rem,8vw,6rem) var(--sp);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 70% 0%,#000 0%,transparent 68%);
}
/* the gold wedge from the card */
.hero::after{
  content:"";position:absolute;top:0;right:0;width:38%;height:100%;z-index:0;
  background:linear-gradient(200deg,rgba(198,160,82,.16),transparent 62%);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}

.hero__grid{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
.hero h1{margin-bottom:1.3rem}
.lede{font-size:var(--fs-lede);color:var(--slate-2);max-width:46ch}
.hero__tag{
  font-family:var(--font-display);font-size:1.1rem;color:var(--gold);
  margin-top:1.5rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__note{margin-top:1.6rem;font-size:.9375rem;color:var(--slate)}

/* the strip of quick reassurances under the hero */
.trustbar{
  display:grid;gap:1px;background:var(--line-dark);
  border-top:1px solid var(--line-dark);
  margin-top:clamp(2.5rem,6vw,4rem);
}
.trustbar li{
  background:var(--ink);padding:1.1rem clamp(1.25rem,4vw,2rem);
  display:flex;align-items:center;gap:.7rem;
  font-size:.9375rem;color:#C8CBCF;
}
.trustbar svg{flex:none;color:var(--gold)}

/* --------------------------------------------------------------------------
   9. Image placeholders (replace with real photos — see README)
   -------------------------------------------------------------------------- */
.ph{
  position:relative;margin:0;overflow:hidden;
  background:var(--stone);border:1px solid var(--line);border-radius:var(--rad-lg);
  display:grid;place-items:center;
}
.ph--hero{aspect-ratio:640/800}
.ph--4x3{aspect-ratio:4/3}

/* aspect-ratio landed in iOS 15 / Chrome 88. On anything older the boxes would
   collapse to the height of their caption, so fall back to the padding trick. */
@supports not (aspect-ratio:1/1){
  .ph{height:0;padding-bottom:125%}
  .ph--4x3{padding-bottom:75%}
  .ph__label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
}

.ph__grid{
  position:absolute;inset:0;display:grid;gap:6px;padding:6px;
  grid-template-columns:repeat(3,1fr);
}
.ph--4x3 .ph__grid{grid-template-columns:repeat(4,1fr)}
.ph__grid i{display:block;background:#E8E3DA;border-radius:2px}
.ph__grid i:nth-child(5){background:#E0D6CB}

.ph__label{
  position:relative;z-index:1;text-align:center;
  background:rgba(251,250,247,.94);border:1px dashed var(--slate);
  border-radius:var(--rad);padding:.7rem 1rem;margin:1rem;
  font-size:.8125rem;color:var(--slate-2);line-height:1.45;max-width:88%;
}
.ph__label strong{display:block;font-family:var(--font-display);color:var(--ink);font-size:.9375rem;margin-bottom:.15rem}

/* dark ground variant */
.hero .ph,.section--dark .ph{background:var(--ink-2);border-color:var(--line-dark)}
.hero .ph__grid i,.section--dark .ph__grid i{background:#22262C}
.hero .ph__grid i:nth-child(5),.section--dark .ph__grid i:nth-child(5){background:#2A2F36}
.hero .ph__label,.section--dark .ph__label{
  background:rgba(20,22,26,.88);border-color:var(--slate);color:#B3B7BC;
}
.hero .ph__label strong,.section--dark .ph__label strong{color:#fff}

/* --------------------------------------------------------------------------
   10. Services — ordered by build-up sequence
   -------------------------------------------------------------------------- */
.services{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
.service{
  background:var(--paper);padding:clamp(1.75rem,3vw,2.5rem);
  position:relative;transition:background-color .3s var(--ease);
}
.service:hover{background:var(--white)}
.service__num{
  display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);
  background:var(--gold-tint);border-radius:2px;padding:.2rem .5rem;
  margin-bottom:1.4rem;
}
.service__icon{
  display:block;color:var(--ink);margin-bottom:1.1rem;
  transition:transform .35s var(--ease),color .3s var(--ease);
  will-change:transform;
}
.service:hover .service__icon{transform:translateY(-3px);color:var(--gold-deep)}
.service h3{margin-bottom:.6rem}
.service p{color:var(--body-ink);font-size:.9875rem;margin:0}

.services__foot{margin-top:2rem;color:var(--slate-2)}
.services__foot a{color:var(--gold-ink);font-weight:600}

/* --------------------------------------------------------------------------
   11. Process — how a job actually runs
   -------------------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:clamp(1.5rem,3vw,2rem)}
.step{position:relative;padding-top:1.75rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--font-display);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;color:var(--gold-ink);
}
.step::after{
  content:"";position:absolute;top:.35rem;left:2.6rem;right:0;height:1px;
  background:var(--line);
}
.step h3{margin:.35rem 0 .5rem}
.step p{color:var(--body-ink);font-size:.9375rem;margin:0}
.step__meta{
  display:block;margin-top:.6rem;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate);
}

/* --------------------------------------------------------------------------
   12. Why us + stats
   -------------------------------------------------------------------------- */
.reasons{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.reason{
  background:var(--white);border:1px solid var(--line);border-radius:var(--rad-lg);
  padding:clamp(1.5rem,2.6vw,2rem);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.reason:hover{transform:translateY(-4px);border-color:var(--gold)}
.reason__icon{
  display:grid;place-items:center;width:44px;height:44px;
  background:var(--gold-tint);color:var(--gold-ink);
  border-radius:var(--rad);margin-bottom:1.1rem;
}
.reason h3{margin-bottom:.5rem}
.reason p{color:var(--body-ink);font-size:.9375rem;margin:0}

.stats{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rad-lg);
  margin:clamp(3rem,6vw,4.5rem) 0 0;overflow:hidden;
}
.stat{background:var(--paper);padding:clamp(1.5rem,3vw,2rem);text-align:center;display:flex;flex-direction:column}
.stat__label{order:2;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:.4rem}
.stat__value{
  order:1;margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.25rem,5vw,3.25rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.section--dark .stat__value{color:#fff}

/* --------------------------------------------------------------------------
   13. Trust — credentials and documentation, on the dark ground
   -------------------------------------------------------------------------- */
.trust{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--rad-lg);overflow:hidden}
.trust__item{background:var(--ink-2);padding:clamp(1.35rem,2.6vw,1.75rem)}
.trust__item h3{font-size:1.0625rem;margin-bottom:.45rem;color:#fff}
.trust__item p{margin:0;font-size:.9063rem;color:#B3B7BC}
.trust__ico{
  display:grid;place-items:center;width:38px;height:38px;
  background:rgba(198,160,82,.14);color:var(--gold-2);
  border-radius:var(--rad);margin-bottom:.9rem;
}
.trust__item--pending{background:var(--ink)}
.trust__item--pending .trust__ico{background:rgba(255,255,255,.06);color:var(--slate)}
.trust__item--pending h3{color:#B3B7BC}
.trust__note{margin-top:1.75rem;font-size:.875rem;color:var(--slate)}

.section--dark em.todo{
  background:rgba(198,160,82,.15);
  border-color:rgba(198,160,82,.45);
  color:var(--gold-2);
}

/* --------------------------------------------------------------------------
   14. Gallery
   -------------------------------------------------------------------------- */
.gallery{display:grid;gap:clamp(1rem,2.2vw,1.5rem)}
.gallery li{overflow:hidden;border-radius:var(--rad-lg)}
.gallery .ph{transition:transform .45s var(--ease);will-change:transform}
.gallery li:hover .ph{transform:scale(1.02)}

/* Uploaded photos are cropped to 4:3 on the way in, but enforce it here too —
   a stray portrait photo would otherwise stretch one grid cell and drag the
   whole row out of line. */
.gallery img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .45s var(--ease);will-change:transform;
}
.gallery li:hover img{transform:scale(1.02)}

/* Same reasoning for the hero: the layout reserves a 4:5 box. */
.hero__visual img{
  width:100%;aspect-ratio:640/800;object-fit:cover;
  border-radius:var(--rad-lg);
}

.gallery li.is-clickable img{cursor:zoom-in}
.gallery img:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* --------------------------------------------------------------------------
   14a. Before / after
   A range input does the work: it is draggable, keyboard operable and
   announced to screen readers for free, so there is no custom slider to get
   wrong. It sits invisibly over the image and moves the clip.
   -------------------------------------------------------------------------- */
.bagrid{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:900px){.bagrid{grid-template-columns:repeat(2,1fr)}}

.ba{margin:0;min-width:0}
/* A lone pair in a two-column grid sits in the left half with a hole beside
   it, which reads as a broken layout rather than a deliberate one. Span it
   and cap the width so it centres instead. `:only-child` rather than `:has()`
   so this works in older browsers too. */
.ba:only-child{grid-column:1/-1;max-width:38rem;margin-inline:auto;width:100%}
.ba__stage{
  position:relative;overflow:hidden;
  border-radius:var(--rad-lg);border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--stone);
  /* --split is written by main.js; 50% is the no-JS resting state. */
  --split:50%;
}
.ba__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* clip-path, not a narrower box: both images stay exactly the same size and
   position, and only the visible slice of the "before" changes. Shrinking a
   wrapper instead makes the image inside it resize, so the two halves stop
   lining up and the comparison becomes meaningless. */
.ba__clip{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
}
/* The divider is drawn separately — a border on the clip would be clipped. */
.ba__stage::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--split);
  width:2px;background:var(--gold);z-index:2;pointer-events:none;
}

.ba__tag{
  position:absolute;top:.75rem;z-index:2;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(20,22,26,.78);color:#fff;
  padding:.3rem .6rem;border-radius:2px;pointer-events:none;
}
.ba__tag--before{left:.75rem}
.ba__tag--after{right:.75rem}

/* The real control, stretched over the image and made invisible. */
.ba__range{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;margin:0;
  -webkit-appearance:none;appearance:none;
  background:transparent;cursor:ew-resize;
}
.ba__range:focus{outline:none}
.ba__range:focus-visible + .ba__handle{outline:3px solid var(--focus);outline-offset:2px}
.ba__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:44px;height:100%;background:transparent;cursor:ew-resize;
}
.ba__range::-moz-range-thumb{
  width:44px;height:100%;background:transparent;border:0;cursor:ew-resize;
}

.ba__handle{
  position:absolute;top:50%;left:var(--split);z-index:2;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:var(--gold);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  pointer-events:none;
}
.ba__handle::before,.ba__handle::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-block:5px solid transparent;
}
.ba__handle::before{left:11px;border-right:7px solid var(--ink);margin-top:-5px}
.ba__handle::after{right:11px;border-left:7px solid var(--ink);margin-top:-5px}

.ba__caption{margin:.75rem 0 0;font-size:.9063rem;color:var(--body-ink)}

/* --------------------------------------------------------------------------
   14b. Lightbox
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;justify-items:center;gap:.5rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(10,11,13,.94);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lightbox[hidden]{display:none}
.lightbox__img{
  grid-column:2;grid-row:1;
  max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:var(--rad-lg);
}
.lightbox__caption{
  grid-column:1 / -1;grid-row:2;
  margin:0;text-align:center;color:#C8CBCF;font-size:.9375rem;max-width:60ch;
}
.lightbox__btn{
  font:inherit;line-height:1;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);border-radius:50%;
  width:48px;height:48px;cursor:pointer;
  display:grid;place-items:center;font-size:1.75rem;
}
.lightbox__btn:hover{background:rgba(255,255,255,.18);border-color:var(--gold)}
.lightbox__prev{grid-column:1;grid-row:1}
.lightbox__next{grid-column:3;grid-row:1}
.lightbox__close{
  position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  font-size:1.5rem;
}
/* Stop the page behind scrolling while the lightbox is open */
body.has-lightbox{overflow:hidden}

@media (max-width:600px){
  .lightbox{grid-template-columns:1fr;padding:1rem}
  .lightbox__img{grid-column:1}
  .lightbox__prev{grid-column:1;grid-row:3;justify-self:start}
  .lightbox__next{grid-column:1;grid-row:3;justify-self:end}
  .lightbox__caption{grid-row:2}
}

/* --------------------------------------------------------------------------
   15. FAQ — native <details>, no JavaScript
   -------------------------------------------------------------------------- */
.faq{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;
  max-width:70ch;
}
.faq__item{background:var(--paper)}
.faq__item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem clamp(1.15rem,2.5vw,1.6rem);
  font-family:var(--font-display);font-size:1.0313rem;font-weight:700;
  color:var(--ink);cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:11px;height:11px;margin-top:.42em;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item summary:hover{background:var(--white)}
.faq__body{
  padding:0 clamp(1.15rem,2.5vw,1.6rem) 1.35rem;
  color:var(--body-ink);font-size:.9375rem;max-width:62ch;
}
.faq__body p{margin-bottom:.7em}

/* --------------------------------------------------------------------------
   16. Contact + form
   -------------------------------------------------------------------------- */
.contact{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
/* Grid and flex children default to min-width:auto, which means one long word
   (an e-mail address, say) can force the whole column wider than the screen.
   min-width:0 lets them shrink and wrap instead. */
.contact__info,.contact__formwrap{min-width:0}
.contact__info p{color:var(--body-ink);max-width:46ch}

.contact__list{margin-top:2.25rem;display:grid;gap:1.4rem}
.contact__list li{display:flex;gap:.9rem;align-items:flex-start}
.contact__ico{
  display:grid;place-items:center;flex:none;width:38px;height:38px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--rad);color:var(--gold-ink);
}
.contact__k{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:.1rem}
.contact__list li > span{min-width:0}
.contact__list a{
  position:relative;font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--line);
  /* an e-mail address has no break opportunity — let it break anywhere */
  overflow-wrap:anywhere;
}
.contact__list a:hover{border-color:var(--gold)}
/* Grow the tap area to ~44px without moving the underline off the text. */
.contact__list a::after{content:"";position:absolute;inset:-11px -4px}

.contact__formwrap{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--rad-lg);padding:clamp(1.5rem,3.5vw,2.5rem);
}

.field{margin-bottom:1.15rem}
.field-row{display:grid;gap:1.15rem}
.form label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.4rem}
.req{color:var(--gold-ink)}

.form input,.form select,.form textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  padding:.75rem .9rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.form textarea{resize:vertical;min-height:130px}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--slate)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:3px solid var(--focus);outline-offset:2px;
  background:var(--white);border-color:var(--ink);
}
.form input[aria-invalid="true"],.form select[aria-invalid="true"],.form textarea[aria-invalid="true"]{
  border-color:#B3402A;background:#FBEEEA;
}

.hint{font-size:.8125rem;color:var(--slate);margin:.4rem 0 0}
.opt{font-weight:400;color:var(--slate);text-transform:none;letter-spacing:0}

/* File picker + the list of chosen photos */
.form input[type="file"]{
  padding:.6rem;background:var(--paper);cursor:pointer;
  font-size:.9375rem;
}
.form input[type="file"]::file-selector-button{
  font:inherit;font-weight:600;font-size:.875rem;
  background:var(--ink);color:#fff;border:0;border-radius:var(--rad);
  padding:.45rem .9rem;margin-right:.75rem;cursor:pointer;
}
.form input[type="file"]:hover::file-selector-button{background:var(--ink-2)}

.filelist{display:grid;gap:.35rem;margin:.6rem 0 0;font-size:.8125rem}
.filelist li{
  display:flex;justify-content:space-between;gap:.75rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--rad);padding:.4rem .6rem;
}
.filelist__name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.filelist__size{color:var(--slate);flex:none;font-variant-numeric:tabular-nums}
.err{font-size:.8125rem;color:#9B2F1B;font-weight:600;margin:.4rem 0 0}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{
  margin-top:1rem;padding:.9rem 1rem;border-radius:var(--rad);
  font-size:.9375rem;font-weight:500;border:1px solid transparent;
}
.form__status.is-ok{background:#EAF3EA;border-color:#BBD5BB;color:#1F5127}
.form__status.is-error{background:#FBEEEA;border-color:#E2B9A5;color:#9B2F1B}

.form__legal{margin-top:1rem;font-size:.8125rem;color:var(--slate)}
.form__legal a{color:var(--gold-ink)}

.is-sending .btn[type="submit"]{opacity:.6;pointer-events:none}

/* --------------------------------------------------------------------------
   17. Sticky call bar — mobile only
       Most visitors are on a phone and want to call, not fill in a form.
       Hidden once the contact section is on screen (see main.js).
   -------------------------------------------------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-dark);
  border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom,0);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.callbar__btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem .75rem;text-decoration:none;
  font-size:1rem;font-weight:600;
}
.callbar__btn--call{background:var(--gold);color:var(--ink)}
.callbar__btn--quote{background:var(--ink);color:#fff}
.callbar__btn svg{flex:none}
.callbar.is-hidden{transform:translateY(105%);opacity:0}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-foot{padding-block:clamp(3rem,6vw,4.5rem) 0;font-size:.9375rem}
.site-foot__in{display:grid;gap:2.5rem}
.site-foot__brand .brand{margin-bottom:.9rem}
.site-foot__tag{color:var(--gold);margin:0 0 .8rem}
.site-foot__services{font-size:.8125rem;letter-spacing:.1em;color:#8B8F95;margin:0}
.site-foot__h{font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8B8F95;margin:0 0 1rem}
.site-foot ul{display:grid;gap:.15rem}
.site-foot a{text-decoration:none;border-bottom:1px solid transparent;overflow-wrap:anywhere}
.site-foot a:hover{color:#fff;border-color:var(--gold)}
/* Footer links are standalone navigation, not inline prose, so they need a
   real tap target. There is no visible underline here, so padding is free. */
.site-foot ul a{display:inline-block;padding-block:.6rem}

.site-foot__bar{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  border-top:1px solid var(--line-dark);margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-block:1.5rem;font-size:.8125rem;color:#8B8F95;
}
.site-foot__bar p{margin:0}
.site-foot__bar a{color:#B3B7BC;display:inline-block;padding-block:.75rem}

/* --------------------------------------------------------------------------
   18b. Generated landing pages (services and areas)
   -------------------------------------------------------------------------- */

/* A sub-page heading should not be as loud as the homepage hero. */
.hero--sub{padding-block:clamp(2.25rem,5vw,3.5rem) clamp(2.5rem,6vw,4rem)}
.hero--sub h1{font-size:clamp(2rem,5.5vw,3.5rem);margin-bottom:1rem}
.hero--sub .lede{max-width:56ch}
.hero--sub .hero__actions{margin-top:1.75rem}

.crumbs{
  font-size:.8125rem;color:var(--slate);margin:0 0 1.25rem;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
}
/* WCAG 2.2 AA 2.5.8 wants a 24px minimum target. A breadcrumb is a standalone
   navigation control, not a link inside a sentence, so it does not get the
   inline exception the way the mailto: links in the privacy notice do — it was
   22px tall and had to grow. Padding rather than height so the text stays put. */
.crumbs a{
  color:var(--slate-2);text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:24px;padding-block:2px;
}
.crumbs a:hover{color:#fff;border-color:var(--gold)}

.linkgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
.linkgrid > *{min-width:0}
.linkgrid a{
  display:block;background:var(--paper);padding:clamp(1.1rem,2.4vw,1.5rem);
  text-decoration:none;height:100%;
  transition:background-color .25s var(--ease);
}
.linkgrid a:hover{background:var(--white);color:inherit}
.linkgrid strong{
  display:block;font-family:var(--font-display);font-size:1.0313rem;
  color:var(--ink);margin-bottom:.3rem;
}
.linkgrid a:hover strong{color:var(--gold-ink)}
.linkgrid span{display:block;font-size:.9063rem;color:var(--body-ink)}

.cta{text-align:center;max-width:52ch;margin-inline:auto}
.cta .lede{margin-inline:auto;margin-top:1rem}
.cta .hero__actions{justify-content:center;margin-top:2rem}

@media (min-width:600px){.linkgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.linkgrid{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------------------------------
   19. Standalone pages (personvern, 404)
   -------------------------------------------------------------------------- */
.page{padding-block:clamp(3rem,7vw,5rem)}
/* Deliberately smaller than the hero display size: a legal page does not need
   5rem type, and "Personvernerklæring" at that size does not fit a phone. */
.page h1{font-size:clamp(1.9rem,5.5vw,2.75rem);margin-bottom:1.5rem}
.page__body{max-width:70ch}
.page__body h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:2.5rem 0 .8rem}
.page__body h2:first-of-type{margin-top:2rem}
.page__body ul{display:grid;gap:.5rem;margin:0 0 1.1em}
.page__body ul li{position:relative;padding-left:1.5rem}
.page__body ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:1px;background:var(--gold);
}
.page__updated{font-size:.875rem;color:var(--slate);margin-top:2.5rem}
.page--center{min-height:60vh;display:grid;place-items:center;text-align:center}
.page--center .btn{margin-top:1.75rem}
/* No inline style attributes anywhere — the CSP allows hashed <style> blocks
   but not style="", so every one-off tweak has to live here. */
.page--center .eyebrow{justify-content:center}
.page--center .lede{margin-inline:auto}

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
/* The hidden state is unconditional so there is no flash before main.js runs.
   Without JavaScript nothing would ever reveal itself, so index.html carries a
   <noscript> block that switches these back on — keep the two in step. */
[data-reveal]{opacity:0;transform:translate3d(0,18px,0)}
.js-ready [data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0)}

/* --------------------------------------------------------------------------
   21. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:600px){
  .field-row{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .reasons{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trustbar{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:900px){
  .hero__grid{grid-template-columns:1.15fr .85fr}
  .section__grid{grid-template-columns:.9fr 1.1fr}
  .contact{grid-template-columns:.95fr 1.05fr}
  .steps{grid-template-columns:repeat(4,1fr)}
}

/* The footer carries four columns once the generated service/area links are
   in it — two up at tablet width, four only when there is genuinely room. */
@media (min-width:600px){
  .site-foot__in{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .site-foot__in{grid-template-columns:1.3fr .85fr 1.1fr 1.15fr}
}

@media (min-width:1100px){
  .services{grid-template-columns:repeat(4,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .reasons{grid-template-columns:repeat(4,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
}

/* Mobile navigation + call bar */
@media (max-width:899px){
  .navtoggle{display:grid}
  .nav{
    position:fixed;inset:72px 0 auto;z-index:99;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--line-dark);
    padding:1rem 1.25rem 1.75rem;
    transform:translate3d(0,-14px,0);opacity:0;visibility:hidden;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
    /* vh first as the fallback: dvh is iOS 15.4+ / Chrome 108+, and without a
       max-height a long menu on a short landscape screen cannot be scrolled. */
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav.is-open{transform:translate3d(0,0,0);opacity:1;visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list a{display:block;padding:.95rem .25rem;font-size:1.0625rem;border-bottom:1px solid var(--line-dark)}
  .nav__list a::after{display:none}
  .nav__cta{margin-top:1.25rem;justify-content:center;padding:.85rem 1rem;font-size:1rem}

  .callbar{display:grid}
  /* Reserve room for the bar on the FOOTER, not on body: body padding would
     paint the light page background as a strip under the dark footer. */
  .site-foot{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}

  /* The logo is a link home — give it a full-size tap target. */
  .brand{padding-block:.25rem}
}

/* --------------------------------------------------------------------------
   21b. Small phones
   Verified against 280px (Galaxy Fold, folded), 320px (iPhone SE 1st gen)
   and 360px (the most common Android width).
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  /* 40px of gutter is a lot when the screen is 320px wide */
  :root{--wrap-gutter:1.75rem}

  /* Full-width CTAs are easier to hit than side-by-side ones */
  .hero__actions .btn{width:100%}

  /* Keep "Be om befaring" on one line so the bar stays a predictable height */
  .callbar__btn{font-size:.9375rem;padding-inline:.5rem;gap:.4rem}
}

@media (max-width:480px){
  /* Norwegian compounds are long. Hyphenation is a progressive enhancement —
     overflow-wrap:break-word on headings is the guaranteed safety net. */
  h1,h2,h3,p,.lede,.section__intro,.faq__body{-webkit-hyphens:auto;hyphens:auto}
}

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .btn:hover,.reason:hover,.gallery li:hover .ph,.service:hover .service__icon{transform:none}
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print{
  .site-head,.navtoggle,.hero__actions,.contact__formwrap,.gallery,.callbar{display:none}
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0}
  .hero,.section--dark,.site-foot{background:#fff;color:#000}
  .hero h1,.section--dark h2,.section--dark h3,.site-foot__name{color:#000}
  .hero::before,.hero::after{display:none}
  .section{padding-block:1.5rem}
  .faq__item[open] .faq__body{display:block}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}