/* LÖGFRÆÐIÞJÓNUSTA AKRANESS — shared stylesheet for the homepage and the six practice-area
   subpages. Every font url() below is relative to THIS file (css/site.css).

   2026-09-12: rebuilt around option B, the layout Baldvin chose from /uppsetningar/. The
   watercolour of Akrafjall brings its own paper, so the whole site is paper and ink now:
   no hero scrim, no white-on-photo header, bronze small caps finally on a light ground where
   they pass AA (5.0:1) instead of failing on a photograph (1.7:1). The night ground stays
   for Baldvin's bio, the subpage call to action and the footer, which gives the page rhythm.

   Headline face: Host Grotesk Medium (OFL, Icelandic verified in the cmap). Sindri picked it
   ("J") on 2026-09-12 from two sheets of fourteen faces set in the real hero, over Zalando
   Sans SemiExpanded, which shipped first. Warmer and more open than the other grotesques.
   LÖGFRÆÐIÞJÓNUSTA = 9.97em in it, so every display size below is fitted to that word. */

@font-face{font-family:'Host Grotesk';src:url(../fonts/HostGrotesk-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/InstrumentSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/InstrumentSans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/InstrumentSans-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/InstrumentSerif-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#EFF2F5; --paper-2:#E3E8ED;
  /* ink-3 was #7C8590, 3.4:1 on paper; #626C77 is 4.7:1 and still reads as a label grey */
  --ink:#1B2027; --ink-2:#525C67; --ink-3:#626C77;
  --night:#0C1116; --night-2:#131A21; --night-3:#1A222B;
  --bronze:#8A5D38; --bronze-lift:#C0895C; --bronze-deep:#6E4829;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.23,1,.32,1);
  --display:'Host Grotesk','Instrument Sans',system-ui,sans-serif;
  --gut:clamp(20px,4.6vw,76px); --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--paper);color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(138,93,56,.14)}
