/* ============================================================
   nordin.contact · gemensam CSS för undersidor
   Samma ritnings-språk som index (variant 16, Azure-ritning).
   index.html och uses.html bär än så länge sina egna inline-
   kopior; nya sidor länkar hit. Konsolidera vid tillfälle.
   ============================================================ */

:root{
  --bp-deep:#0d3b66;
  --bp-mid:#11476f;
  --bp-light:#14507f;
  --ink:#eaf4fc;
  --ink-soft:#cfe3f5;
  --ink-dim:#8fb8d8;
  --ink-faint:rgba(207,227,245,.38);
  --azure:#0078D4;
  --cyan:#50E6FF;
  --stamp:#ffd166;
  --hairline:rgba(207,227,245,.45);
  --hairline-dim:rgba(207,227,245,.22);
  --az-border:rgba(80,230,255,.5);
  --az-border-dim:rgba(80,230,255,.26);
  --az-fill:rgba(0,120,212,.08);
  --hatch:repeating-linear-gradient(45deg,rgba(80,230,255,.2) 0 1px,transparent 1px 6px);
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --sans:"Saira",system-ui,sans-serif;
  --cond:"Saira Condensed","Saira",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink-soft);
  background-color:var(--bp-deep);
  background-image:
    radial-gradient(ellipse at 30% 0%, rgba(80,230,255,.06), transparent 55%),
    linear-gradient(rgba(234,244,252,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,244,252,.05) 1px, transparent 1px),
    linear-gradient(rgba(234,244,252,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,244,252,.09) 1px, transparent 1px),
    linear-gradient(160deg, var(--bp-deep) 0%, var(--bp-mid) 55%, var(--bp-light) 100%);
  background-size:100% 100%, 8px 8px, 8px 8px, 80px 80px, 80px 80px, 100% 100%;
  background-attachment:fixed;
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--cyan);color:var(--bp-deep)}

.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

a{color:var(--ink);text-decoration-color:var(--ink-dim);text-underline-offset:3px}
a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
a:focus-visible,.btn:focus-visible,.backlink:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.container{max-width:1080px;margin:0 auto;padding:0 28px}

/* ---------- Ritningsram ---------- */
.sheetframe{position:fixed;inset:clamp(8px,1.2vw,16px);pointer-events:none;z-index:70}
.sheetframe::after{content:"";position:absolute;inset:-6px;border:1px solid var(--hairline-dim)}
.sheetframe svg{width:100%;height:100%;display:block;overflow:visible}
.sheetframe rect{fill:none;stroke:var(--hairline);stroke-width:1.5;vector-effect:non-scaling-stroke}
.cornermark{
  position:absolute;width:22px;height:22px;
  background:
    linear-gradient(var(--ink-faint),var(--ink-faint)) center/100% 1px no-repeat,
    linear-gradient(var(--ink-faint),var(--ink-faint)) center/1px 100% no-repeat;
}
.cornermark.tl{top:-11px;left:-11px}
.cornermark.tr{top:-11px;right:-11px}
.cornermark.bl{bottom:-11px;left:-11px}
.cornermark.br{bottom:-11px;right:-11px}
.anim .sheetframe rect{stroke-dasharray:100;stroke-dashoffset:100;animation:frameDraw 1.5s cubic-bezier(.5,0,.3,1) .15s forwards}
.anim .sheetframe::after{opacity:0;animation:plainIn .5s ease 1.5s forwards}
.anim .cornermark{opacity:0;animation:plainIn .4s ease 1.7s forwards}
@keyframes frameDraw{to{stroke-dashoffset:0}}
@keyframes plainIn{to{opacity:1}}

/* ---------- Plotter-crosshair ---------- */
.crosshair{position:fixed;top:0;left:0;width:40px;height:40px;z-index:80;pointer-events:none;opacity:0;transition:transform .65s cubic-bezier(.55,0,.2,1),opacity .5s ease}
.crosshair.on{opacity:.85}
.crosshair svg{width:40px;height:40px;display:block}
.crosshair line,.crosshair circle{stroke:var(--cyan);stroke-width:1.4;fill:none}
.crosshair .ch-xy{position:absolute;left:46px;top:12px;font-size:10px;letter-spacing:.08em;color:var(--cyan);white-space:nowrap;background:rgba(13,59,102,.9);padding:1px 6px;border:1px solid var(--az-border-dim)}
@media (max-width:900px),(pointer:coarse){.crosshair{display:none}}

