@font-face{font-family:'Druk'; src:url('fonts/Druk-Bold-Trial.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap;}
  @font-face{font-family:'Druk'; src:url('fonts/Druk-BoldItalic-Trial.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap;}
  :root{
    --bg:#f5f3ef; --ink:#131110; --muted:#7c766e; --red:#d33928;
    --hair:rgba(19,17,16,.16); --line:rgba(19,17,16,.8);
    --f:'Familjen Grotesk',system-ui,sans-serif; --logo:'Druk','Familjen Grotesk',sans-serif;
    --maxw:1320px; --pad:clamp(20px,5vw,80px); --bleed:clamp(8px,1.6vw,30px);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:clip;}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip;}
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--red); color:#fff;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
  .rv{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
  .rv.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){.rv{opacity:1; transform:none;}}
  .micro{font-size:8.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.9; color:var(--ink);}
  .micro.dim{color:var(--muted);}
  .idx{font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--muted);}


  /* nav */
  .nav{display:flex; align-items:center; gap:clamp(20px,4vw,60px); padding-top:22px; position:relative; z-index:5;}
  .nav .mark{display:flex; align-items:center; margin-right:14px;}
  .nav .mark img{height:38px; width:auto; display:block;}
  .nav a.lnk{font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;}
  .nav a.lnk:hover{color:var(--red);}
  .nav .right{margin-left:auto; display:flex; align-items:center; gap:clamp(18px,3vw,40px);}
  /* Shield hugs Projects — override the group gap for this one pair */
  .nav .right .mark + .lnk{margin-left:calc(-1 * clamp(18px,3vw,40px) + 6px);}
  @media(max-width:700px){ .nav a.lnk{display:none;} }
  .burger{width:26px; display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px 0;}
  .burger span{height:2px; background:var(--ink); display:block;}
  .mnav{position:fixed; inset:0; z-index:60; background:var(--bg); display:none; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 clamp(26px,8vw,70px); gap:8px;}
  .mnav.open{display:flex;}
  .mnav a{font-family:var(--logo); font-weight:700; font-style:italic; text-transform:uppercase; font-size:clamp(46px,11vw,84px); line-height:1;}
  .mnav a:hover{color:var(--red);}
  .mclose{position:absolute; top:20px; right:clamp(20px,4vw,48px); font-size:34px; background:none; border:none; cursor:pointer; color:var(--ink); line-height:1;}

  /* ============ HERO ============ */
  .hero{position:relative; padding-top:clamp(16px,3vw,38px); padding-bottom:clamp(30px,4vw,56px);}
  .wm{font-family:var(--logo); font-weight:700; font-style:italic; text-transform:uppercase; font-size:clamp(88px,14.5vw,240px); line-height:.86; letter-spacing:.01em; margin:0; position:relative; z-index:4;}
  .wm .dot{color:var(--red);}
  .wm-sub{margin-top:18px; max-width:380px; font-size:14.5px; color:var(--muted);}
  .vert{writing-mode:vertical-rl; transform:rotate(180deg);}
  .hero .num{position:absolute; left:calc(-1 * var(--bleed)); bottom:8%; font-family:var(--logo); font-weight:700; font-size:clamp(30px,3.4vw,52px); letter-spacing:.08em;}
  .hero .microcols{position:absolute; top:clamp(70px,9vw,120px); left:36%; display:flex; gap:34px; z-index:4; max-width:420px;}
  .hero .microcols .micro{max-width:190px;}
  .hero .sidelab{position:absolute; right:calc(-1 * var(--bleed)); top:7%; z-index:4;}
  .hero .sidelab .micro{border-left:1.5px solid var(--line); padding-left:10px;}
  .visual{position:relative; z-index:2; min-height:clamp(480px,62vh,720px);}
  .redblock{position:absolute; left:0; right:calc(-1 * var(--bleed)); top:24%; height:62%; background:var(--red);}
  .visual img.photo{position:absolute; right:0; top:12%; width:94%; height:80%; object-fit:cover; object-position:center 30%;}
  .go{position:absolute; left:26px; bottom:18%; width:46px; height:46px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; z-index:5; transition:background .2s;}
  .go:hover{background:#000;}
  .hero .secidx{position:absolute; right:0; bottom:10%; }
  @media(max-width:900px){
    .hero{grid-template-columns:1fr; min-height:0;}
    .hero .microcols{position:static; margin:18px 0 0;}
    .hero .sidelab{display:none;}
    .hero .num{position:static; margin-top:14px;}
    .visual{min-height:340px;}
  }


  /* ---- interlocking type hero ---- */
  .brk{font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);}
  .brk::before{content:"[ ";} .brk::after{content:" ]";}
  .herometa{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(14px,2.4vw,28px);}
  .stack{position:relative;}
  .ln{position:relative; display:block; font-family:var(--logo); font-weight:700; font-style:italic; text-transform:uppercase;
      font-size:clamp(70px,21.5vw,292px); line-height:.82; letter-spacing:.005em; white-space:nowrap; color:var(--ink);}
  .ln + .ln{margin-top:-.005em;}
  .ln .w{position:relative; display:inline-block;}
  .ln s{position:absolute; background:var(--red); z-index:0; text-decoration:none;}
  .ln b{position:relative; z-index:2; font-weight:700;}
  .l1{z-index:2; padding-left:5%;} .l2{z-index:3; padding-left:29%;} .l3{z-index:4; padding-left:0;} .l4{z-index:5; padding-left:25%;}
  .l1 s{right:-26%; top:17%; width:74%; height:58%;}
  .l2 s{left:-13%; top:25%; width:58%; height:54%;}
  .l3 s{right:-9%; top:11%; width:52%; height:62%;}
  .l4 s{left:6%; top:29%; width:88%; height:50%;}
  .hgap{position:absolute; right:0; top:33%; z-index:6; display:flex; flex-direction:column; text-align:right;}
  .hgap span{font-family:var(--logo); font-weight:700; font-style:italic; text-transform:uppercase; font-size:clamp(14px,1.9vw,26px); line-height:1.08;}
  .hgap span:nth-child(even){color:var(--red);}
  @media(max-width:700px){
    .hgap{display:none;}
    .ln{font-size:clamp(74px,38vw,170px); line-height:.86;}
    .ln + .ln{margin-top:.012em;}
    .l1{padding-left:0;} .l2{padding-left:14%;} .l3{padding-left:0;} .l4{padding-left:8%;}
    .herometa{gap:10px;}
    .herofoot{gap:20px;}
    .herofoot p{max-width:none;}
    .cta-w{align-self:flex-start;}
  }
  .herofoot{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-top:clamp(22px,3.4vw,40px);}
  .herofoot p{max-width:430px; font-size:15px; color:var(--muted); margin:0;}
  .cta{display:inline-flex; align-items:center; background:var(--red); color:#fff; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:15px 30px; transition:filter .2s, transform .2s;}
  .cta:hover{filter:brightness(1.08); transform:translateY(-2px);}
  .cta-w{position:relative; display:inline-block; padding:9px;}
  .cta-w::before,.cta-w::after{content:""; position:absolute; width:14px; height:14px; border:2px solid var(--red);}
  .cta-w::before{left:0; top:0; border-right:0; border-bottom:0;}
  .cta-w::after{right:0; bottom:0; border-left:0; border-top:0;}

  /* ---- photo band ---- */
  .pb{position:relative; height:clamp(270px,48vh,520px); margin-top:clamp(34px,5vw,62px);}
  .pb .pbred{position:absolute; left:calc(-1 * var(--bleed)); width:44%; top:-24px; bottom:-24px; background:var(--red);}
  .pb img{position:absolute; right:calc(-1 * var(--bleed)); top:0; height:100%; width:76%; object-fit:cover; object-position:center 36%;}
  @media(max-width:700px){ .pb .pbred{width:30%; top:-14px; bottom:-14px;} .pb img{width:84%;} }

  /* ---- services accordion ---- */
  .acc{border-top:1px solid var(--line);}
  .arow{border-bottom:1px solid var(--hair);}
  .ahead{display:grid; grid-template-columns:92px 1fr 40px; gap:16px; align-items:center; width:100%; padding:19px 0; cursor:pointer; background:none; border:0; text-align:left; color:inherit; font:inherit;}
  .ahead .n{font-size:10px; font-weight:700; letter-spacing:.22em; color:var(--red);}
  .ahead .t{font-family:var(--logo); font-weight:700; text-transform:uppercase; font-size:clamp(22px,2.9vw,38px); line-height:1; letter-spacing:.02em;}
  .ahead .ar{color:var(--red); font-size:24px; line-height:1; justify-self:end;}
  .arow[data-open="true"] .ahead .t{color:var(--red);}
  .abody{display:none; grid-template-columns:92px 1fr 1fr; gap:16px; padding:0 0 28px;}
  .arow[data-open="true"] .abody{display:grid;}
  .abody .side{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.9;}
  .abody .copy p{font-size:14.5px; color:var(--muted); margin:0 0 12px; max-width:430px; line-height:1.6;}
  .abody .copy p:last-child{margin-bottom:0;}
  @media(max-width:820px){
    .ahead{grid-template-columns:54px 1fr 30px;}
    .abody{grid-template-columns:1fr; padding-left:54px;}
    .abody .mid{margin-top:14px;}
  }

  /* ============ SECTIONS ============ */
  .sect{position:relative; padding-block:clamp(52px,7vw,104px);}
  .shead{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:clamp(28px,4vw,46px);}
  h2.low{font-family:var(--logo); font-weight:700; font-style:italic; text-transform:uppercase; font-size:clamp(54px,8vw,120px); letter-spacing:.01em; line-height:.9; margin:0;}
  h2.low .dot{color:var(--red);}

  /* work */
  .grid7{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .gt{position:relative;}
  .gt .ph{aspect-ratio:3/4; overflow:hidden; position:relative; z-index:2;}
  .gt .ph::after{content:""; position:absolute; inset:0; background:rgba(13,10,7,.32); transition:background .3s;}
  .gt:hover .ph::after{background:rgba(13,10,7,.22);}
  .gt .lg{position:absolute; left:0; right:0; top:0; bottom:34px; z-index:3; display:flex; align-items:center; justify-content:center; padding:14px; text-align:center; pointer-events:none;}
  .gt .lg img{max-width:50%; max-height:26%; width:auto; height:auto; filter:drop-shadow(0 2px 12px rgba(0,0,0,.35));}
  .gt .lg .t{font-family:var(--logo); font-style:italic; font-weight:700; text-transform:uppercase; color:#fff; font-size:clamp(18px,1.7vw,26px); line-height:1.02; text-shadow:0 2px 16px rgba(0,0,0,.45);}
  .gt .lg .t.serif{font-family:'Cormorant Garamond',serif; font-style:normal; font-weight:500; letter-spacing:.3em; font-size:clamp(13px,1.15vw,17px); line-height:1.7;}
  .gt img{width:100%; height:100%; object-fit:cover; filter:blur(7px) saturate(.95); transform:scale(1.09); transition:transform .55s ease, filter .55s ease;}
  .gt:hover img{transform:scale(1.03); filter:blur(0) saturate(1);}
  .gt .cap{display:flex; justify-content:space-between; gap:8px; padding:10px 2px 0; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
  .gt .cap span:last-child{color:var(--red);}
  .gt.feat::before{content:""; position:absolute; left:-14px; top:12%; width:40%; height:60%; background:var(--red); z-index:1;}
  @media(max-width:900px){ .grid7{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:540px){ .grid7{grid-template-columns:1fr;} }

  /* services */
  .svc{border-top:1px solid var(--hair); padding:24px 0; display:grid; grid-template-columns:110px 1fr 1.2fr; gap:18px; align-items:baseline;}
  .svc:last-of-type{border-bottom:1px solid var(--hair);}
  .svc .n{font-size:10px; font-weight:700; letter-spacing:.22em; color:var(--red);}
  .svc h3{font-family:var(--logo); font-weight:700; text-transform:uppercase; font-size:clamp(22px,2.6vw,32px); letter-spacing:.02em; margin:0;}
  .svc p{color:var(--muted); font-size:14px; margin:0; max-width:560px;}
  @media(max-width:820px){ .svc{grid-template-columns:70px 1fr;} .svc p{grid-column:2;} }

  /* process + stats */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .step{border:1px solid var(--hair); background:#fff; padding:20px 18px 18px; min-height:160px; display:flex; flex-direction:column;}
  .step .n{font-size:10px; font-weight:700; letter-spacing:.22em; color:var(--red); margin-bottom:12px;}
  .step h3{font-family:var(--logo); font-weight:700; text-transform:uppercase; font-size:23px; letter-spacing:.02em; margin:0 0 8px;}
  .step p{color:var(--muted); font-size:13px; margin:0; line-height:1.5;}
  @media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:540px){ .steps{grid-template-columns:1fr;} }
  .stats{display:flex; justify-content:center; text-align:center; gap:clamp(40px,8vw,130px); flex-wrap:wrap; margin-top:clamp(70px,9vw,110px);}
  .stat .n{font-family:var(--logo); font-weight:700; font-size:clamp(84px,11.5vw,180px); letter-spacing:.01em; line-height:1; transition:color .25s ease;}
  .stat .n em{font-style:normal; color:var(--red); transition:color .25s ease;}
  .stat:hover .n{color:var(--red);}
  .stat:hover .n em{color:var(--ink);}
  .stat .l{font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:10px auto 0; max-width:240px; line-height:1.8;}

  /* contact */
  .contact{position:relative;}
  .cgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,100px); align-items:start;}
  .contact .redsq{position:absolute; left:calc(var(--pad) - var(--bleed)); top:34%; width:44%; height:38%; background:var(--red); z-index:0; transition:opacity .3s ease;}
  .contact h2.low{transition:color .3s ease;}
  .contact h2.low:hover{color:var(--red);}
  .contact h2.low:hover .dot{color:var(--ink) !important;}
  .contact:has(h2.low:hover) .redsq{opacity:0;}
  .contact h2.low{position:relative; z-index:2; font-size:clamp(72px,10.5vw,160px);}
  .cbrand{display:flex; align-items:center; gap:16px; margin-top:26px; position:relative; z-index:2;}
  .cbrand img{height:82px; width:auto;}
  .cform{display:flex; flex-direction:column; gap:20px; position:relative; z-index:2;}
  .cform label{display:block; font-size:8.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
  .cform input,.cform textarea{width:100%; font-family:var(--f); font-size:15px; color:var(--ink); background:transparent; border:none; border-bottom:1.5px solid var(--line); padding:8px 2px; outline:none;}
  .cform input:focus,.cform textarea:focus{border-color:var(--red);}
  .cform textarea{resize:vertical; min-height:76px;}
  .send{align-self:flex-start; display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:#fff; border:none; cursor:pointer; font-family:var(--f); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:16px 30px; transition:background .2s;}
  .send:hover{background:var(--red);}
  @media(max-width:820px){ .cgrid{grid-template-columns:1fr;} .contact .redsq{display:none;} }

  .foot{border-top:1px solid var(--hair); margin-top:clamp(40px,6vw,70px);}
  .foot .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:16px; padding-bottom:20px;}

  .rel{position:relative;}
  .mt26{margin-top:26px;}
  .dot-w{color:#fff !important;}
  .hid{display:none;}