/* =====================================================================
   Abscraft — "Studio" design system (Direction A, built out)
   Editorial light · big confident type · gradient mark on light,
   white mark on dark. Display: Schibsted Grotesk · Body: Hanken Grotesk
   ===================================================================== */

:root{
  --navy:#0a2742; --navy-deep:#071b2f; --blue:#185FA5; --blue-bright:#2b7fd4;
  --cyan:#00BCDF; --green:#5DCAA5; --amber:#F0A12E;
  --ink:#0f2438; --ink-soft:#43586d; --muted:#8194a8;
  --line:#e7edf3; --line-soft:#f0f4f8; --bg:#ffffff; --bg-soft:#f6f9fc; --bg-tint:#eaf3fb;
  --display:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --maxw:1240px;
  /* tweakable accents */
  --accent:var(--cyan);
  --accent-soft:rgba(0,188,223,.12);
  --grad:linear-gradient(120deg,var(--blue),var(--cyan));
  --hscale:1;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance;}
p{text-wrap:pretty;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.eyebrow{font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:inline-block;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.center{text-align:center;}
.lead{font-size:1.22rem;color:var(--ink-soft);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:1rem;font-weight:600;padding:15px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s;white-space:nowrap;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--blue);transform:translateY(-2px);}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff;}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px);}
.btn-cyan{background:var(--accent);color:#04243a;}
.btn-cyan:hover{filter:brightness(1.06);transform:translateY(-2px);}
.on-dark .btn-ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#eaf2fb;}
.on-dark .btn-ghost:hover{border-color:#fff;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line-soft);}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{height:40px;width:auto;}
.brand b{font-family:var(--display);font-weight:700;letter-spacing:.04em;font-size:1.25rem;color:var(--navy);}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{font-size:.97rem;font-weight:500;color:var(--ink-soft);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);}
.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.7rem;color:var(--navy);line-height:1;}

/* ---------- hero (home) ---------- */
.hero{position:relative;padding:calc(104px * var(--hscale)) 0 calc(88px * var(--hscale));}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 480px at 92% -6%,var(--accent-soft),transparent 62%),
  radial-gradient(700px 520px at -6% 108%,rgba(24,95,165,.07),transparent 60%);}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;}
.hero h1{font-size:calc(5.1rem * var(--hscale));font-weight:800;margin:26px 0 28px;}
.hero .lead{max-width:30ch;}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;}