/* ---------- Reveal-motor ---------- */
.anim .reveal{opacity:0;transform:translateY(12px)}
.anim .reveal.drawn{opacity:1;transform:none;transition:opacity .7s ease var(--rd,calc(var(--d,0)*.13s)),transform .7s cubic-bezier(.3,0,.2,1) var(--rd,calc(var(--d,0)*.13s))}
.anim .reveal.noshift{opacity:1;transform:none}

/* ---------- Azure-container ---------- */
.azbox{position:relative;padding:clamp(30px,4.5vw,52px) clamp(18px,3.5vw,44px) clamp(34px,4.5vw,56px)}
.azframe{position:absolute;inset:0;border:1.5px dashed var(--az-border);background:var(--az-fill);pointer-events:none}
.azlabel{
  position:absolute;top:-12px;left:22px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:var(--cyan);background:var(--bp-mid);border:1px solid var(--az-border);
  padding:4px 14px 3px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;
}
.azlabel::before{content:"";width:7px;height:7px;flex:none;border:1.5px solid var(--cyan);background:rgba(0,120,212,.35)}
.anim .azbox .azframe{clip-path:inset(0 100% 0 0)}
.anim .azbox.drawn .azframe{transition:clip-path 1.1s cubic-bezier(.4,0,.2,1) .1s;clip-path:inset(0 0 0 0)}
.anim .azbox .azlabel{opacity:0;transform:translateY(6px)}
.anim .azbox.drawn .azlabel{transition:opacity .5s ease .75s,transform .5s ease .75s;opacity:1;transform:none}

/* ---------- Peering-pilar ---------- */
.peering{display:flex;flex-direction:column;align-items:center;padding:10px 0}
.parrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.parrow.up{border-bottom:10px solid var(--cyan)}
.parrow.down{border-top:10px solid var(--cyan)}
.pline{width:1.5px;height:34px;background:var(--az-border)}
.plabel{
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.28em;
  color:var(--cyan);border:1px solid var(--az-border-dim);
  padding:3px 12px 2px;margin:8px 0;background:rgba(13,59,102,.85);
}
.anim .peering .pline{transform:scaleY(0)}
.anim .peering.drawn .pline{transition:transform .6s ease .15s;transform:scaleY(1)}
.anim .peering .parrow{opacity:0}
.anim .peering.drawn .parrow{transition:opacity .3s ease .75s;opacity:1}
.anim .peering .plabel{opacity:0}
.anim .peering.drawn .plabel{transition:opacity .4s ease .5s;opacity:1}

/* ---------- Ritningshuvud ---------- */
.titleblock{
  position:relative;margin:0 0 0 auto;width:max-content;max-width:100%;
  display:grid;grid-template-columns:repeat(3,auto);
  border:1.5px solid var(--hairline);background:rgba(13,59,102,.72);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);
}
.tb-cell{padding:7px 16px 6px;border-right:1px solid var(--hairline-dim);border-bottom:1px solid var(--hairline-dim);min-width:120px}
.tb-cell:nth-child(3n){border-right:none}
.tb-cell:nth-last-child(-n+3){border-bottom:none}
.tb-label{display:block;font-size:9px;color:var(--ink-dim);letter-spacing:.18em;margin-bottom:1px}
.tb-value{display:block;color:var(--ink);font-weight:500}
.tb-value .hl{color:var(--cyan)}

