/* ══════════════════════════════════════════
   TOKENS
   Palette pulled from the business card:
   mustard gold + true black, warm paper for relief.
══════════════════════════════════════════ */
 :root {
   --gold: #e9c46a;
   --gold-deep: #c99b32;
   --gold-pale: #f4e0ae;
   --ink: #0d0d0d;
   --char: #1a1815;
   --char-2: #282520;
   --paper: #faf6ec;
   --smoke: rgba(13, 13, 13, .56);
   --smoke-light: rgba(250, 246, 236, .58);
   --line: rgba(13, 13, 13, .16);
   --line-light: rgba(250, 246, 236, .16);

   --f-script: 'Parisienne', cursive;
   --f-display: 'Syne', system-ui, sans-serif;
   --f-body: 'Karla', system-ui, sans-serif;
   --f-mono: 'Space Mono', ui-monospace, monospace;

   --wrap: 1220px;
   --gut: clamp(1.25rem, 5vw, 4.5rem);
 }

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

 html,
 body {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
   max-width: 100vw;
 }

 body {
   font-family: var(--f-body);
   background: var(--paper);
   color: var(--ink);
   line-height: 1.62;
   font-size: 16px;
 }

 h1, h2, h3, h4, h5, h6, p, span, a, li, dt, dd, label, button, input, textarea {
   overflow-wrap: break-word;
   word-break: break-word;
 }

 img {
   max-width: 100%;
   display: block
 }

 a {
   color: inherit
 }

 button {
   font: inherit;
   cursor: pointer
 }

 .skip {
   position: absolute;
   left: 1rem;
   top: -4rem;
   z-index: 999;
   background: var(--ink);
   color: var(--gold);
   padding: .6rem 1.1rem;
   border-radius: 0 0 4px 4px;
   font-family: var(--f-mono);
   font-size: .75rem;
   text-decoration: none;
   transition: top .2s;
 }

 .skip:focus {
   top: 0
 }

 :focus-visible {
   outline: 2px solid var(--gold-deep);
   outline-offset: 3px
 }

 .sr {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap
 }

 .wrap {
   max-width: var(--wrap);
   margin-inline: auto;
   padding-inline: var(--gut)
 }

 /* ── Type roles ───────────────────────── */
 .eyebrow {
   font-family: var(--f-mono);
   font-size: .68rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 700;
 }

 .h-display {
   font-family: var(--f-display);
   font-weight: 800;
   line-height: .94;
   letter-spacing: -.025em;
 }

 .lede {
   font-size: clamp(1rem, 1.4vw, 1.12rem);
   line-height: 1.75;
   max-width: 54ch
 }

 /* ══════════════════════════════════════════
   VIEWFINDER — the signature device.
   Rule-of-thirds guides + corner focus brackets,
   lifted straight from a camera's viewfinder and
   from the faint grid on Sam's card.
══════════════════════════════════════════ */
 .viewfinder {
   position: relative
 }

 .vf-grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 1;
   opacity: .5;
 }

 .vf-grid span {
   position: absolute;
   background: currentColor;
   opacity: .28
 }

 .vf-grid .v {
   top: 0;
   bottom: 0;
   width: 1px
 }

 .vf-grid .h {
   left: 0;
   right: 0;
   height: 1px
 }

 .vf-grid .v1 {
   left: 33.333%
 }

 .vf-grid .v2 {
   left: 66.666%
 }

 .vf-grid .h1 {
   top: 33.333%
 }

 .vf-grid .h2 {
   top: 66.666%
 }

 .brackets {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 2
 }

 .brackets i {
   position: absolute;
   width: 26px;
   height: 26px;
   border: 2px solid currentColor;
   opacity: .75;
 }

 .brackets .tl {
   top: 0;
   left: 0;
   border-right: 0;
   border-bottom: 0
 }

 .brackets .tr {
   top: 0;
   right: 0;
   border-left: 0;
   border-bottom: 0
 }

 .brackets .bl {
   bottom: 0;
   left: 0;
   border-right: 0;
   border-top: 0
 }

 .brackets .br {
   bottom: 0;
   right: 0;
   border-left: 0;
   border-top: 0
 }

 /* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
 .site-head {
   position: sticky;
   top: 0;
   z-index: 100;
   background: var(--gold);
   border-bottom: 1.5px solid var(--ink);
 }

 .head-in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: clamp(0.75rem, 2vw, 1.5rem);
   padding-block: .75rem;
   flex-wrap: nowrap;
 }

 .mark {
   display: flex;
   align-items: center;
   gap: .7rem;
   text-decoration: none;
   flex-shrink: 0;
 }

 .mark img,
 .logo-img {
   height: 42px;
   width: auto;
   max-width: 200px;
   object-fit: contain;
   display: block;
 }

 .mark svg {
   width: 30px;
   height: 30px;
   flex: none
 }

 .mark-name {
   font-family: var(--f-script);
   font-size: 1.65rem;
   line-height: 1;
   color: var(--ink);
   padding-top: .28rem;
 }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.8rem);
    flex-shrink: 1;
  }

  .nav a {
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1.5px solid transparent;
    transition: border-color .18s;
    white-space: nowrap;
  }

  .nav a:hover {
    border-bottom-color: var(--ink)
  }

  .head-in .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-family: var(--f-body);
   font-weight: 700;
   font-size: .84rem;
   letter-spacing: .01em;
   text-decoration: none;
   padding: .72rem 1.5rem;
   border: 1.5px solid var(--ink);
   background: var(--ink);
   color: var(--gold);
   transition: background .2s, color .2s, transform .2s;
 }

 .btn:hover {
   background: transparent;
   color: var(--ink);
   transform: translateY(-1px)
 }

 .btn-ghost {
   background: transparent;
   color: var(--ink)
 }

 .btn-ghost:hover {
   background: var(--ink);
   color: var(--gold)
 }

 .btn-light {
   background: var(--gold);
   color: var(--ink);
   border-color: var(--gold)
 }

 .btn-light:hover {
   background: transparent;
   color: var(--gold)
 }

 .btn-outline-light {
   background: transparent;
   color: var(--paper);
   border-color: var(--line-light)
 }

 .btn-outline-light:hover {
   background: var(--paper);
   color: var(--ink);
   border-color: var(--paper)
 }

 .burger {
   background: none;
   border: 1.5px solid var(--ink);
   padding: .5rem .6rem;
   line-height: 0
 }

 .burger svg {
   width: 20px;
   height: 20px;
   stroke: var(--ink);
   stroke-width: 2;
   fill: none
 }

 /* Desktop */
 .nav {
   display: flex;
   gap: 2rem;
 }

 .burger {
   display: none;
 }

 #mnav[hidden] {
   display: none !important;
 }

 /* Mobile */
 @media (max-width:768px) {

   #mnav {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 18px;
     padding: 20px 24px;
     background: #e9c46a;
     box-sizing: border-box;
   }

   #mnav a {
     display: block;
     text-decoration: none;
     font-size: 18px;
     font-weight: 700;
     /* Bold text */
     /* color:#111; */
     padding: 8px 0;
     border-bottom: 1px solid rgba(0, 0, 0, .15);
   }

   #mnav a:last-child {
     border-bottom: none;
   }

   #mnav .btn {
     margin-top: 12px;
     width: 100%;
     text-align: center;
   }
 }

 /* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
 .hero {
   background: var(--gold);
   color: var(--ink);
   padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
   position: relative;
   overflow: hidden;
 }

 .hero .vf-grid {
   opacity: .42
 }

 .hero-in {
   position: relative;
   z-index: 3;
   display: grid;
   gap: clamp(2.5rem, 5vw, 4.5rem);
   grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
   align-items: center
 }

 .hero-tag {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   border: 1.5px solid var(--ink);
   padding: .36rem .85rem;
   margin-bottom: 1.6rem;
 }

 .hero-tag .dot {
   width: 6px;
   height: 6px;
   background: var(--ink);
   border-radius: 50%;
   flex: none
 }

  .hero h1 {
    font-size: clamp(2rem, 6.5vw, 5.5rem);
    margin-bottom: 1.5rem;
  }

 .hero h1 .script {
   display: block;
   font-family: var(--f-script);
   font-weight: 400;
   font-size: .72em;
   letter-spacing: 0;
   line-height: 1.05;
   color: var(--ink);
   margin-top: .08em;
 }

 .hero p.lede {
   margin-bottom: 2.2rem
 }

 .hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin-bottom: 2.6rem
 }

 .hero-meta {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem 2rem;
   border-top: 1.5px solid var(--ink);
   padding-top: 1.1rem;
 }

 .hero-meta div {
   font-family: var(--f-mono);
   font-size: .7rem;
   letter-spacing: .08em
 }

 .hero-meta strong {
   display: block;
   font-family: var(--f-body);
   font-size: .9rem;
   font-weight: 700;
   letter-spacing: 0;
   margin-top: .15rem
 }

 /* Hero frame — stands in for Sam's lead image */
 /* .hero-frame {
   position: relative;
   aspect-ratio: 4/5;
   border: 1.5px solid var(--ink);
   background:
     repeating-linear-gradient(45deg,
       rgba(13, 13, 13, .05) 0 12px, transparent 12px 24px),
     var(--gold-pale);
   display: flex;
   align-items: flex-end;
 } */

  .hero-frame {
   position: relative;
   aspect-ratio: 4/5;
   display: flex;
   align-items: flex-end;
 }

 .hero-frame .brackets {
   color: var(--ink);
   inset: 12px
 }

 .frame-cap {
   position: relative;
   z-index: 3;
   width: 100%;
   padding: 1rem 1.1rem;
   border-top: 1.5px solid var(--ink);
   background: var(--gold);
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 1rem;
 }

 .frame-cap span {
   font-family: var(--f-mono);
   font-size: .68rem;
   letter-spacing: .1em
 }

 /* .frame-hint {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: grid;
   place-content: center;
   text-align: center;
   padding: 2rem;
 } */

  .frame-hint {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: grid;
   place-content: center;
   text-align: center;
 }

 .frame-hint p {
   font-family: var(--f-mono);
   font-size: .7rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--smoke);
   line-height: 1.9
 }

 /* ══════════════════════════════════════════
   SPECIALTY BAR
══════════════════════════════════════════ */
 .strip {
   background: var(--ink);
   color: var(--paper);
   overflow: hidden;
   border-block: 1.5px solid var(--ink);
   padding-block: .85rem
 }

 .strip-run {
   display: flex;
   width: max-content;
   animation: run 32s linear infinite
 }

 .strip:hover .strip-run {
   animation-play-state: paused
 }

 .strip-run span {
   font-family: var(--f-mono);
   font-size: .74rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   padding-inline: 1.8rem;
   white-space: nowrap;
 }

 .strip-run span::after {
   content: '✦';
   margin-left: 1.8rem;
   color: var(--gold);
   font-size: .6rem;
   vertical-align: middle
 }

 @keyframes run {
   from {
     transform: translateX(0)
   }

   to {
     transform: translateX(-50%)
   }
 }

 /* ══════════════════════════════════════════
   SECTION SHELL
══════════════════════════════════════════ */
 .sec {
   padding-block: clamp(3.75rem, 8vw, 6.5rem)
 }

 .sec-dark {
   background: var(--ink);
   color: var(--paper)
 }

 .sec-gold {
   background: var(--gold);
   color: var(--ink)
 }

 .sec-head {
   max-width: 44rem;
   margin-bottom: clamp(2.25rem, 4vw, 3.5rem)
 }

 .sec-head .eyebrow {
   color: var(--gold-deep);
   margin-bottom: .9rem;
   display: block
 }

 .sec-dark .sec-head .eyebrow {
   color: var(--gold)
 }

 .sec-head h2 {
   font-size: clamp(1.95rem, 4.4vw, 3.15rem);
   margin-bottom: 1rem
 }

 .sec-head p {
   color: var(--smoke);
   max-width: 52ch
 }

 .sec-dark .sec-head p {
   color: var(--smoke-light)
 }

 /* ══════════════════════════════════════════
   WHAT SAM SHOOTS
══════════════════════════════════════════ */
 .shoots {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem
 }

 .shoot {
   border: 1.5px solid var(--line-light);
   padding: 1.75rem 1.6rem 1.6rem;
   display: flex;
   flex-direction: column;
   gap: .75rem;
   transition: background .25s, border-color .25s, transform .25s;
 }

 .shoot:hover {
   background: var(--char);
   border-color: var(--gold);
   transform: translateY(-3px)
 }

 .shoot-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem
 }

 .shoot-ico {
   width: 34px;
   height: 34px;
   stroke: var(--gold);
   fill: none;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex: none
 }

 .shoot-no {
   font-family: var(--f-mono);
   font-size: .66rem;
   letter-spacing: .16em;
   color: var(--smoke-light)
 }

 .shoot h3 {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 1.2rem;
   letter-spacing: -.01em
 }

 .shoot p {
   font-size: .87rem;
   color: var(--smoke-light);
   line-height: 1.72
 }

 .shoot ul {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: .35rem;
   margin-top: auto;
   padding-top: .9rem
 }

 .shoot li {
   font-family: var(--f-mono);
   font-size: .62rem;
   letter-spacing: .08em;
   border: 1px solid var(--line-light);
   padding: .2rem .5rem;
   color: var(--smoke-light);
 }

 /* ══════════════════════════════════════════
   WHAT SAM SHOOTS — two tiers.
   Property + architecture lead; the rest sit below,
   deliberately smaller.
══════════════════════════════════════════ */
 .shoots-lead {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
   margin-bottom: 2.75rem
 }

 .lead-card {
   border: 1.5px solid var(--gold);
   background: var(--char);
   padding: 2.1rem 1.9rem 1.8rem;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: .85rem;
   transition: transform .25s, box-shadow .25s;
 }

 .lead-card:hover {
   transform: translateY(-3px);
   box-shadow: 10px 10px 0 rgba(233, 196, 106, .28)
 }

 .lead-card .brackets {
   color: var(--gold);
   inset: 11px;
   opacity: .45
 }

 .lead-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   position: relative;
   z-index: 3
 }

 .lead-ico {
   width: 42px;
   height: 42px;
   stroke: var(--gold);
   fill: none;
   stroke-width: 1.4;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex: none
 }

 .lead-flag {
   font-family: var(--f-mono);
   font-size: .6rem;
   letter-spacing: .16em;
   border: 1px solid var(--gold);
   color: var(--gold);
   padding: .2rem .55rem
 }

 .lead-card h3 {
   font-family: var(--f-display);
   font-weight: 800;
   font-size: 1.75rem;
   letter-spacing: -.02em;
   position: relative;
   z-index: 3
 }

 .lead-card p {
   font-size: .92rem;
   color: var(--smoke-light);
   line-height: 1.75;
   position: relative;
   z-index: 3
 }

 .lead-card ul {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: .4rem;
   margin-top: auto;
   padding-top: 1.1rem;
   position: relative;
   z-index: 3
 }

 .lead-card li {
   font-family: var(--f-mono);
   font-size: .64rem;
   letter-spacing: .08em;
   border: 1px solid var(--line-light);
   padding: .24rem .55rem;
   color: var(--smoke-light)
 }

 .also-head {
   display: flex;
   align-items: baseline;
   gap: 1rem;
   border-top: 1px solid var(--line-light);
   padding-top: 1.5rem;
   margin-bottom: 1.4rem;
 }

 .also-head h3 {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 1.1rem;
   letter-spacing: -.01em
 }

 .also-head p {
   font-size: .85rem;
   color: var(--smoke-light)
 }

 .also {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem
 }

 .also-card {
   border: 1px solid var(--line-light);
   padding: 1.2rem 1.15rem;
   display: flex;
   flex-direction: column;
   gap: .4rem;
   transition: border-color .25s, background .25s;
 }

 .also-card:hover {
   border-color: var(--gold);
   background: var(--char)
 }

 .also-ico {
   width: 24px;
   height: 24px;
   stroke: var(--gold);
   fill: none;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
   margin-bottom: .3rem
 }

 .also-card h4 {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: .98rem;
   letter-spacing: -.01em
 }

 .also-card p {
   font-size: .8rem;
   color: var(--smoke-light);
   line-height: 1.65
 }

 .also-card a {
   font-family: var(--f-mono);
   font-size: .66rem;
   letter-spacing: .12em;
   color: var(--gold);
   text-decoration: none;
   margin-top: auto;
   padding-top: .7rem
 }

 .also-card a:hover {
   text-decoration: underline
 }

 /* ══════════════════════════════════════════
   PORTFOLIO CONTACT SHEET
══════════════════════════════════════════ */
 .sheet {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
   grid-auto-flow: dense;
 }

 .cell {
   position: relative;
   border: 1.5px solid var(--line);
   background:
     repeating-linear-gradient(135deg,
       rgba(13, 13, 13, .04) 0 10px, transparent 10px 20px),
     var(--gold-pale);
   aspect-ratio: 3/2;
   overflow: hidden;
   transition: transform .3s, box-shadow .3s;
 }

 .cell.tall {
   grid-row: span 2;
   aspect-ratio: 2/3;
 }

 .cell:hover {
   transform: translateY(-4px);
   box-shadow: 8px 8px 0 var(--ink)
 }

 .cell .brackets {
   color: var(--ink);
   inset: 9px;
   opacity: 0;
   transition: opacity .25s
 }

 .cell:hover .brackets {
   opacity: 1
 }

 .cell-tag {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 3;
   background: var(--ink);
   color: var(--gold);
   font-family: var(--f-mono);
   font-size: .62rem;
   letter-spacing: .1em;
   padding: .32rem .6rem;
 }

 .cell-mid {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   font-family: var(--f-mono);
   font-size: .64rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--smoke);
   text-align: center;
   padding: 1rem;
 }

 .sheet-note {
   margin-top: 1.5rem;
   border-left: 3px solid var(--gold-deep);
   padding: .85rem 1.1rem;
   background: rgba(233, 196, 106, .16);
   font-size: .85rem;
   color: var(--smoke);
 }

 /* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
 .about {
   display: grid;
   grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
   gap: clamp(2rem, 5vw, 4.5rem);
   align-items: start
 }

 .about-card {
   border: 1.5px solid var(--ink);
   background: var(--gold);
   padding: 1.8rem 1.7rem;
   position: relative;
 }

 .about-card .brackets {
   color: var(--ink);
   inset: 10px
 }

 .about-card h3 {
   font-family: var(--f-display);
   font-size: 1.45rem;
   font-weight: 800;
   letter-spacing: -.015em;
   line-height: 1.2;
   position: relative;
   z-index: 3;
   margin-bottom: .3rem;
   padding-top: .5rem
 }

 .about-card h3 .post {
   display: block;
   font-family: var(--f-mono);
   font-size: .66rem;
   font-weight: 700;
   letter-spacing: .16em;
   margin-top: .4rem;
   opacity: .72;
 }

 .about-card .role {
   font-family: var(--f-mono);
   font-size: .68rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   position: relative;
   z-index: 3;
   margin-bottom: 1.2rem
 }

 .about-card dl {
   position: relative;
   z-index: 3;
   border-top: 1.5px solid var(--ink);
   padding-top: 1rem;
   display: grid;
   gap: .7rem
 }

 .about-card dt {
   font-family: var(--f-mono);
   font-size: .62rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   opacity: .7
 }

 .about-card dd {
   font-weight: 600;
   font-size: .92rem
 }

 .about-body h2 {
   font-size: clamp(1.9rem, 4vw, 2.9rem);
   margin-bottom: 1.3rem
 }

 .about-body p {
   color: var(--smoke);
   margin-bottom: 1.05rem;
   max-width: 58ch
 }

 .about-body p strong {
   color: var(--ink);
   font-weight: 700
 }

 .about-quote {
   border-left: 3px solid var(--gold-deep);
   padding: .6rem 0 .6rem 1.3rem;
   font-family: var(--f-display);
   font-weight: 600;
   font-size: 1.12rem;
   line-height: 1.5;
   letter-spacing: -.01em;
   color: var(--ink);
   margin-block: 1.6rem;
 }

 /* ══════════════════════════════════════════
   PROCESS — genuinely a sequence, so it is numbered
══════════════════════════════════════════ */
 .steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem
 }

 .step {
   border-top: 2px solid var(--ink);
   padding-top: 1.1rem
 }

 .step-n {
   font-family: var(--f-mono);
   font-weight: 700;
   font-size: .72rem;
   letter-spacing: .18em;
   margin-bottom: .7rem;
   display: block
 }

 .step h3 {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: .45rem;
   letter-spacing: -.01em
 }

 .step p {
   font-size: .87rem;
   color: var(--smoke);
   line-height: 1.72
 }

 /* ══════════════════════════════════════════
   PRICING / PACKAGES
══════════════════════════════════════════ */
 .packs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem
 }

 .pack {
   border: 1.5px solid var(--line);
   background: var(--paper);
   padding: 1.8rem 1.6rem;
   display: flex;
   flex-direction: column;
   transition: box-shadow .25s, transform .25s;
 }

 .pack:hover {
   transform: translateY(-3px);
   box-shadow: 8px 8px 0 var(--gold)
 }

 .pack .eyebrow {
   color: var(--gold-deep);
   margin-bottom: .7rem;
   display: block
 }

 .pack h3 {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 1.35rem;
   letter-spacing: -.01em;
   margin-bottom: .5rem
 }

 .pack .from {
   font-family: var(--f-mono);
   font-size: .72rem;
   letter-spacing: .1em;
   color: var(--smoke);
   margin-bottom: 1.1rem
 }

 .pack ul {
   list-style: none;
   display: grid;
   gap: .6rem;
   margin-bottom: 1.5rem
 }

 .pack li {
   font-size: .87rem;
   color: var(--smoke);
   display: flex;
   gap: .6rem;
   line-height: 1.6
 }

 .pack li::before {
   content: '—';
   color: var(--gold-deep);
   flex: none;
   font-weight: 700
 }

 .pack .btn {
   margin-top: auto;
   justify-content: center
 }

 .pack-note {
   grid-column: 1/-1;
   margin-top: .5rem;
   font-size: .82rem;
   color: var(--smoke);
   border-top: 1.5px solid var(--line);
   padding-top: 1.1rem;
 }

 /* ══════════════════════════════════════════
   PACKAGES — two core, one secondary.
   Mirrors the hierarchy in the work section.
══════════════════════════════════════════ */
 .packs-lead {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
   margin-bottom: 1.5rem
 }

 .pack {
   border: 1.5px solid var(--line-light);
   background: var(--char);
   padding: 1.9rem 1.7rem;
   display: flex;
   flex-direction: column;
   transition: box-shadow .25s, transform .25s, border-color .25s;
 }

 .pack:hover {
   transform: translateY(-3px);
   border-color: var(--gold);
   box-shadow: 10px 10px 0 rgba(233, 196, 106, .22)
 }

 .pack-core {
   border-color: var(--gold)
 }

 .pack .eyebrow {
   color: var(--gold);
   margin-bottom: .7rem;
   display: block
 }

 .pack h3 {
   font-family: var(--f-display);
   font-weight: 800;
   font-size: 1.5rem;
   letter-spacing: -.02em;
   margin-bottom: .5rem;
   color: var(--paper)
 }

 .pack .from {
   font-family: var(--f-mono);
   font-size: .7rem;
   letter-spacing: .1em;
   color: var(--smoke-light);
   margin-bottom: 1.2rem
 }

 .pack ul {
   list-style: none;
   display: grid;
   gap: .6rem;
   margin-bottom: 1.6rem
 }

 .pack li {
   font-size: .87rem;
   color: var(--smoke-light);
   display: flex;
   gap: .6rem;
   line-height: 1.65
 }

 .pack li::before {
   content: '—';
   color: var(--gold);
   flex: none;
   font-weight: 700
 }

 .pack .btn {
   margin-top: auto;
   justify-content: center
 }

 .pack-wide {
   border: 1px solid var(--line-light);
   padding: 1.6rem 1.7rem;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 1.5rem;
   align-items: center;
 }

 .pack-wide h3 {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 1.18rem;
   letter-spacing: -.01em;
   color: var(--paper);
   margin-bottom: .35rem
 }

 .pack-wide p {
   font-size: .86rem;
   color: var(--smoke-light);
   line-height: 1.7;
   max-width: 62ch
 }

 .pack-wide .eyebrow {
   color: var(--gold);
   display: block;
   margin-bottom: .6rem
 }

 .pack-note {
   margin-top: 1.5rem;
   font-size: .83rem;
   color: var(--smoke-light);
   line-height: 1.75;
   border-top: 1px solid var(--line-light);
   padding-top: 1.2rem;
 }

 /* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
 .contact {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: clamp(2rem, 5vw, 4.5rem);
   align-items: start
 }

 .contact h2 {
   font-size: clamp(2.1rem, 5vw, 3.4rem);
   margin-bottom: 1.1rem
 }

 .contact h2 .script {
   display: block;
   font-family: var(--f-script);
   font-weight: 400;
   font-size: .85em;
   line-height: 1.1;
   letter-spacing: 0
 }

 .contact>div>p.lede {
   margin-bottom: 2rem
 }

  .reach {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1.5px solid var(--ink);
    padding-top: 1.5rem
  }

 .reach a {
   display: flex;
   align-items: center;
   gap: .95rem;
   text-decoration: none;
   padding: .6rem 0;
   transition: padding-left .2s;
 }

 .reach a:hover {
   padding-left: .5rem
 }

 .reach svg {
   width: 22px;
   height: 22px;
   stroke: var(--ink);
   fill: none;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex: none
 }

 .reach .lbl {
   font-family: var(--f-mono);
   font-size: .62rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   display: block;
   opacity: .65
 }

 .reach .val {
   font-weight: 700;
   font-size: 1rem
 }

 form {
   border: 1.5px solid var(--ink);
   padding: clamp(1.4rem, 3vw, 2rem);
   background: var(--gold-pale)
 }

 .field {
   margin-bottom: 1.05rem
 }

 .field label {
   font-family: var(--f-mono);
   font-size: .64rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   font-weight: 700;
   display: block;
   margin-bottom: .4rem
 }

 .field input,
 .field select,
 .field textarea {
   width: 100%;
   padding: .75rem .9rem;
   font-family: var(--f-body);
   font-size: .92rem;
   border: 1.5px solid var(--ink);
   background: var(--paper);
   color: var(--ink);
   border-radius: 0;
   transition: box-shadow .18s;
 }

 .field input:focus,
 .field select:focus,
 .field textarea:focus {
   outline: none;
   box-shadow: 4px 4px 0 var(--ink);
 }

 .field textarea {
   resize: vertical;
   min-height: 104px
 }

 .field-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem
 }

 form .btn {
   width: 100%;
   justify-content: center;
   margin-top: .4rem
 }

 .form-fine {
   font-family: var(--f-mono);
   font-size: .64rem;
   letter-spacing: .06em;
   line-height: 1.8;
   margin-top: .9rem;
   opacity: .7
 }

 .form-ok {
   display: none;
   border: 1.5px solid var(--ink);
   background: var(--ink);
   color: var(--gold);
   padding: .85rem 1rem;
   font-size: .87rem;
   margin-top: .9rem;
 }

 .form-ok.on {
   display: block
 }

 /* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
 .site-foot {
   background: var(--ink);
   color: var(--paper);
   padding-block: 3.25rem 2rem
 }

 .foot-top {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 2.5rem;
   padding-bottom: 2.25rem;
   border-bottom: 1px solid var(--line-light)
 }

 .foot-mark {
   font-family: var(--f-script);
   font-size: 2rem;
   color: var(--gold);
   line-height: 1;
   margin-bottom: .6rem
 }

 .foot-top p {
   font-size: .85rem;
   color: var(--smoke-light);
   max-width: 34ch;
   line-height: 1.75
 }

 .foot-social {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-top: 1.25rem;
 }

 .foot-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid var(--line-light);
   color: var(--smoke-light);
   background: rgba(250, 246, 236, 0.04);
   transition: all .25s ease;
   text-decoration: none;
 }

 .foot-social a:hover {
   color: var(--ink);
   background: var(--gold);
   border-color: var(--gold);
   transform: translateY(-2px);
 }

 .foot-social svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.75;
 }

 .foot-col h4 {
   font-family: var(--f-mono);
   font-size: .64rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: .9rem
 }

 .foot-col ul {
   list-style: none;
   display: grid;
   gap: .5rem
 }

 .foot-col a {
   font-size: .85rem;
   color: var(--smoke-light);
   text-decoration: none;
   transition: color .18s
 }

 .foot-col a:hover {
   color: var(--gold)
 }

 .foot-bot {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1rem;
   padding-top: 1.5rem;
   font-family: var(--f-mono);
   font-size: .64rem;
   letter-spacing: .08em;
   color: var(--smoke-light)
 }

 /* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
 @media(max-width:1000px) {

   .hero-in,
   .about,
   .contact {
     grid-template-columns: 1fr
   }

   .hero-frame {
     max-width: 420px
   }

   .also {
     grid-template-columns: repeat(2, 1fr)
   }

   .steps {
     grid-template-columns: repeat(2, 1fr)
   }

   .sheet {
     grid-template-columns: repeat(2, 1fr)
   }

    .cell.tall {
      grid-row: span 1;
      aspect-ratio: 2/3;
      height: auto;
    }

   .foot-top {
     grid-template-columns: 1fr 1fr
   }
 }

 @media(max-width:850px) {

   .nav,
   .head-in .btn {
     display: none !important;
   }

   .burger {
     display: block !important;
   }
 }

  @media(max-width:640px) {

    .shoots,
    .shoots-lead,
    .steps,
    .packs,
    .packs-lead,
    .sheet,
    .field-row,
    .foot-top,
    .also,
    .reach {
      grid-template-columns: 1fr;
    }

    .hero {
      padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3.5rem);
    }

    .hero h1 {
      font-size: clamp(1.8rem, 7.5vw, 2.75rem);
    }

    .hero h1 .script {
      font-size: clamp(1.7rem, 8vw, 2.5rem);
    }

    .hero-cta {
      flex-direction: column;
      width: 100%;
    }

    .hero-cta .btn {
      width: 100%;
      justify-content: center;
    }

    .hero-frame {
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
    }

    .pack-wide {
      grid-template-columns: 1fr;
      gap: 1.2rem
    }

    .pack-wide .btn {
      justify-content: center
    }

    .hero-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.9rem 1.2rem;
    }

    .also-head {
      flex-direction: column;
      gap: .3rem
    }

    .reach {
      grid-template-columns: 1fr;
    }

    .reach a {
      word-break: break-all;
    }

    .reach .val {
      font-size: 0.92rem;
      word-break: break-all;
    }
  }

  @media(max-width:400px) {
    .wrap {
      padding-inline: 1rem;
    }

    .hero-meta {
      grid-template-columns: 1fr;
    }

    .frame-cap {
      padding: 0.75rem 0.85rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.3rem;
    }

    .hero h1 {
      font-size: 1.65rem;
    }

    .hero h1 .script {
      font-size: 1.6rem;
    }

    .mark img,
    .logo-img {
      max-width: 150px;
      height: auto;
    }
  }

 @media(prefers-reduced-motion:reduce) {
   * {
     animation-duration: .01ms !important;
     transition-duration: .01ms !important
   }

   html {
     scroll-behavior: auto
   }
 }

 /* Scroll reveal */
 .rise {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .6s ease, transform .6s ease
 }

 .rise.seen {
   opacity: 1;
   transform: none
 }

 @media(prefers-reduced-motion:reduce) {
   .rise {
     opacity: 1;
     transform: none
   }
 }


 /* ===== Added: Hero slider & media background helpers ===== */
 .hero {
   position: relative;
   min-height: 100vh;
   background: #000 !important
 }

 .hero-slider {
   position: absolute;
   inset: 0;
   z-index: 0
 }

 .hero-slider .slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity 1s ease;
   animation: kenburns 12s linear infinite;
 }

 .hero-slider .slide.active {
   opacity: 1
 }

 .hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   z-index: 1;
 }

 .hero-in {
   position: relative;
   z-index: 2
 }

 .bg-media {
   position: relative;
   overflow: hidden
 }

 .bg-media>video,
 .bg-media>img.bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
 }

 .bg-media::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   z-index: 1
 }

 .bg-media>.wrap {
   position: relative;
   z-index: 2
 }

 @keyframes kenburns {
   from {
     transform: scale(1)
   }

   to {
     transform: scale(1.1)
   }
 }

 /* ══════════════════════════════════════════
   PORTFOLIO LIGHTBOX MODAL & CONTROLS
══════════════════════════════════════════ */
 .cell {
   cursor: pointer;
 }

 .lightbox-modal {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .lightbox-modal.active {
   opacity: 1;
   visibility: visible;
 }

 .lightbox-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(13, 13, 13, 0.92);
   backdrop-filter: blur(12px);
 }

 .lightbox-container {
   position: relative;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 1.25rem;
   box-sizing: border-box;
   pointer-events: none;
 }

 .lightbox-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   pointer-events: auto;
   z-index: 3;
   padding: 0.6rem 1.2rem;
   background: rgba(26, 24, 21, 0.75);
   border: 1.5px solid var(--line-light);
   backdrop-filter: blur(8px);
 }

 .lightbox-tag {
   font-family: var(--f-mono);
   font-size: 0.8rem;
   letter-spacing: 0.15em;
   color: var(--gold);
   font-weight: 700;
 }

 .lightbox-controls {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }

 .lightbox-btn {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid var(--line-light);
   color: var(--paper);
   width: 38px;
   height: 38px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
 }

 .lightbox-btn:hover {
   background: var(--gold);
   color: var(--ink);
   border-color: var(--gold);
   transform: translateY(-1px);
 }

 .lightbox-btn.lightbox-close:hover {
   background: #e63946;
   color: #fff;
   border-color: #e63946;
 }

 .lightbox-stage {
   flex: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   pointer-events: auto;
   margin-block: 0.8rem;
 }

 .lightbox-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
   background: rgba(26, 24, 21, 0.8);
   border: 1.5px solid var(--line-light);
   color: var(--gold);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
 }

 .lightbox-nav-btn.prev {
   left: 1.25rem;
 }

 .lightbox-nav-btn.next {
   right: 1.25rem;
 }

 .lightbox-nav-btn:hover {
   background: var(--gold);
   color: var(--ink);
   border-color: var(--gold);
   transform: translateY(-50%) scale(1.1);
 }

 .lightbox-img-wrapper {
   position: relative;
   max-width: 85vw;
   max-height: 75vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   user-select: none;
 }

 .lightbox-img-wrapper img {
   max-width: 85vw;
   max-height: 75vh;
   object-fit: contain;
   border: 1.5px solid var(--gold);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
   transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
   transform-origin: center center;
   cursor: grab;
 }

 .lightbox-img-wrapper img:active {
   cursor: grabbing;
 }

 .lightbox-footer {
   display: flex;
   justify-content: center;
   align-items: center;
   pointer-events: auto;
   z-index: 3;
 }

 .lightbox-counter {
   font-family: var(--f-mono);
   font-size: 0.75rem;
   letter-spacing: 0.15em;
   color: var(--paper);
   background: rgba(26, 24, 21, 0.75);
   padding: 0.35rem 1.1rem;
   border-radius: 20px;
   border: 1.5px solid var(--line-light);
 }

 @media(max-width: 640px) {
   .lightbox-nav-btn {
     width: 42px;
     height: 42px;
   }
   .lightbox-nav-btn.prev {
     left: 0.5rem;
   }
   .lightbox-nav-btn.next {
     right: 0.5rem;
   }
   .lightbox-header {
     padding: 0.5rem 0.8rem;
   }
   .lightbox-tag {
     font-size: 0.7rem;
   }
 }