/*! Design & development (c) 2026 Charlotte Aasbie, https://charlotteaasbie.com. All rights reserved.
   Licensed to Rosenborg Media for use on this website only. No copying, reuse or redistribution
   without written permission. */
/* ==========================================================================
   Sarah Rosenborg / Rosenborg Media: shared design system
   Loaded after each page's inline <style>, so these rules win for shared
   components. Change a value here and it updates every page.
   ========================================================================== */
:root{
  --bg:#000; --ink:#f4efe8; --ink-2:#cfc7bd; --muted:#9a938a; --line:rgba(244,239,232,.14);
  --accent:#FF914D; --accent-hi:#ffa866; --on-accent:#17120d;
  --ease:cubic-bezier(.16,.7,.2,1); --t:.25s; --t-img:1.2s;
  --r-media:6px; --r-pill:100px;
  --sec:clamp(88px,11vw,160px);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
::selection{background:rgba(244,239,232,.9);color:#0b0907;}

/* ---------- Focus: visible for keyboard users, invisible for mouse ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.gallery .g img:focus-visible{outline-offset:-4px;}

/* ---------- Header ---------- */
.top .m{background:none;border:0;color:inherit;font:inherit;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px 8px;margin:-12px -8px;transition:color var(--t) var(--ease);}
.top .m:hover{color:var(--accent);}
.top .logo{display:block;font-family:'League Spartan',sans-serif;font-weight:700;font-size:19px;letter-spacing:.14em;text-transform:uppercase;
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--ink);transition:color var(--t) var(--ease);}
.top .logo:hover{color:var(--accent);}

/* ---------- Buttons: one shape, one hover ---------- */
.top .cta,footer .cta2,.intro .introbtn,.introbtn,.modelfeat .mf a,.cform .submit,.submit{
  background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);border-radius:var(--r-pill);font-weight:600;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease),filter var(--t) var(--ease);}
.top .cta{display:inline-flex;align-items:center;min-height:40px;}
.top .cta:hover,footer .cta2:hover,.intro .introbtn:hover,.introbtn:hover,.modelfeat .mf a:hover,.cform .submit:hover,.submit:hover{
  background:var(--accent-hi);border-color:var(--accent-hi);transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,145,77,.35);filter:none;}
.top .cta:active,footer .cta2:active,.introbtn:active,.submit:active{transform:translateY(0);box-shadow:none;}
.ds-cta .lbl,.ds-cta .arr,.wc-view,.wc-arrow,.tw-all .lbl,.tw-all .arr{border-radius:var(--r-pill);}

/* ---------- Page heroes ---------- */
.head{min-height:80vh;}
.head .hc .eyebrow{color:var(--accent);}
.head .lead{max-width:540px;margin-left:auto;margin-right:auto;}

/* ---------- Media: let the photos speak ---------- */
.gallery .g{border-radius:var(--r-media);}
.gallery .g img{filter:none;transition:transform var(--t-img) var(--ease),filter .6s var(--ease);}
.gallery .g:hover img{transform:scale(1.04);filter:none;}
.reel,.reels .reel,.video,.vcard .thumb{border-radius:var(--r-media);}
.wcard{border-radius:var(--r-media);}
/* Captions on touch screens (no hover) are always visible */
@media (hover:none){
  .gallery .g .cap{opacity:1;transform:none;}
  .gallery .g:after{opacity:1;}
}
/* Commercial index cards behave as blocks in the masonry */
.gallery a.g{display:block;}
/* Decorative category labels are labels, not buttons */
.cats span,.cats a{cursor:default;pointer-events:none;}

/* ---------- Section rhythm ---------- */
footer{padding:clamp(110px,14vw,170px) 0;}
footer .fsub{margin:0 auto 32px;}