/* ---------- Måttlinjer ---------- */
.dim{position:relative;height:38px;margin:6px 0}
.dim-line{position:absolute;top:8px;left:0;right:0;height:1px;background:var(--ink-dim);transform-origin:left}
.dim-line::before,.dim-line::after{content:"";position:absolute;top:-3.5px;border-style:solid;border-color:transparent}
.dim-line::before{left:0;border-width:4px 9px 4px 0;border-right-color:var(--ink-dim)}
.dim-line::after{right:0;border-width:4px 0 4px 9px;border-left-color:var(--ink-dim)}
.dim-ext{position:absolute;top:0;width:1px;height:17px;background:var(--ink-dim);transform-origin:top}
.dim-ext.l{left:0}.dim-ext.r{right:0}
.dim-label{
  position:absolute;top:15px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cyan);
  background:rgba(13,59,102,.92);padding:0 .8em;white-space:nowrap;transition:text-shadow .35s ease;
}
section:hover .dim-label, footer:hover .dim-label, header:hover .dim-label{text-shadow:0 0 12px rgba(80,230,255,.55)}
.anim .dim .dim-line{transform:scaleX(0)}
.anim .dim .dim-line::before,.anim .dim .dim-line::after{opacity:0}
.anim .dim .dim-ext{transform:scaleY(0)}
.anim .dim .dim-label{opacity:0}
.anim .dim.drawn .dim-line{transition:transform .85s cubic-bezier(.4,0,.2,1) var(--rd,.15s);transform:scaleX(1)}
.anim .dim.drawn .dim-line::before,.anim .dim.drawn .dim-line::after{transition:opacity .25s ease calc(var(--rd,.15s) + .8s);opacity:1}
.anim .dim.drawn .dim-ext{transition:transform .4s ease var(--rd,.15s);transform:scaleY(1)}
.anim .dim.drawn .dim-label{transition:opacity .5s ease calc(var(--rd,.15s) + .55s);opacity:1}
.section-dim{max-width:520px;margin:18px 0 40px}

/* ---------- Stämplar ---------- */
.stamp{
  display:inline-block;font-family:var(--mono);
  font-size:12px;font-weight:600;letter-spacing:.3em;
  color:var(--stamp);border:2px solid var(--stamp);border-radius:4px;
  padding:6px 16px 5px 19px;transform:rotate(var(--rot,-6deg));
  box-shadow:inset 0 0 0 1.5px rgba(13,59,102,.4);white-space:nowrap;
}
.stamp.cyan{color:var(--cyan);border-color:var(--cyan)}
.stamp.small{font-size:10px;letter-spacing:.26em;padding:3px 9px 2px 11.6px;border-radius:3px;border-width:1.5px}
.anim .stamp{opacity:0}
.anim .drawn .stamp{animation:stampIn .42s cubic-bezier(.2,1.5,.35,1) var(--sd,.9s) forwards}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(calc(var(--rot,-6deg) - 16deg)) scale(2.4)}
  60%{opacity:1;transform:rotate(var(--rot,-6deg)) scale(.93)}
  100%{opacity:1;transform:rotate(var(--rot,-6deg)) scale(1)}
}

/* ---------- Sektioner & rubriker ---------- */
.section{padding:38px 0;position:relative}
h2{
  font-family:var(--cond);font-weight:600;font-size:clamp(30px,4.6vw,46px);line-height:1.08;
  color:var(--ink);text-transform:uppercase;letter-spacing:.035em;margin:0 0 14px;
}
h2 em{font-style:normal;color:var(--cyan)}

/* ---------- Sidhuvud för undersidor ---------- */
.pagehead{padding:46px 0 30px;position:relative}
.pagehead-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.backlink{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--hairline);padding:9px 18px;background:rgba(13,59,102,.5);
  transition:border-color .3s,color .3s,box-shadow .3s;white-space:nowrap;
}
.backlink .arrow{margin-right:8px;color:var(--ink-dim);transition:color .3s,transform .3s;display:inline-block}
.backlink:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(80,230,255,.25)}
.backlink:hover .arrow{color:var(--cyan);transform:translateX(-2px)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--ink-dim);margin-bottom:18px}
.kicker::before{content:"+";color:var(--cyan);margin-right:.9em;font-weight:600}
h1.page-title{
  font-family:var(--cond);font-weight:700;font-size:clamp(46px,9vw,104px);line-height:.95;
  color:var(--ink);text-transform:uppercase;letter-spacing:.01em;
}
h1.page-title em{font-style:normal;color:var(--cyan)}
.lead{max-width:620px;font-size:18px;font-weight:300;color:var(--ink-soft);margin-top:22px}

/* ---------- Knapp ---------- */
.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--hairline);padding:11px 22px;background:rgba(13,59,102,.5);
  transition:border-color .3s,color .3s,box-shadow .3s,background .3s;
}
.btn .arrow{margin-left:8px;color:var(--ink-dim);transition:color .3s,transform .3s;display:inline-block}
.btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(80,230,255,.25)}
.btn:hover .arrow{color:var(--cyan);transform:translate(2px,-2px)}