h1,h2{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(30px,3.9vw,56px);line-height:1.04}
h2{font-size:clamp(22px,2.6vw,38px);line-height:1.1}
h3{font-size:17px;line-height:1.3;font-weight:500}
p{font-size:16px;line-height:1.5}
.wrap{max-width:var(--maxw);margin-inline:auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.lead{font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:var(--ink-2)}
.on-dark{color:#fff}
.on-dark .lead{color:#AEB6BF}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the skip link is the first tab stop, so it has to be visible when it has focus */
a.sr:focus,a.sr:focus-visible{position:fixed;z-index:200;top:12px;left:12px;width:auto;height:auto;overflow:visible;clip:auto;padding:12px 18px;background:var(--ink,#1B2733);color:#fff;font-size:14px;text-decoration:none;outline:2px solid var(--bronze,#8A6A3E);outline-offset:2px}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.on-dark :focus-visible,footer :focus-visible,.mnav :focus-visible{outline-color:var(--bronze-lift)}
.eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:600;color:var(--bronze)}
.eyebrow a{color:inherit}
.eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}
.on-dark .eyebrow{color:var(--bronze-lift)}

/* Heklusýn drift + mask */
.frame{position:relative;overflow:hidden;width:100%}
.frame-in{position:absolute;inset:-9% 0;will-change:transform}
.frame-in img{width:100%;height:100%;object-fit:cover}
.frame.deep .frame-in{inset:-15% 0}
.mask{overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
/* 100% + .7em, not 108%: capitals in Host Grotesk carry their Icelandic accents above the line
   box, and at 108% the Á/É/Ð accents peeked through the bottom of the mask before the reveal
   fired (seen on an iPhone, 2026-09-14) */
.js .mask > *{transform:translateY(calc(100% + .7em));transition:transform .95s var(--ease)}
.js .mask.in > *{transform:translateY(0)}
.js .mask.d1 > *{transition-delay:.07s}
.js .mask.d2 > *{transition-delay:.14s}
.js .mask.d3 > *{transition-delay:.21s}
.js .mask.d4 > *{transition-delay:.28s}
.drift{will-change:transform}

/* ---------- header: ink on paper, a paper bar once scrolled ----------
   Every page now opens on paper, so the header is ink by default. Scrolled, it gets its own
   paper ground, which keeps it legible over the night sections too. The menu overlay is
   night, so while it is open (html.menu-open, set in site.js) the mark and the X go white. */
.hdr{position:fixed;inset:0 0 auto 0;z-index:1111;border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin-inline:auto;
  padding:14px max(var(--gut),env(safe-area-inset-right)) 14px max(var(--gut),env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:38px;height:38px}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-size:11px;letter-spacing:.15em;font-weight:600;color:var(--ink);text-transform:uppercase;transition:color .3s var(--ease)}
.brand-txt span{font-size:9.5px;letter-spacing:.24em;color:var(--bronze);text-transform:uppercase;margin-top:2px}
.nav{display:flex;gap:28px;align-items:center}
.nav a{font-size:14px;color:rgba(27,32,39,.76);transition:color .2s var(--ease);
  display:inline-flex;align-items:center;min-height:24px;padding:4px 2px}
.nav a:hover{color:var(--ink)}
.hdr-cta{font-size:14px;font-weight:500;color:var(--ink);border:1px solid rgba(27,32,39,.3);
  padding:9px 17px;min-height:24px;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.hdr-cta:hover{background:rgba(27,32,39,.07);border-color:rgba(27,32,39,.5)}
.hdr.scrolled{background:rgba(239,242,245,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(27,32,39,.08)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .34s var(--ease),background-color .3s var(--ease)}
.burger i:nth-child(1){top:19px}.burger i:nth-child(2){top:25px}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
html.menu-open .burger i{background:#fff}
html.menu-open .brand-txt b{color:#fff}
html.menu-open .brand-txt span{color:var(--bronze-lift)}
html.menu-open .hdr.scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.mnav{position:fixed;inset:0;z-index:1110;overscroll-behavior:contain;background:var(--night);display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.mnav.open{opacity:1;visibility:visible}
.mnav a{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(22px,6.6vw,34px);line-height:1.45;
  color:#fff;opacity:0;transform:translateY(14px);transition:opacity .36s var(--ease-out),transform .36s var(--ease-out)}
.mnav.open a{opacity:1;transform:none}
.mnav.open a:nth-child(1){transition-delay:.06s}.mnav.open a:nth-child(2){transition-delay:.1s}
.mnav.open a:nth-child(3){transition-delay:.14s}.mnav.open a:nth-child(4){transition-delay:.18s}
.mnav.open a:nth-child(5){transition-delay:.22s}
.mnav-foot{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:5px;color:#AEB6BF;font-size:15px}
.mnav-foot b{color:#fff;font-size:20px;font-weight:500;font-family:var(--display)}

/* ---------- buttons, set for paper; .on-dark flips them ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  font-size:14.5px;font-weight:500;padding:12px 26px;color:var(--ink);border:1px solid rgba(27,32,39,.28);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
/* the old hover went to bronze-lift under white text, 2.7:1; deepen instead */
.btn.solid{background:var(--bronze);border-color:var(--bronze);color:#fff}
.btn.solid:hover{background:var(--bronze-deep);border-color:var(--bronze-deep);color:#fff}
.on-dark .btn{color:#fff;border-color:rgba(255,255,255,.34)}
.on-dark .btn:hover{background:#fff;border-color:#fff;color:var(--night)}
.on-dark .btn.solid{background:var(--bronze);border-color:var(--bronze);color:#fff}
.on-dark .btn.solid:hover{background:var(--bronze-lift);border-color:var(--bronze-lift);color:var(--night)}

/* ---------- hero: option B, the painting hung and everything under it ----------
   Carried over from /uppsetningar/ with the measurements that were verified there.
   The band is 42svh on desktop because Baldvin saw the old 26svh band as the painting being
   "dregin inn" on a computer: that showed 26-29% of its height, this shows 56-62%, aimed with
   object-position from the upper sky to the shoreline houses (ridge at 48% of the source).
   The LA seal is sized and placed as a fraction of the BAND, because once the crop is aimed
   the sky is a fixed share of it at every width: centred at 24% and 30% tall it ends at 39%,
   clear of the ridge at ~49%. */
.hero{position:relative;min-height:max(620px,100svh);background:var(--paper);
  --plate-top:clamp(118px,14vh,150px);--plate-h:clamp(170px,42svh,520px)}
.hero-art{position:absolute;left:0;right:0;top:var(--plate-top);height:var(--plate-h);overflow:hidden}
.hero-art picture{display:block;width:100%;height:100%}
.hero-art picture img{width:100%;height:100%;object-fit:cover;object-position:50% 47%}
.hero-seal{position:absolute;left:50%;top:24%;height:30%;width:auto;aspect-ratio:1/1;
  transform:translate(-50%,-50%);pointer-events:none}
.hero-row{position:relative;display:flex;align-items:flex-start;gap:clamp(24px,3.4vw,48px);
  max-width:calc(1000px + 2 * var(--gut));margin-inline:auto;
  padding:calc(var(--plate-top) + var(--plate-h) + clamp(20px,3.2vh,34px)) var(--gut) clamp(26px,5vh,54px)}
.hero-copy{flex:1;min-width:0}
.hero-kicker{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(18px,1.6vw,24px);line-height:1.3;color:var(--ink-2);margin-bottom:10px}
.hero h1{font-size:clamp(30px,3.2vw,52px);line-height:1.04;color:var(--ink)}
.hero-tag{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(20px,1.8vw,27px);line-height:1.3;color:var(--ink-2);margin-top:14px}
.hero-sub{margin-top:16px;color:var(--ink-2);font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;max-width:44ch}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* his photograph with his name typeset under it: no frame, no radius, no shadow */
.hero-card{flex:none;display:block;width:clamp(180px,min(22vw,26svh),320px)}
.hero-card .ph{display:block;aspect-ratio:636/739;overflow:hidden;background:var(--paper-2)}
.hero-card .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:transform .5s var(--ease-out)}
.hero-card .id{display:block;padding-top:12px}
.hero-card b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(14px,1.05vw,16.5px);line-height:1.2;color:var(--ink)}
.hero-card i{display:block;margin-top:5px;font-style:normal;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze)}

/* ---------- subpage opening ---------- */
.page-hero{background:var(--paper);padding:clamp(128px,14vw,184px) 0 clamp(44px,5vw,76px)}
.page-hero h1{margin-top:12px;max-width:20ch}
.page-hero .lead{margin-top:18px;max-width:60ch}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,7.2vw,112px) 0;position:relative;overflow:hidden}
.sec.light{background:var(--paper);color:var(--ink)}
.sec.dark{background:var(--night);color:#fff}
.sec.flush{padding-top:0}
.rule-top{border-top:1px solid rgba(27,32,39,.14);padding-top:clamp(40px,4.4vw,64px)}
.sec-head{max-width:58ch;margin-bottom:clamp(30px,3.4vw,50px)}
.sec-head h2{margin-top:10px}
.sec-head .lead{margin-top:16px}

/* þjónusta: typographic, and unnumbered, because six practice areas are not a sequence */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(27,32,39,.16)}
.svc article{position:relative;padding:26px 0;border-bottom:1px solid rgba(27,32,39,.11)}
.svc article:not(:nth-child(3n+1)){border-left:1px solid rgba(27,32,39,.11);padding-left:clamp(18px,2.4vw,34px)}
.svc article:not(:nth-child(3n)){padding-right:clamp(18px,2.4vw,34px)}
.svc h3{font-family:var(--display);font-size:clamp(16px,1.4vw,19px);text-transform:uppercase;font-weight:500;line-height:1.2;transition:color .3s var(--ease)}
.svc h3 a{color:inherit}
.svc p{color:var(--ink-2);margin-top:9px;font-size:15px}
.svc article:hover h3{color:var(--bronze)}
.svc-more{display:inline-flex;align-items:center;min-height:24px;margin-top:12px;font-size:13px;letter-spacing:.04em;
  color:var(--bronze);border-bottom:1px solid rgba(138,93,56,.4);transition:border-color .2s var(--ease)}
.svc-more:hover{border-color:var(--bronze)}
.more{margin-top:clamp(30px,3.4vw,48px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(27,32,39,.14)}
.more p{color:var(--ink-2);font-size:15px;max-width:64ch}

/* the one famous-Akranes moment */
.band{position:relative;height:clamp(300px,42vw,560px);overflow:hidden}
.band .frame{position:absolute;inset:0;height:100%}
.band-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,17,22,.5),rgba(12,17,22,.24) 45%,rgba(12,17,22,.7))}
.band-txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--gut)}
.band-txt p{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.1vw,30px);line-height:1.25;color:#fff;max-width:30ch;text-wrap:balance}
.band-cap{position:absolute;right:var(--gut);bottom:16px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ferlið: numbered, because this one IS a sequence */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}
.step{padding-top:18px;border-top:1px solid rgba(27,32,39,.2)}
.step em{font-style:normal;font-size:12px;color:var(--bronze);font-weight:600;letter-spacing:.06em;display:block;margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15px;margin-top:6px}

/* baldvin: his photograph is already on the landing screen, so this section is his record,
   set as type rather than a second copy of the same picture */
.bio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:start}
.bio-head h2{margin-top:10px}
.bio-body p{color:#AEB6BF;max-width:58ch}
.bio-body p + p{margin-top:14px}
.cv{margin-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.cv div{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:15px}
.cv b{flex:none;width:66px;color:var(--bronze-lift);font-weight:600;font-size:13px;padding-top:2px}
.cv span{color:#C4CBD2}
/* /ferilskra/: his photograph beside the timeline, years in the bronze column */
.cvp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,96px);align-items:start}
.cvp-photo{display:block;aspect-ratio:636/739;overflow:hidden;background:var(--paper-2);max-width:360px}
.cvp-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.cvp-list{border-top:1px solid rgba(27,32,39,.16);margin-top:clamp(18px,2vw,28px)}
.cvp-list div{display:grid;grid-template-columns:clamp(96px,10vw,140px) minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid rgba(27,32,39,.11)}
.cvp-list b{color:var(--bronze);font-weight:600;font-size:14px;letter-spacing:.02em;padding-top:2px}
.cvp-list span{color:var(--ink);font-size:clamp(16px,1.2vw,18px);line-height:1.45}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,64px)}
.faq details{border-top:1px solid rgba(27,32,39,.16)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-size:clamp(16px,1.3vw,18px);font-weight:500;color:var(--ink);transition:color .2s var(--ease)}
.faq.faq-one{grid-template-columns:1fr;max-width:820px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
@media (hover:hover){.faq summary:hover{color:var(--bronze)}}
.faq p{color:var(--ink-2);padding:0 34px 20px 0;font-size:15.5px;max-width:54ch}

/* samband */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:start}
.lines{margin-top:clamp(26px,3.2vw,40px)}
.lines a,.lines div{display:block;padding:11px 0;border-bottom:1px solid rgba(27,32,39,.13)}
.lines a{transition:color .2s var(--ease)}
.lines a:hover{color:var(--bronze)}
.lines span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
.lines b{font-family:var(--display);font-size:clamp(17px,1.7vw,24px);font-weight:500;display:block}

.cform{display:grid;gap:16px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform .field{display:flex;flex-direction:column;gap:7px}
.cform label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* 16px, not 15: iOS Safari zooms the page into any focused input set smaller than 16px */
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid rgba(27,32,39,.2);border-radius:0;padding:12px 14px;
  transition:border-color .2s var(--ease)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze)}
.cform textarea{resize:vertical;min-height:118px;font-family:inherit}
.cform select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23525C67' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.cform button{font:inherit;font-size:14.5px;font-weight:500;color:#fff;background:var(--bronze);
  border:1px solid var(--bronze);border-radius:0;padding:14px 26px;min-height:46px;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);justify-self:start}
.cform button:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}
.cform button:active{transform:translateY(1px)}
.cform button:disabled{opacity:.6;cursor:default}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-note{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:52ch}
.cform-status{font-size:14px;margin:0;min-height:1.4em}
.cform-status.ok{color:#2F6B44}
.cform-status.err{color:#9A3F25}
.cform-status.err a{color:inherit;text-decoration:underline}

/* footer */
footer{background:var(--night);color:#8C959F;padding:clamp(44px,4.6vw,68px) 0 28px;font-size:14px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,64px);padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-name,.f-h{display:block;color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.f-h{margin-bottom:8px}
.f-about p{margin-top:10px;max-width:46ch;font-size:14px}
.f-nav a,.f-contact a,.f-contact span{display:flex;align-items:center;min-height:28px}
.f-nav a,.f-contact a{transition:color .2s var(--ease)}
.f-nav a:hover,.f-contact a:hover{color:#fff}
.f-bot{padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8C959F}
.f-credit{display:inline-flex;align-items:center;gap:10px}
.sndr{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:#fff}
.sndr__mark{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.08em;line-height:1}
.sndr__mark i{font-style:normal;display:inline-block;font-size:.7em;margin:0 .14em;color:var(--bronze-lift);
  transform:translateY(-.1em);transition:transform .6s var(--ease)}

.sndr__studio{font-size:9.5px;letter-spacing:.26em;font-weight:600;color:#AEB6BF}
.credit{font-size:12px;line-height:1.6;color:#7D8691;max-width:84ch;margin-top:14px}
.credit a{text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:#fff}

/* ---------- intro ----------
   A curtain, not the old aperture: the painting opens outward from the seal's axis, the
   seal settles into its sky, then the words arrive under it. No scroll lock this time; the
   whole thing is 2.6s and the base styles ARE the end state, so a user who scrolls early
   just sees it finish. The html classes are set by an inline script in <head> (so nothing
   flashes before site.js runs) and cleared by it after a failsafe timeout, so a script
   failure can never leave the hero hidden. .is-hold pauses everything until the painting
   has decoded. */
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
html.is-hold *{animation-play-state:paused!important}
html.is-intro .hero-art{animation:laCurtain 1.5s cubic-bezier(.77,0,.175,1) both}
html.is-intro .hero-art picture img{animation:laSettle 2.4s cubic-bezier(.19,1,.22,1) both}
html.is-intro .hero-seal{animation:laSealIn 1s var(--ease-out) .9s both}
html.is-intro .hero-kicker{animation:laRiseIn .9s var(--ease-out) 1.05s both}
html.is-intro .hero-tag{animation:laRiseIn .9s var(--ease-out) 1.45s both}
html.is-intro .hero h1:not(.is-split){opacity:0}
html.is-intro .hero h1 .ch{animation:laChar 1.1s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(1.15s + var(--i) * 14ms)}
html.is-intro .hero-card{animation:laRiseIn 1s var(--ease-out) 1.35s both}
html.is-intro .hero-sub{animation:laRiseIn .9s var(--ease-out) 1.55s both}
html.is-intro .hero-acts{animation:laRiseIn .9s var(--ease-out) 1.7s both}
html.is-intro .hdr-in > *{animation:laFadeTo1 .8s var(--ease-out) both}
html.is-intro .hdr-in > *:nth-child(1){animation-delay:.35s}
html.is-intro .hdr-in > *:nth-child(2){animation-delay:.45s}
html.is-intro .hdr-in > *:nth-child(3){animation-delay:.55s}
html.is-intro .hdr-in > *:nth-child(4){animation-delay:.55s}
@keyframes laCurtain{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes laSettle{from{transform:scale(1.12)}to{transform:none}}
@keyframes laSealIn{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%)}}
/* rise + fade, NOT an overflow mask: Icelandic Á/Ð/Þ accents clip against a mask edge */
@keyframes laChar{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes laFadeTo1{from{opacity:0}to{opacity:1}}
@keyframes laRiseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* decorative hover motion only where a real pointer can hover; touch taps never trigger it */
@media (hover:hover) and (pointer:fine){
  .hero-card:hover .ph img{transform:scale(1.025)}
  .sndr:hover .sndr__mark i{transform:translateY(-.1em) rotate(90deg)}
}

@media (max-width:1000px){
  .nav,.hdr-cta{display:none}
  .burger{display:block}
  .svc,.steps,.faq{grid-template-columns:1fr}
  .svc article{border-left:0!important;padding-left:0!important;padding-right:0!important}
  .bio,.contact{grid-template-columns:1fr}
  .cform .row2{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .f-about{grid-column:1 / -1}
}

@media (max-width:900px){
  /* Fit display type to the widest WORD, not the line. LÖGFRÆÐIÞJÓNUSTA is 9.97em in this
     face, so the size is the text column divided by 10.3 (slack for rounding), capped at
     36px. 360px phone: 31px. */
  h1,.hero h1{font-size:min(36px,calc((100vw - 2 * var(--gut)) / 10.3))}

  /* B on a phone: the band bleeds edge to edge, words first, then his photograph on its
     side. Upright it would be ~230px tall and push the buttons off the first screen. */
  .hero{--plate-top:114px;--plate-h:clamp(110px,18svh,196px);min-height:100svh}
  .hero-row{flex-direction:column;align-items:stretch;gap:clamp(14px,2.2vh,20px);max-width:none}
  .hero-kicker{font-size:clamp(16px,4.4vw,19px);margin-bottom:8px}
  .hero-tag{font-size:clamp(18px,5vw,21px);margin-top:10px}
  .cvp{grid-template-columns:1fr}
  .cvp-photo{max-width:260px}
  .hero-sub{font-size:15.5px;line-height:1.5;max-width:none}
  .hero-acts{gap:10px;margin-top:20px}
  .hero-acts .btn{flex:1 1 46%;padding:12px}
  .hero-card{width:auto;display:flex;align-items:stretch;gap:16px}
  .hero-card .ph{width:132px;flex:none}
  .hero-card .id{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0}
  .hero-card b{font-size:16px}
  .hero-card i{margin-top:4px;font-size:9.5px;letter-spacing:.13em}
  .band-cap{left:var(--gut);right:auto}
}
/* 104px, not 112: Host Grotesk sets the phone headline ~5px larger than the wide face did, and at
   360x640 the 112px portrait ended 1px below the fold */
@media (max-width:900px) and (max-height:700px){
  .hero-card .ph{width:104px}
}
@media (max-width:560px){
  .f-top{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .frame-in{inset:0!important;transform:none!important}
  .js .mask > *{transform:none!important}
  .drift{transform:none!important}
  html.is-intro *{animation:none!important}
  html.is-intro .hero h1{opacity:1!important}
}

/* native form post (no script): the relay sends the visitor back with #sent / #senderror */
.cform-flash{display:none;margin:0;font-size:14px}
.cform-flash:target{display:block}
.cform-flash.ok{color:#2F5D3A}.cform-flash.err{color:#8C3A34}
.f-priv{color:inherit;text-decoration:underline;text-underline-offset:3px}
.prose{max-width:68ch}
.prose h2{margin:2.2em 0 .5em;font-size:clamp(20px,2vw,26px)}
.prose p{margin:0 0 1em}