.hero-visual{position:relative;}
.shot{border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -28px rgba(10,39,66,.42);border:1px solid var(--line);}
.shot img{width:100%;}
.float-badge{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:0 20px 50px -18px rgba(10,39,66,.4);}
.float-badge.tl{top:-28px;left:-34px;}
.float-badge.br{bottom:-26px;right:-26px;display:flex;align-items:center;gap:13px;}
.float-badge .lab{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.float-badge .big{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.1;}
.float-badge .dot{width:11px;height:11px;border-radius:50%;background:var(--green);}

/* ---------- credentials strip ---------- */
.creds{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft);}
.creds .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding:46px 40px;}
.creds .c{padding:0 28px;border-left:1px solid var(--line);}
.creds .c:first-child{border-left:0;padding-left:0;}
.creds .c .n{font-family:var(--display);font-size:3.2rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1;}
.creds .c .n .u{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.creds .c .t{margin-top:10px;font-size:1.02rem;color:var(--ink-soft);font-weight:500;}
.vendors{display:flex;align-items:center;gap:34px;flex-wrap:wrap;padding:30px 40px;border-bottom:1px solid var(--line-soft);}
.vendors .vlbl{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.vendors .v{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#9fb1c4;}

/* ---------- sections ---------- */
.section{padding:var(--secpad,108px) 0;}
.section.tight{padding:72px 0;}
.sec-head{max-width:700px;margin-bottom:56px;}
.sec-head.center{margin-left:auto;margin-right:auto;}
.sec-head h2{font-size:3rem;font-weight:800;margin-top:18px;}
.sec-head p{font-size:1.18rem;color:var(--ink-soft);margin-top:18px;}

/* ---------- grids / cards ---------- */
.grid{display:grid;gap:28px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{padding:38px 32px;border-radius:20px;border:1px solid var(--line);background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s;}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -32px rgba(10,39,66,.3);border-color:#d6e3ef;}
.card .num{font-family:var(--mono);font-size:.82rem;color:var(--blue);font-weight:600;letter-spacing:.05em;}
.card h3{font-size:1.45rem;margin:20px 0 12px;font-weight:700;}
.card p{font-size:1rem;color:var(--ink-soft);}
.card .more{margin-top:16px;display:inline-flex;gap:7px;font-size:.92rem;font-weight:600;color:var(--blue);}

/* ---------- work tiles ---------- */
.tile{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(10,39,66,.3);background:var(--navy);display:block;}
.tile img{width:100%;display:block;transition:transform .5s;}
.tile:hover img{transform:scale(1.04);}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:48px 26px 24px;color:#fff;background:linear-gradient(transparent,rgba(7,27,47,.92));}
.tile .cap b{font-family:var(--display);font-size:1.3rem;font-weight:700;display:block;}
.tile .cap span{font-size:.95rem;color:#bcd0e4;}

/* ---------- products ---------- */
.prod .pcard{border-radius:20px;border:1px solid var(--line);padding:34px 30px;background:#fff;transition:transform .25s,box-shadow .25s;}
.prod .pcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px -32px rgba(10,39,66,.3);}
.pcard .tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--blue);text-transform:uppercase;}
.pcard h3{font-size:1.55rem;margin:14px 0 10px;}
.pcard p{font-size:.98rem;color:var(--ink-soft);}

/* ---------- dark band ---------- */
.dark{background:var(--navy-deep);color:#cdd9e6;position:relative;overflow:hidden;}
.dark::before{content:"";position:absolute;inset:0;opacity:.5;background:
  radial-gradient(700px 360px at 85% 0,var(--accent-soft),transparent 60%),
  radial-gradient(600px 360px at 0 100%,rgba(24,95,165,.16),transparent 60%);}
.dark .wrap{position:relative;}
.dark h2,.dark h3,.dark h4{color:#fff;}
.dark p{color:#9fb2c8;}
.dark .eyebrow{color:var(--accent);}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,var(--navy-deep),#0e3d6b);color:#fff;padding:84px 64px;text-align:center;}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.6;background:radial-gradient(700px 360px at 88% -10%,rgba(0,188,223,.3),transparent 60%);}
.cta-band h2{color:#fff;font-size:3.4rem;font-weight:800;position:relative;}
.cta-band p{position:relative;color:#bcd2ea;font-size:1.25rem;margin:20px auto 38px;max-width:46ch;}
.cta-band .btn-primary{background:#fff;color:var(--navy);position:relative;}
.cta-band .btn-primary:hover{background:var(--accent);color:var(--navy-deep);}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:#9fb2c8;padding:72px 0 36px;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;}
.site-footer .brand b{color:#fff;}
.site-footer .ftxt{margin-top:18px;max-width:32ch;color:#8499af;font-size:1rem;}
.site-footer h4{color:#fff;font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:600;}
.site-footer ul{list-style:none;display:grid;gap:11px;}
.site-footer a{color:#9fb2c8;font-size:.97rem;}
.site-footer a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:52px;padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.88rem;color:#6f87a1;}
.footer-bottom .soc{display:flex;gap:18px;}

/* ---------- interior page hero ---------- */
.page-hero{position:relative;padding:84px 0 72px;border-bottom:1px solid var(--line);overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(800px 420px at 90% -20%,var(--accent-soft),transparent 60%),
  linear-gradient(180deg,#fbfdff,#f3f8fc);}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:18px;}
.breadcrumb a:hover{color:var(--blue);}
.page-hero h1{font-size:clamp(2.6rem,5.2vw,4.2rem);font-weight:800;}
.page-hero p{margin-top:18px;max-width:60ch;font-size:1.2rem;color:var(--ink-soft);}
.pill{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.05em;padding:6px 14px;border-radius:999px;background:var(--bg-tint);color:var(--blue);}

/* ---------- alternating detail rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.detail-row{padding:64px 0;border-top:1px solid var(--line);}
.detail-row:first-of-type{border-top:0;}
.detail-row .split>.media{order:2;}
.detail-row.flip .split>.media{order:0;}
.detail-row h2{font-size:2.2rem;font-weight:800;margin:14px 0 16px;}
.detail-row p{font-size:1.08rem;color:var(--ink-soft);}
.checks{list-style:none;display:grid;gap:12px;margin-top:22px;}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;color:var(--ink-soft);}
.checks li::before{content:"";flex-shrink:0;width:22px;height:22px;border-radius:6px;margin-top:2px;background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.8' fill='none' stroke='%23185FA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.media-ph{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -36px rgba(10,39,66,.34);}
.media-ph img{width:100%;display:block;}
/* striped placeholder for imagery not yet supplied */
.ph{border-radius:18px;border:1px solid var(--line);min-height:300px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#f3f7fb,#f3f7fb 12px,#eef3f9 12px,#eef3f9 24px);}
.ph .ph-in{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;}
.ph.dark-ph{background:repeating-linear-gradient(135deg,#0c2742,#0c2742 12px,#0e2c4a 12px,#0e2c4a 24px);border-color:rgba(255,255,255,.1);}
.ph.dark-ph .ph-in{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#9fb2c8;}

/* ---------- process steps ---------- */
.steps{display:grid;gap:0;counter-reset:step;}
.step{display:grid;grid-template-columns:96px 1fr;gap:30px;padding:38px 0;border-top:1px solid var(--line);}
.step:first-child{border-top:0;}
.step .num{font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;width:64px;height:64px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;}
.step h3{font-size:1.55rem;margin-bottom:8px;}
.step p{font-size:1.06rem;color:var(--ink-soft);max-width:64ch;}

/* ---------- portfolio gallery ---------- */
.ui-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ui-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 44px -34px rgba(10,39,66,.4);}
.ui-prev{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0a2038;border-bottom:1px solid var(--line);pointer-events:none;}
.ui-prev iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:top left;pointer-events:none;}
.ui-card .uc{padding:16px 20px;}
.ui-card .uc b{font-family:var(--display);font-size:1.1rem;font-weight:700;display:block;}
.ui-card .uc span{font-size:.88rem;color:var(--muted);}
@media(max-width:900px){.ui-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.ui-grid{grid-template-columns:1fr;}}
.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.folio .tile{aspect-ratio:16/10;}
.folio .tile img{width:100%;height:100%;object-fit:cover;}
.folio .tile.wide{grid-column:span 2;}
.demo-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s;display:block;}
.demo-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -32px rgba(10,39,66,.3);}
.demo-card .dimg{position:relative;}
.demo-card .dimg img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.demo-card .live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(7,27,47,.78);backdrop-filter:blur(6px);color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.04em;padding:7px 13px;border-radius:999px;}
.demo-card .live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
.demo-card .dbody{padding:24px 26px 28px;}
.demo-card .dbody h3{font-size:1.4rem;margin-bottom:8px;}
.demo-card .dbody p{font-size:.98rem;color:var(--ink-soft);}
.demo-card .dbody .more{margin-top:14px;display:inline-flex;gap:7px;font-weight:600;color:var(--blue);font-size:.94rem;}

/* ---------- about ---------- */
.bio{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;}
.bio .photo{border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -36px rgba(10,39,66,.34);}
.bio .photo img{width:100%;display:block;}
.bio h2{font-size:2.4rem;font-weight:800;margin-bottom:8px;}
.bio .role{font-size:1.05rem;color:var(--blue);font-weight:600;margin-bottom:20px;}
.bio p{font-size:1.08rem;color:var(--ink-soft);margin-bottom:16px;}
.certgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.certcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(12,44,78,.05);transition:transform .2s,box-shadow .2s,border-color .2s;}
.certcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(10,39,66,.3);border-color:#d4e2f0;}
.certcard img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;background:#f4f7fb;border-bottom:1px solid var(--line-soft);}
.certcard figcaption{padding:16px 18px;}
.certcard figcaption b{display:block;font-size:.96rem;line-height:1.3;}
.certcard figcaption span{display:block;font-size:.8rem;color:var(--muted);margin:4px 0 10px;}
.certcard .dl{display:inline-flex;gap:6px;align-items:center;font-size:.82rem;font-weight:600;color:var(--blue);}
.certcard .dl:hover{text-decoration:underline;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.info-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line-soft);}
.info-row .ic{width:46px;height:46px;border-radius:12px;background:var(--bg-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.info-row b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.info-row span,.info-row a{font-size:1.06rem;color:var(--ink);}
.info-row a:hover{color:var(--blue);}
form .field{margin-bottom:20px;}
form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
form label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:8px;}
form input,form textarea,form select{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:.98rem;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;}
form input:focus,form textarea:focus,form select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(24,95,165,.12);}
form textarea{min-height:140px;resize:vertical;}

/* ---------- reveal (no-JS safe) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .hero h1{font-size:calc(3.8rem * var(--hscale));}
  .sec-head h2{font-size:2.4rem;}
}
@media(max-width:900px){
  .nav-links,.nav-cta .btn{display:none;}
  .nav-toggle{display:block;}
  .site-header.open .nav-links{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 0;}
  .site-header.open .nav-links li{padding:0 40px;}
  .site-header.open .nav-links a{display:block;padding:14px 0;border-bottom:1px solid var(--line-soft);}
  .hero-grid,.split,.bio,.contact-grid{grid-template-columns:1fr;gap:40px;}
  .hero h1{font-size:3rem;}
  .hero-visual{margin-top:10px;}
  .float-badge.tl{left:0;} .float-badge.br{right:0;}
  .g3,.g4,.folio,.certgrid{grid-template-columns:repeat(2,1fr);}
  .creds .wrap{grid-template-columns:1fr;gap:28px;}
  .creds .c{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px;}
  .creds .c:first-child{border-top:0;padding-top:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .detail-row .split>.media{order:0;}
  .folio .tile.wide{grid-column:span 2;}
  .section{padding:72px 0;}
}
@media(max-width:560px){
  .wrap{padding:0 22px;}
  .g3,.g4,.folio,.certgrid{grid-template-columns:1fr;}
  .form .two{grid-template-columns:1fr;}
  .cta-band{padding:52px 26px;}
  .cta-band h2{font-size:2.2rem;}
}