/* ---------- Chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.chips li{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;border:1px solid var(--hairline-dim);
  color:var(--ink-soft);padding:3px 10px 2px;background:rgba(13,59,102,.5);
  transition:border-color .25s,color .25s;
}
.chips li:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- Projektblad ---------- */
.case-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:42px;align-items:start;margin-top:6px}
.case-text p{margin-bottom:16px;max-width:560px}
.case-text p:last-child{margin-bottom:0}
.case-label{
  display:block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;margin:0 0 6px;
}
.case-data{border:1.5px solid var(--hairline);background:rgba(13,59,102,.55)}
.case-data dl{display:grid;grid-template-columns:auto 1fr;font-size:13px}
.case-data dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-dim);
  text-transform:uppercase;padding:11px 14px 9px;border-bottom:1px solid var(--hairline-dim);white-space:nowrap;
}
.case-data dd{padding:10px 16px 9px 0;border-bottom:1px solid var(--hairline-dim);color:var(--ink);font-weight:400}
.case-data dt:nth-last-of-type(1),.case-data dd:last-of-type{border-bottom:none}
.case-chips{padding:14px 14px 16px;border-top:1.5px solid var(--hairline)}
.case-stamp{margin-top:20px;text-align:right}
.utfall{
  margin-top:30px;padding:16px 18px 15px;
  border-left:3px solid var(--cyan);background:rgba(0,120,212,.1);
  max-width:720px;
}
.utfall .case-label{color:var(--cyan);margin-bottom:4px}
.utfall p{font-size:15.5px;color:var(--ink)}

/* ---------- Rev-tabell (kolofon) ---------- */
.rev-wrap{overflow-x:auto;border:1.5px solid var(--hairline);background:rgba(13,59,102,.55)}
table{border-collapse:collapse;width:100%;font-size:14px}
.rev th{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.22em;
  color:var(--ink-dim);text-align:left;text-transform:uppercase;
  padding:12px 16px 10px;border-bottom:1.5px solid var(--hairline);
  background:rgba(13,59,102,.6);white-space:nowrap;
}
.rev td{padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--hairline-dim)}
.rev tr:last-child td{border-bottom:none}
.rev tbody tr:hover{background:rgba(80,230,255,.06)}
.rev .rletter{
  font-family:var(--mono);font-weight:600;font-size:15px;color:var(--cyan);
  border:1.5px solid var(--hairline-dim);width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
}
.rev .ryears{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-dim);white-space:nowrap}

/* ---------- Prosa (kolofon) ---------- */
.prose{max-width:640px}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose h3{
  font-family:var(--cond);font-weight:600;font-size:22px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);margin:30px 0 8px;
}
.prose h3:first-child{margin-top:0}

/* ---------- Footer ---------- */
.footer{padding:38px 0 64px;position:relative}
.footer-lead{max-width:480px;margin-bottom:6px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.footer-fine{font-size:11px;letter-spacing:.1em;color:var(--ink-dim);margin-top:56px;padding-top:18px;border-top:1px solid var(--hairline-dim)}
.footer-fine a{color:var(--ink-dim)}
.footer-fine a:hover{color:var(--cyan)}
.footer-tb{margin-top:46px}
.footer-tb .titleblock{margin-left:0}

/* ---------- Responsivt ---------- */
@media (max-width:880px){
  .titleblock{grid-template-columns:repeat(2,auto);width:100%}
  .tb-cell:nth-child(3n){border-right:1px solid var(--hairline-dim)}
  .tb-cell:nth-child(2n){border-right:none}
  .tb-cell{min-width:0}
  .tb-cell:nth-last-child(-n+3){border-bottom:1px solid var(--hairline-dim)}
  .tb-cell:nth-last-child(-n+2){border-bottom:none}
  .section{padding:28px 0}
  .azbox{padding:30px 16px 36px}
  .azlabel{left:12px;letter-spacing:.16em}
  .container{padding:0 18px}
  body{font-size:16px}
  .case-grid{grid-template-columns:1fr;gap:26px}
}