/* ---------- Next project (shared by all case studies) ---------- */
.nextp{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:center;}
.nextp img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.1) brightness(.4);transition:transform 1.4s var(--ease),filter .6s var(--ease);}
.nextp:hover img{transform:scale(1.05);filter:grayscale(0) brightness(.5);}
.nextp:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.35));z-index:1;}
.nextp .np-c{position:relative;z-index:2;width:100%;}
.nextp .np-c .eyebrow{color:var(--accent);}
.nextp .np-c .np-name{font-family:'League Spartan',sans-serif;font-weight:700;font-size:clamp(1.82rem,5.32vw,4.1rem);text-transform:uppercase;line-height:.98;margin-top:14px;}
.nextp .np-c .np-go{margin-top:20px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#e6ded3;transition:color var(--t) var(--ease),letter-spacing var(--t) var(--ease);}
.nextp:hover .np-c .np-go{color:var(--accent);letter-spacing:.3em;}

/* ---------- Menu ---------- */
.nm-close{background:none;border:0;padding:10px;font:300 36px/1 'Inter',sans-serif;color:var(--ink);cursor:pointer;transition:color var(--t) var(--ease);}
.nm-close:hover{color:var(--accent);}
.nm-links a{transition:opacity var(--t) var(--ease),color var(--t) var(--ease);}
.nm-util a{opacity:1!important;color:var(--muted);}
.nm-util a:hover{color:#fff;}
.nm-links a[aria-current="page"]{opacity:1;color:var(--accent);}

/* ---------- End bar ---------- */
.endbar{background:#141210;border-top:1px solid var(--line);color:#b8b0a4;padding:60px 40px 30px;font-family:'Inter',sans-serif;font-weight:300;}
.endbar .eb-top{max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:44px;}
.endbar .eb-b{font-family:'League Spartan',sans-serif;font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#efe9df;}
.endbar .eb-tag{margin-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);max-width:260px;line-height:1.8;}
.endbar .eb-cols{display:flex;gap:70px;flex-wrap:wrap;}
.endbar .eb-col h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#efe9df;margin-bottom:18px;font-weight:500;}
.endbar .eb-col a{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.05em;color:#b8b0a4;padding:5px 0;margin-bottom:6px;transition:color var(--t) var(--ease);}
.endbar .eb-col a:hover{color:#fff;}
.endbar .eb-col a svg{width:16px;height:16px;flex:none;fill:currentColor;}
.endbar .eb-bot{max-width:1360px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.endbar .eb-cr{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.endbar .eb-cr a{color:#b8b0a4;transition:color var(--t) var(--ease);}
.endbar .eb-cr a:hover{color:#fff;}
.endbar .eb-social{display:flex;gap:10px;margin-top:22px;}
.endbar .eb-social a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#efe9df;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);}
.endbar .eb-social a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.endbar .eb-social svg{width:17px;height:17px;fill:currentColor;}
@media(max-width:640px){
  .endbar{padding:44px 24px 26px;}
  .endbar .eb-top{flex-direction:column;gap:34px;}
  .endbar .eb-cols{gap:44px;}
  .endbar .eb-bot{flex-direction:column-reverse;text-align:center;gap:14px;}
}

/* ---------- Scroll reveal (added by site.js only to content below the fold) ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}

/* ---------- Mobile header ---------- */
@media(max-width:600px){
  .top{padding:16px 18px!important;}
  .top .m .m-l{display:none;}
  .top .m{font-size:20px;letter-spacing:0;}
  .top .logo{display:block!important;position:static;transform:none;margin:0 auto 0 16px;font-size:13px;letter-spacing:.1em;}
  .top .cta{padding:8px 14px;font-size:10px;letter-spacing:.14em;min-height:36px;}
}
@media(max-width:360px){
  .top .logo{font-size:12px;letter-spacing:.06em;}
}

/* ---------- Respect 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;}
  .rv{opacity:1;transform:none;}
  .panel-vid{display:none;}
}
.endbar svg.ico-stroke{fill:none!important;stroke:currentColor;stroke-width:1.8;}

/* ---------- Section heads (shared standard) ---------- */
.sechead{text-align:center;border-bottom:1px solid var(--line);padding-bottom:22px;margin:96px 0 30px;}
.sechead .eyebrow{display:block;color:var(--accent);text-shadow:none;margin-bottom:12px;}
.sechead h2{font-family:'League Spartan',sans-serif;font-weight:700;font-size:clamp(1.44rem,3.34vw,2.43rem);text-transform:uppercase;letter-spacing:.02em;line-height:1;}
.sechead p{max-width:440px;margin:12px auto 0;color:var(--muted);line-height:1.7;font-size:.95rem;}

/* ---------- Brighter imagery: dim only as much as text legibility needs ---------- */
.head img{filter:contrast(1.05) saturate(1.03) brightness(.74);}
.head:after{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 35%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.72))!important;}
.head h1,.head .lead,.head .hc .eyebrow{text-shadow:0 2px 24px rgba(0,0,0,.45);}
.panel img{filter:contrast(1.05) saturate(1.02) brightness(.78);}
.panel:hover img{filter:contrast(1.05) saturate(1.05) brightness(.95);}
.panel-vid{filter:brightness(.92) contrast(1.03);}
.wcard img{filter:contrast(1.04) brightness(.85);}
.wcard:hover img{filter:contrast(1.04) brightness(1);}
.intro .pic img,.story .pic img{filter:none;}
.footvid{filter:brightness(.78) contrast(1.04);}
.nextp img{filter:contrast(1.05) brightness(.55);}
.nextp:hover img{filter:contrast(1.05) brightness(.68);}
.modelfeat .mf-pic img{filter:none;}
.ds-bg{filter:brightness(.56) contrast(1.05);}
.teach .tc img,.tcard img{filter:brightness(.75);}
.vcard .thumb img{filter:brightness(.88);}
.panel:after{background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.04) 40%,rgba(0,0,0,.42))!important;}
.panel .plabel h2{text-shadow:0 2px 22px rgba(0,0,0,.6);}
/* Next project follows the rule: standalone headings are centered */
.nextp{justify-content:center;text-align:center;}
.nextp:after{background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,.35) 70%)!important;}
.nextp .np-c{display:flex;flex-direction:column;align-items:center;}
footer:after{background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.18) 45%,rgba(0,0,0,.38))!important;}
footer .big,footer .fsub{text-shadow:0 2px 24px rgba(0,0,0,.5);}

/* ---------- Page heroes: title sits higher, in the lower-middle of the image ---------- */
.head .hc{padding-bottom:clamp(90px,17vh,190px)!important;}
@media(max-width:600px){.head .hc{padding-bottom:clamp(64px,12vh,120px)!important;}}

/* ---------- Category pills (Films tabs, Photography filters) ---------- */
.subnav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:44px 0 6px;}
.subnav .tab{background:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 28px;font:500 11px/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#cfc7bd;cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);}
.subnav .tab:hover{border-color:var(--accent);color:var(--accent);}
.subnav .tab.active,.subnav .tab.active:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
@media(max-width:600px){.subnav{gap:8px;padding-top:32px;}.subnav .tab{padding:11px 18px;letter-spacing:.14em;}}
.gallery .g.is-hidden{display:none;}

/* ---------- Sticky header: transparent over the hero, compact bar once you scroll ---------- */
html{scroll-padding-top:84px;}
.top{position:fixed!important;top:0;left:0;right:0;z-index:60;
  transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;}
.top.scrolled{background:rgba(10,8,6,.74);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  padding-top:12px!important;padding-bottom:12px!important;border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(0,0,0,.25);}
.top.scrolled .logo{font-size:16px;}
@media(max-width:600px){.top.scrolled{padding-top:10px!important;padding-bottom:10px!important;}.top.scrolled .logo{font-size:12px;}}

/* ---------- Menu overlay: warm, colourful at rest ---------- */
.navmenu{background:
  radial-gradient(circle at 12% 88%, rgba(255,145,77,.30), transparent 46%),
  radial-gradient(circle at 88% 12%, rgba(226,178,120,.20), transparent 42%),
  radial-gradient(circle at 70% 75%, rgba(120,72,40,.35), transparent 50%),
  #0b0806 !important;}
.nm-links{counter-reset:nm;}
.nm-links > a{position:relative;opacity:1!important;color:var(--ink)!important;padding:2px 0;
  transition:color var(--t) var(--ease),transform var(--t) var(--ease);}
.nm-links > a:before{counter-increment:nm;content:"0" counter(nm);position:absolute;right:calc(100% + 16px);top:.55em;
  font:600 11px/1 'Inter',sans-serif;letter-spacing:.14em;color:var(--accent);}
.nm-links > a:hover,.nm-links > a:focus-visible{color:var(--accent)!important;transform:translateX(6px);}
.nm-links > a[aria-current="page"]{color:var(--accent)!important;}
.nm-util{border-top-color:rgba(255,145,77,.3)!important;}
.nm-util a{color:#e6d8c6!important;}
.nm-util a:hover{color:var(--accent)!important;}
.nm-util a[href*="instagram"],.nm-util a[href*="tiktok"]{color:var(--accent)!important;}
.nm-util a[href*="instagram"]:hover,.nm-util a[href*="tiktok"]:hover{color:#fff!important;}
/* Links glide in one by one when the menu opens */
.navmenu .nm-links > a,.navmenu .nm-util{opacity:0!important;transform:translateY(14px);}
.navmenu.open .nm-links > a,.navmenu.open .nm-util{opacity:1!important;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease),color var(--t) var(--ease);}
.navmenu.open .nm-links > a:nth-child(1){transition-delay:.05s;}
.navmenu.open .nm-links > a:nth-child(2){transition-delay:.10s;}
.navmenu.open .nm-links > a:nth-child(3){transition-delay:.15s;}
.navmenu.open .nm-links > a:nth-child(4){transition-delay:.20s;}
.navmenu.open .nm-links > a:nth-child(5){transition-delay:.25s;}
.navmenu.open .nm-util{transition-delay:.32s;}
.navmenu.open .nm-links > a:hover{transform:translateX(6px);transition-delay:0s;}
@media(max-width:600px){.nm-links > a:before{right:calc(100% + 10px);font-size:10px;}}
/* Menu: full shared styling so every page renders it identically */
.navmenu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
  radial-gradient(circle at 10% 92%, rgba(255,145,77,.55), transparent 48%),
  radial-gradient(circle at 92% 8%, rgba(232,182,120,.32), transparent 44%),
  radial-gradient(circle at 75% 80%, rgba(168,84,44,.45), transparent 52%),
  radial-gradient(circle at 25% 20%, rgba(70,110,100,.28), transparent 45%),
  #0d0907 !important;}
.nm-close{position:absolute;top:22px;right:34px;}
.nm-links{display:flex;flex-direction:column;align-items:center;gap:6px;}
.nm-links > a{font-family:'League Spartan',sans-serif;font-weight:700;font-size:clamp(1.7rem,4.4vw,3rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.08;}
.nm-links > a:before{top:.62em;}
.nm-util{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,145,77,.35);}
.nm-util a{font:500 12px/1 'Inter',sans-serif!important;letter-spacing:.2em;text-transform:uppercase;padding:6px 0;}
@media(max-width:600px){.nm-util{gap:18px 22px;padding:24px 24px 0;}.nm-close{right:16px;top:12px;}}
/* Menu markers: the brand's ◆ (as in the client list) instead of numbers */
.nm-links > a:before{content:"\25C6"!important;font-size:13px;letter-spacing:0;top:50%;transform:translateY(-50%);right:calc(100% + 18px);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);opacity:.85;}
.nm-links > a:hover:before,.nm-links > a[aria-current="page"]:before{opacity:1;transform:translateY(-50%) scale(1.35);}
@media(max-width:600px){.nm-links > a:before{right:calc(100% + 12px);}}
/* Menu: no markers; a thin accent line grows under the hovered / current item */
.nm-links > a:before{content:none!important;display:none!important;}
.nm-links > a:after{content:"";position:absolute;left:50%;bottom:-2px;height:2px;width:0;background:var(--accent);transform:translateX(-50%);transition:width .35s var(--ease);}
.nm-links > a:hover:after,.nm-links > a:focus-visible:after,.nm-links > a[aria-current="page"]:after{width:38%;}
.nm-links > a:hover,.nm-links > a:focus-visible{transform:none!important;}
/* Testimonial quotes: equal breathing room above and below */
.quote{padding-top:clamp(80px,9vw,120px)!important;padding-bottom:clamp(80px,9vw,120px)!important;}
/* Space between the next-project block and the footer video */
.nextp + footer,.nextp ~ footer{margin-top:clamp(70px,9vw,120px);}
/* Every content container keeps a side gutter, even when a section sets its own vertical padding */
.wrap{padding-left:clamp(20px,4vw,34px)!important;padding-right:clamp(20px,4vw,34px)!important;box-sizing:border-box;}
/* Footer intro text: near-white so it reads clearly over the video */
footer .fsub{color:#f1ebe2!important;font-weight:400!important;text-shadow:0 2px 18px rgba(0,0,0,.6);}
/* Space between a page's last gallery/video grid and the footer video */
section.wrap + footer,.sec + footer,.filmsec + footer{margin-top:clamp(80px,10vw,130px);}
.teach + footer{margin-top:0!important;}
/* Menu overlay: black like the rest of the site; colour only in the details */
.navmenu{background:rgba(6,5,4,.94)!important;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);}
.nm-util{border-top-color:var(--line)!important;}
/* Menu: minimal. No underlines; colour change only. Hairline divider. */
.nm-links > a:after{display:none!important;content:none!important;}
.nm-links > a{transition:color .3s var(--ease),opacity .3s var(--ease)!important;}
.nm-links:hover > a{opacity:.55;}
.nm-links:hover > a:hover{opacity:1;}
.nm-util{border-top:0!important;position:relative;}
.nm-util:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(220px,50%);height:1px;background:rgba(244,239,232,.12);}
/* Category pages: content starts right under the category pills */
.subnav{padding-bottom:0!important;}
.filmsec{padding-top:40px!important;}
.filmsec > .sechead:first-child{margin-top:0!important;}
.subnav + section.wrap{padding-top:40px!important;}
.subnav + section.wrap > .sechead:first-child{margin-top:0!important;}
.sec{padding-top:40px!important;}
/* Reel grids: flex so an incomplete last row is centred, not left hanging */
.reels{display:flex!important;flex-wrap:wrap;justify-content:center;gap:16px!important;}
.reels .reel{flex:0 0 calc((100% - 48px) / 4);max-width:calc((100% - 48px) / 4);}
@media(max-width:1100px){.reels .reel{flex-basis:calc((100% - 32px) / 3);max-width:calc((100% - 32px) / 3);}}
@media(max-width:700px){.reels .reel{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2);}}
.quote .by{line-height:2;}