/* ===========================================================
   SHUTTER FACTORY STUDIO — enhancement layer
   Loaded after style.css so these rules take priority.
=========================================================== */

/* ---- fully black page background (was defaulting to white) ---- */
html, body{ background-color:#000 !important; }
.photolane_fn_wrapper_all, .photolane_fn_content, .photolane_fn_content_in{ background-color:#000; }
ul.project_list{ background-color:#000; }
ul.project_list li{ background-color:#000; }

/* ---- fix uneven gallery grid (was float-based, causing ragged gaps
   between photos of different aspect ratios) ---- */
ul.project_list{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
ul.project_list li{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.photolane_fn_main_img_holder{
  aspect-ratio: 4/5;
  overflow: hidden;
}
.photolane_fn_main_img_holder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 0;
}
@media (min-width: 900px){
  ul.project_list{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  ul.project_list{ grid-template-columns: 1fr; }
}

/* ---- force pure black leftbar everywhere, no white/transparent flashes ---- */
.photolane_fn_leftbar{ background:#000 !important; border-right-color: rgba(255,255,255,.08) !important; }
.photolane_fn_leftbar ul li a{ color:#fff !important; }
.photolane_fn_leftbar .photolane_fn_cright span{ color:#999 !important; }

/* ---- leftbar Instagram/WhatsApp icons ---- */
.sfs-social-ico a{ position:relative; display:block; }
.sfs-social-ico i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:20px; color:#fff !important;
}
.sfs-social-ico a:hover i{ color:#d1332b !important; }

/* ---- rolling gear watermark, 5% opacity, over the gallery ---- */
.sfs-gear-watermark{
  position: absolute;
  top: 0; right: 0;
  width: 420px; height: 420px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  transform: translate(25%, -25%);
  animation: sfsGearSpin 40s linear infinite;
}
@keyframes sfsGearSpin{ to{ transform: translate(25%, -25%) rotate(360deg); } }
.photolane_fn_secondary_wrap{ position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce){
  .sfs-gear-watermark{ animation: none; }
}
/* ---- mobile header redesign: logo + Book a Session top-left,
   hamburger alone top-right, no overlap, no dead center-stacking ---- */
@media (max-width: 768px){
  .photolane_fn_horizontal_menu .horizontal_menu_in{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
  }
  .photolane_fn_horizontal_menu .logo{
    width: auto !important;
    text-align: left !important;
    float: none !important;
  }
  .sfs-mobile-book{
    display: inline-block !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    text-decoration: none;
  }
  .photolane_fn_horizontal_menu .menu_list{
    width: auto !important;
    text-align: right !important;
    float: none !important;
  }
  .photolane_fn_horizontal_menu .menu_list ul{
    display: flex; align-items: center; gap: 14px;
  }
  .photolane_fn_horizontal_menu .menu_list ul li{ margin: 0; }
  .photolane_fn_horizontal_menu .menu_list ul li a{ padding: 6px; }
  .photolane_fn_horizontal_menu .trigger .menu{ width: 28px; }
  .photolane_fn_horizontal_menu .trigger .menu span{ height: 3px; }
}
@media (max-width: 380px){
  .sfs-mobile-book{ padding: 10px 18px !important; }
  .sfs-featured .sfs-featured-head h2{ font-size: 28px; }
}

/* ---- mobile nav social icons (Instagram/WhatsApp) ---- */
.sfs-mobile-social{
  display: flex;
  gap: 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.sfs-mobile-social a{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
}
.sfs-mobile-social i{ font-size: 18px; color: #fff; }
.sfs-mobile-social svg{ width: 18px; height: 18px; color: #fff; }
.sfs-mobile-social a:active, .sfs-mobile-social a:hover{ border-color:#d1332b; }
.sfs-mobile-social a:active i, .sfs-mobile-social a:hover i,
.sfs-mobile-social a:active svg, .sfs-mobile-social a:hover svg{ color:#d1332b; }

/* ---- general mobile polish ---- */
@media (max-width: 768px){
  .navigation_list .list{ padding: 30px 40px; }
  .navigation_list ul.nav li{ margin-bottom: 18px; }
  .navigation_list ul.nav li a span{ font-size: 20px; letter-spacing: 2px; }
  .photolane_fn_horizontal_menu .horizontal_menu_in{ padding: 20px 24px; }
  .photolane_fn_horizontal_menu .logo img{ max-height: 46px; width: auto; }
  .menu_list ul li{ margin-left: 14px; }
  .menu_list img.svg{ width: 22px; height: 22px; }
  .photolane_fn_profile_prev .profile_img img{
    width: 100%; height: auto; max-width: 320px; border-radius: 4px;
  }
  .photolane_fn_profile_prev .info_in{ padding-top: 20px; }
  ul.project_list{ grid-template-columns: 1fr !important; gap: 18px; }
  .photolane_fn_secondary_wrap .project_title h3{ font-size: 32px; }
}

.photolane_fn_secondary_wrap .breadcrumbs p{
  background-color: transparent !important;
  padding-left: 0;
}
.photolane_fn_secondary_wrap .breadcrumbs p a{ color:#999 !important; }
.photolane_fn_secondary_wrap .breadcrumbs p span{ color:#666 !important; }
.photolane_fn_secondary_wrap .project_title h3{ color:#fff !important; }

/* ---- catchier gallery card captions: bold serif italic, red category tag ---- */
.photolane_fn_main_img_holder{ overflow:hidden; }
.photolane_fn_main_img_holder img{
  transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .6s ease;
}
.photolane_fn_main_img_holder:hover img{
  transform: scale(1.08);
  filter: brightness(0.85);
}
.photolane_fn_main_img_holder .img_name{
  padding-right: 20px;
  bottom: 18px;
  left: 18px;
  right: 18px;
}
.photolane_fn_main_img_holder .img_name span{
  font-family: Archivo, Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.3px;
  line-height: 1.25;
  padding: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}
.sfs-cat-tag{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 21;
  background: #d1332b;
  color: #fff;
  font-family: Archivo, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
}
.photolane_fn_main_img_holder:hover .sfs-cat-tag{
  opacity: 1;
  transform: translateY(0);
}

/* ---- pricing page cards: subtle lift on hover ---- */
#pricing-grid > div{ transition: transform .3s ease, border-color .3s ease; }
#pricing-grid > div:hover{ transform: translateY(-6px); border-color:#d1332b !important; }

/* ---- homepage featured moments section ---- */
.sfs-featured{ padding: 90px 0; }
.sfs-featured .sfs-featured-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.sfs-featured .sfs-featured-head span.eyebrow{
  display:block;
  font-family:Archivo, Arial, sans-serif;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#d1332b;
  margin-bottom:14px;
}
.sfs-featured .sfs-featured-head h2{
  font-family:Archivo, Arial, sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:38px;
  color:#fff;
  margin:0 0 14px;
}
.sfs-featured .sfs-featured-head p{
  color:#999;
  font-size:15px;
  line-height:1.7;
}
.sfs-featured-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sfs-featured-card{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #111;
}
.sfs-featured-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1.1s cubic-bezier(.19,1,.22,1);
}
.sfs-featured-card:hover img{ transform: scale(1.1); }
.sfs-featured-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
}
.sfs-featured-caption{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
}
.sfs-featured-caption .sfs-cat{
  display:block;
  font-family:Archivo, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #d1332b;
  margin-bottom: 6px;
}
.sfs-featured-caption .sfs-title{
  font-family: Archivo, Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  line-height: 1.3;
}

@media (max-width: 900px){
  .sfs-featured-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   INTRO SPLASH — homepage only, first visit per session.
   Uses the real logo split into two layers: base (gear erased)
   + isolated gear, which rotates in place over the hole.
=========================================================== */
.intro-splash{
  position: fixed; inset: 0; z-index: 9999; background:#000;
  display:flex; align-items:center; justify-content:center;
  animation: introHide .6s ease forwards;
  animation-delay: 4s;
}
body.intro-active{ overflow:hidden; }
.intro-mark{ opacity:0; animation: introShow .5s ease forwards; }
.intro-logo-wrap{ position:relative; width:min(360px, 78vw); aspect-ratio:817/297; }
.intro-logo-base{ position:absolute; inset:0; width:100%; height:100%; }
.intro-logo-gear{
  position:absolute; left:22.15%; top:25.25%; width:15.79%; height:43.43%;
  transform-origin:50% 50%;
  animation: introGearSpin 2.6s cubic-bezier(.45,0,.3,1) forwards;
  animation-delay: 1s;
}
@keyframes introShow{ to{ opacity:1; } }
@keyframes introGearSpin{ to{ transform: rotate(360deg); } }
@keyframes introHide{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce){
  .intro-splash{ display:none !important; }
}

/* ===========================================================
   ARCHIVE WALL — Home page IS the gallery.
   Horizontally draggable "wall" of photo columns.
=========================================================== */
.af-archive{
  position: relative;
  padding: 20px 0 0;
}
.af-hero-logo{
  position: relative;
  width: 300px;
  max-width: 64vw;
  aspect-ratio: 817/297;
  margin: 0 auto 24px;
}
.af-hero-logo .sfs-logo-base{ position:absolute; inset:0; width:100%; height:100%; }
.af-hero-logo .sfs-logo-gear-anim{
  position: absolute;
  left: 22.15%; top: 25.25%;
  width: 15.79%; height: 43.43%;
  transform-origin: 50% 50%;
  animation: sfsLogoSpin 9s linear infinite;
}
.af-archive-toolbar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.af-archive-count{
  font-family: Archivo, Arial, sans-serif;
  font-size: 12px; color: #666;
  white-space: nowrap;
}
.af-archive-viewport{
  overflow: hidden;
  cursor: grab;
  height: 900px;
  /* hand horizontal swipes to our own drag-scroll JS instead of the
     browser's edge-swipe "go back" gesture (that was the cause of
     swipes on mobile feeling laggy and randomly landing back on the
     home page) — vertical scrolling is left alone so the page still
     scrolls normally over this element */
  touch-action: pan-y;
}
.af-archive-viewport.af-dragging{ cursor: grabbing; }
.af-archive-viewport.af-filtered{
  height: auto;
  overflow: visible;
  cursor: default;
}
/* single-category view: true masonry (CSS multi-column) — each tile
   keeps its own natural aspect ratio, nothing gets cropped */
.af-archive-track.af-filtered-grid{
  display: block;
  columns: 260px;
  column-gap: 10px;
  width: 100%;
  padding: 0 4vw;
}
.af-archive-track.af-filtered-grid .af-tile{
  width: 100%;
  break-inside: avoid;
  margin-bottom: 10px;
}
.af-archive-track{
  display: flex;
  gap: 10px;
  height: 100%;
  width: max-content;
  will-change: transform;
  align-items: flex-start;
}
.af-archive-col{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 260px;
  flex: none;
}
.af-archive-col:nth-child(odd){ margin-top: 60px; }
.af-tile{
  position: relative;
  aspect-ratio: 4/3;
  min-height: 140px;
  width: 100%;
  flex: none;
  overflow: hidden;
  background: #000;
  user-select: none;
}
.af-tile img{ position: relative; z-index: 1; }
.af-tile:hover{ z-index: 3; }
.af-tile img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(100%) contrast(1.05);
  transition: filter .5s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}
.af-tile:hover img{ filter: grayscale(0%) contrast(1.02); }
.af-tile::after{
  content:"";
  position: absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%);
  opacity: 0; transition: opacity .3s ease;
}
.af-tile:hover::after{ opacity: 1; }
.af-tile .af-tile-title{
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  font-family: Archivo, Arial, sans-serif;
  font-size: 13px; color: #fff; line-height: 1.2;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.af-tile:hover .af-tile-title{ opacity: 1; transform: translateY(0); }
.af-tile .af-tile-tag{
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: Archivo, Arial, sans-serif;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: rgba(209,51,43,.85);
  padding: 3px 8px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.af-tile:hover .af-tile-tag{ opacity: 1; transform: translateY(0); }

.af-archive-filters{
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.af-archive-filters button{
  background: transparent; cursor: pointer;
  font-family: Archivo, Arial, sans-serif;
  font-size: 13px; letter-spacing: .5px;
  color: #ccc; padding: 8px 16px; white-space: nowrap;
  border: 1px solid #333; border-radius: 20px;
  transition: all .2s ease;
}
.af-archive-filters button:hover{
  color: #fff; border-color: #666;
}
.af-archive-filters button.active{
  background: #d1332b; border-color: #d1332b; color: #fff;
}

/* ---- click-to-enlarge lightbox ---- */
.af-lightbox{
  position: fixed; inset:0; z-index: 2000;
  background: rgba(4,4,4,.94);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 30px;
}
.af-lightbox.open{ display:flex; }
.af-lightbox.open .af-lightbox-inner{ animation: sfsLightboxIn .4s cubic-bezier(.2,.7,.3,1); }
@keyframes sfsLightboxIn{
  from{ opacity:0; transform: scale(.94) translateY(16px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
.af-lightbox-inner{
  position: relative;
  max-width: 1100px; width: 100%; max-height: 88vh;
  background: #0d0d0d;
  border: 1px solid #262626;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.af-lightbox-inner img{
  width: 100%; height: 100%; max-height: 88vh; object-fit: contain; display:block; background:#000;
}
.af-lightbox-info{
  padding: 44px 38px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  border-top: none;
  border-left: 1px solid #262626;
  position: relative;
}
.af-lightbox-info span{
  order: -1;
  display: inline-block;
  font-family: Archivo, Arial, sans-serif;
  font-size: 11px; letter-spacing: 2px; font-weight: 600; font-style: normal;
  text-transform: uppercase; color: #fff;
  background: #d1332b;
  padding: 6px 14px;
  width: fit-content;
}
.af-lightbox-info h3{
  font-family: Archivo, Arial, sans-serif;
  font-style: italic; font-weight: 700; font-size: 32px; line-height: 1.15; color:#fff; margin:0;
}
.af-lightbox-info::after{
  content: "Shutter Factory Studio";
  font-family: Archivo, Arial, sans-serif;
  font-size: 11px; letter-spacing: 1px; color: #555;
  position: absolute; left: 38px; bottom: 24px;
}
.af-lightbox-close{
  position: absolute; top: 20px; right: 24px; z-index: 999;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.af-lightbox-close:hover{
  background: #d1332b;
  border-color: #d1332b;
  transform: rotate(90deg) scale(1.1);
}

@media (max-width: 700px){
  .af-lightbox{ padding: 0; }
  .af-lightbox-inner{
    display: block;
    max-width: 100%; width: 100%;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    border: none;
  }
  .af-lightbox-inner img{
    width: 100%; height: 100%;
    max-height: 100vh; max-height: 100dvh;
    object-fit: contain;
  }
  .af-lightbox-info{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    border: none;
    padding: 50px 22px 26px;
  }
  .af-lightbox-info h3{ font-size: 22px; }
  .af-lightbox-info::after{ left: 22px; bottom: 10px; }
  .af-lightbox-close{ top: 16px; right: 16px; z-index: 999; }
}

@media (max-width: 700px){
  .af-archive-viewport{ height: 700px; }
  .af-archive-col{ width: 170px; }
  .af-archive-col:nth-child(odd){ margin-top: 36px; }
  .af-hero-logo{ width: 220px; margin-bottom: 18px; }
  /* category (filtered) view on mobile: a plain single-column stack,
     one photo beneath the next — the CSS multi-column masonry used on
     desktop can land 2 narrow columns at phone widths and leave big
     uneven gaps between photos of different heights. The "All" wall
     above (the auto-scrolling marquee) is untouched — this only
     targets the filtered category grid. */
  .af-archive-track.af-filtered-grid{
    display: flex;
    flex-direction: column;
    align-items: center;
    columns: unset;
    /* border-box is the fix: width:100% + side padding in the default
       content-box model was adding the padding ON TOP of the full
       viewport width, pushing every photo 19.5px off-screen to the
       right instead of centering them */
    box-sizing: border-box;
    width: 100%;
    /* single source of spacing between photos — the base .af-archive-track
       rule also sets a 10px flex "gap", which was stacking with this
       rule's own margin-bottom and doubling the space between photos */
    gap: 14px;
    padding: 0 5vw;
  }
  .af-archive-track.af-filtered-grid .af-tile{
    width: 100%;
    margin-bottom: 0;
  }
  .af-archive-toolbar{
    justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: 4px;
    /* the row scrolls horizontally, but the browser's own scrollbar
       track underneath it read as a stray line under the categories —
       hide it, the pills themselves are enough of a scroll cue */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .af-archive-toolbar::-webkit-scrollbar{ display: none; }
  .af-archive-filters{ flex-wrap: nowrap; }
  .af-archive-filters button{
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid #333;
    border-radius: 20px;
    color: #ccc;
    flex: none;
  }
  .af-archive-filters button.active{
    background: #d1332b; border-color: #d1332b; color: #fff;
  }
  .af-archive-count{ display:none; }
}

/* ===========================================================
   CAMERA STEP DIAL — appears only while a single category is being
   browsed. Small up / down arrow buttons step to the previous /
   next photo; the center SET button reveals the current photo in
   color.
=========================================================== */
.sfs-cat-dial{
  position: fixed;
  left: 14px; bottom: 88px;
  z-index: 480;
  width: 72px; height: 72px;
  box-sizing: border-box;
  display: none;
  align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sfs-cat-dial.sfs-cat-dial-show{
  display: flex;
  opacity: 1;
  transform: scale(1);
}
/* the bezel — a small dark disc holding the up arrow, SET, and the
   down arrow, stacked top to bottom */
.sfs-cat-dial-wheel{
  width: 100%; height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #333 0%, #191919 55%, #0a0a0a 100%);
  border: 3px solid #060606;
  box-shadow:
    0 6px 16px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 2px 3px rgba(255,255,255,.12),
    inset 0 -3px 6px rgba(0,0,0,.6);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 0;
  overflow: hidden;
}
/* every control's box (button height, gaps, SET diameter) is sized so
   the three stack to less than the wheel's own inner height — nothing
   is allowed to push past the circular bezel's edge */
.sfs-cat-dial-step{
  -webkit-appearance: none;
  appearance: none;
  margin: 0; padding: 0;
  border: none;
  background: transparent;
  width: 100%; height: 15px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.sfs-cat-dial-step:hover{ color: #fff; }
.sfs-cat-dial-step:active{ transform: scale(.82); }
.sfs-cat-dial-set{
  -webkit-appearance: none;
  appearance: none;
  margin: 0; padding: 0;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(165deg, #2e2e2e, #040404);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: transform .15s ease;
}
.sfs-cat-dial-set:active{ transform: scale(.88); }
.sfs-cat-dial-center-nub{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bbb, #333 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.sfs-cat-dial-center-label{
  font-family: Archivo, Arial, sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #999;
}
@media (min-width: 701px){
  .sfs-cat-dial{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .sfs-cat-dial{ transition: none; }
  .sfs-cat-dial-step, .sfs-cat-dial-set{ transition: none; }
}
/* a SET press reveals color on whichever photo is currently beside
   the button — press again to send it back to black & white */
.af-tile.sfs-cat-color img{
  filter: grayscale(0%) contrast(1.02);
  transition: filter .6s ease;
}

/* ===========================================================
   PERSISTENT SPINNING LOGO — gear rotates continuously,
   everywhere the logo appears (header, nav drawer, footer).
=========================================================== */
.sfs-logo-spin{
  position: relative;
  display: inline-block;
  width: 170px;
  max-width: 100%;
  aspect-ratio: 817/297;
  vertical-align: middle;
}
.sfs-logo-spin .sfs-logo-base{
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.sfs-logo-spin .sfs-logo-gear-anim{
  position: absolute;
  left: 22.15%; top: 25.25%;
  width: 15.79%; height: 43.43%;
  transform-origin: 50% 50%;
  animation: sfsLogoSpin 9s linear infinite;
}
@keyframes sfsLogoSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .sfs-logo-gear-anim{ animation: none; }
}

/* ---- photos: continuous subtle drift (real, ongoing movement) ---- */
.af-tile img{
  animation: sfsPhotoDrift 16s ease-in-out infinite alternate;
}
.af-tile:nth-child(3n) img{ animation-duration: 20s; }
.af-tile:nth-child(3n+1) img{ animation-duration: 13s; animation-delay: -4s; }
.af-tile:nth-child(3n+2) img{ animation-duration: 18s; animation-delay: -8s; }
@keyframes sfsPhotoDrift{
  from{ transform: scale(1) translate(0,0); }
  to{ transform: scale(1.09) translate(-1%, -1%); }
}
@media (prefers-reduced-motion: reduce){
  .af-tile img{ animation: none; }
}

/* ---- general scroll-reveal utility, used across About/Contact/Pricing ---- */
.sfs-reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.sfs-reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .sfs-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- persistent floating WhatsApp button, every page ---- */
.sfs-fab-cluster{
  position: fixed;
  right: 20px; bottom: 90px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sfs-fab{
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  position: relative;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.sfs-fab i{ font-size: 21px; color: #fff; }
.sfs-fab-whatsapp{ background: #25D366; }
.sfs-fab-instagram{ background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.sfs-fab-phone{ background: #d1332b; }
.sfs-fab:hover{
  transform: scale(1.15) rotate(-12deg);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.sfs-fab-label{
  position: absolute;
  right: 62px; top: 50%; transform: translateY(-50%) translateX(8px);
  font-family: Archivo, Arial, sans-serif;
  font-size: 12px; font-weight: 600; color: #fff;
  white-space: nowrap;
  background: rgba(10,10,10,.85);
  padding: 6px 12px;
  border-radius: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.sfs-fab:hover .sfs-fab-label{ opacity: 1; transform: translateY(-50%) translateX(0); }
.sfs-fab-toggle{ display: none; }
@media (max-width: 768px){
  .sfs-fab-cluster{ right: 14px; bottom: 80px; gap: 10px; position: fixed; }
  .sfs-fab{ width: 46px; height: 46px; }
  .sfs-fab i{ font-size: 18px; }
  .sfs-fab-label{ display: none; }

  /* collapsible toggle: only the toggle stays in flow, the 3 actions
     become absolutely-positioned and fan upward when opened, so the
     cluster's resting footprint on mobile is a single small button */
  .sfs-fab-toggle{
    display: flex;
    background: #d1332b;
    order: -1;
    position: relative;
    z-index: 2;
  }
  .sfs-fab-toggle-icon{ position: relative; width: 16px; height: 16px; }
  .sfs-fab-toggle-icon::before,
  .sfs-fab-toggle-icon::after{
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .sfs-fab-toggle-icon::before{ top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
  .sfs-fab-toggle-icon::after{ left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
  .sfs-fab-cluster.sfs-fab-open .sfs-fab-toggle-icon::before{ transform: rotate(45deg); }
  .sfs-fab-cluster.sfs-fab-open .sfs-fab-toggle-icon::after{ transform: rotate(45deg); }

  .sfs-fab-cluster .sfs-fab:not(.sfs-fab-toggle){
    position: absolute;
    right: 0; bottom: 0;
    opacity: 0;
    transform: scale(.4) translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .sfs-fab-cluster.sfs-fab-open .sfs-fab:nth-child(2){
    opacity: 1; pointer-events: auto;
    transform: translateY(-58px) scale(1);
    transition-delay: .02s;
  }
  .sfs-fab-cluster.sfs-fab-open .sfs-fab:nth-child(3){
    opacity: 1; pointer-events: auto;
    transform: translateY(-116px) scale(1);
    transition-delay: .06s;
  }
  .sfs-fab-cluster.sfs-fab-open .sfs-fab:nth-child(4){
    opacity: 1; pointer-events: auto;
    transform: translateY(-174px) scale(1);
    transition-delay: .1s;
  }
}
@media (prefers-reduced-motion: reduce){
  .sfs-fab:hover{ transform: none; }
  .sfs-fab-cluster .sfs-fab:not(.sfs-fab-toggle),
  .sfs-fab-toggle-icon::before,
  .sfs-fab-toggle-icon::after{ transition: none; }
}

/* ===========================================================
   ABOUT PAGE — redesigned hero: visible name, rotating badge,
   stat counters.
=========================================================== */
.af-about-hero{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0 100px;
}
.af-about-photo{ position: relative; }
.af-about-photo img{
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display:block;
  filter: grayscale(15%);
}
/* camera-viewfinder frame over the bio portrait — corner brackets +
   faux exposure readouts + a role caption, echoing the same camera
   motif used in the Instagram popup elsewhere on the site */
.af-about-frame{ position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.af-about-frame-corner{
  position: absolute; width: 26px; height: 26px;
  border: 2px solid rgba(255,255,255,.85);
}
.af-about-frame-corner.tl{ top: 18px; left: 18px; border-right: none; border-bottom: none; }
.af-about-frame-corner.tr{ top: 18px; right: 18px; border-left: none; border-bottom: none; }
.af-about-frame-tag{
  position: absolute; top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: Archivo, Arial, sans-serif;
  font-size: 10px; letter-spacing: 1.5px; color: #fff;
  background: rgba(10,10,10,.6);
  padding: 5px 10px;
  white-space: nowrap;
}
.af-about-frame-tag.tl{ left: 54px; }
.af-about-frame-tag.tr{ right: 54px; }
.af-about-frame-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #d1332b;
  animation: sfsRecPulse 1.6s ease-in-out infinite;
}
.af-about-frame-role{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 22px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%);
  font-family: Archivo, Arial, sans-serif;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.af-about-frame-role::before{ content: "●"; color: #d1332b; margin-right: 8px; font-size: 9px; }
@media (prefers-reduced-motion: reduce){
  .af-about-frame-dot{ animation: none; }
}
.af-about-badge{
  position: absolute; bottom: -30px; right: -30px;
  width: 130px; height: 130px;
  z-index: 3;
}
.af-about-badge-ring{
  width: 100%; height: 100%;
  animation: sfsLogoSpin 16s linear infinite;
}
.af-about-badge-ring text{
  font-family: Archivo, Arial, sans-serif;
  font-size: 12.5px;
  letter-spacing: 2px;
  fill: #d1332b;
}
.af-about-badge-center{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0a0a0a; border-radius: 50%;
  width: 76px; height: 76px; margin: auto;
  font-family: Archivo, Arial, sans-serif;
  font-size: 26px; color: #fff; line-height: 1;
  border: 1px solid #262626;
}
.af-about-badge-center small{
  font-family: Archivo, Arial, sans-serif;
  font-size: 9px; letter-spacing: 2px; color: #d1332b; margin-top: 2px;
}
.af-about-name{
  font-family: Archivo, Arial, sans-serif;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.95;
  color: #fff;
  margin: 10px 0 24px;
  letter-spacing: 0.5px;
}
.af-about-name-accent{
  display: block;
  color: #d1332b;
  -webkit-text-stroke: 1px #d1332b;
}
.af-about-lead{ color:#999; font-size:15px; line-height:1.8; max-width:60ch; margin-bottom:36px; }
.af-about-stats{
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-bottom: 36px; padding-bottom: 30px;
  border-bottom: 1px solid #262626;
}
.af-about-stats > div{ display:flex; flex-direction:column; gap:4px; }
.af-about-stats b{
  font-family: Archivo, Arial, sans-serif;
  font-size: 34px; color: #fff;
}
.af-about-stats span{
  font-family: Archivo, Arial, sans-serif;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #777;
}

@media (max-width: 900px){
  .af-about-hero{ grid-template-columns: 1fr; gap: 40px; padding: 30px 0 60px; }
  .af-about-badge{ width: 100px; height: 100px; right: -10px; bottom: -20px; }
  .af-about-badge-center{ width: 62px; height: 62px; font-size: 20px; }
  .af-about-name{ font-size: clamp(38px, 12vw, 60px); }
}

/* ---- fix: closing signature name was dark gray on dark background ---- */
.photolane_fn_full_width_container .content_holder h3{
  color: #fff !important;
}
.photolane_fn_full_width_container .content_holder h3 + span{
  color: #d1332b !important;
}

/* ---- push the new font pairing harder: nav + buttons + labels
   now all use Archivo, varied by weight only — less heavy than Anton ---- */
ul.nav li a span,
.navigation_list ul.nav li a span,
a.photolane_fn_btn,
.sfs-mobile-book,
.af-archive-filters button,
.breadcrumbs p,
.project_title h3,
.tc{
  font-family: Archivo, Arial, sans-serif !important;
  letter-spacing: 1px;
}

/* ---- fix: masonry "knowledge" card titles were dark-on-dark (invisible) ---- */
.photolane_fn_secondary_wrap .photer_knowledge .title_holder h2{
  color: #fff !important;
}
.photolane_fn_secondary_wrap .photer_knowledge .title_holder span{
  color: #999 !important;
}

/* ===========================================================
   TYPE SYSTEM — one typeface (Archivo), weight does the work
   for headlines/nav/buttons/labels; Archivo (with real bold,
   semi-bold, and italic weights) for body copy.
=========================================================== */
h1, h2, h3, .af-about-name{ font-weight: 700; }
.tc{ font-weight: 700; font-style: italic; }
ul.nav li a span,
.navigation_list ul.nav li a span,
a.photolane_fn_btn,
.sfs-mobile-book,
.af-archive-filters button{
  font-weight: 600;
  font-style: normal;
}
.af-about-lead, .lead, p em, .about_msg p{
  font-style: italic;
}
.af-cap-title, .af-lightbox-title{
  font-weight: 700;
  font-style: italic;
}
.af-cap-meta, .af-lightbox-cat, .af-tile-tag{
  font-weight: 600;
  font-style: normal;
}

/* ===========================================================
   ABOUT PAGE — single-row photo strip, moves left to right,
   forever, on its own (same engine as the homepage wall).
=========================================================== */
.af-strip-wrap{ padding: 40px 0 20px; }
.af-strip-viewport{
  overflow: hidden;
  cursor: grab;
  height: 280px;
  /* same fix as the homepage wall: stop the browser's own swipe
     gesture (page-back / scroll fighting our drag) from hijacking a
     horizontal drag here */
  touch-action: pan-y;
}
.af-strip-viewport.af-dragging{ cursor: grabbing; }
.af-strip-track{
  display: flex;
  gap: 10px;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.af-strip-track .af-tile{
  position: relative;
  height: 100%;
  width: auto;
  flex: none;
  overflow: hidden;
  background: #0a0a0a;
  user-select: none;
}
@media (max-width: 700px){
  .af-strip-viewport{ height: 180px; }
}

/* ---- drop-menu (drawer) logo: enlarged camera+gear mark, centered ---- */
.sfs-drawer-logo{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.sfs-drawer-logo .sfs-logo-spin{ width: 220px; max-width: 100%; flex-shrink: 0; }
.sfs-drawer-mark{
  position: relative;
  display: block;
  width: 64px;
  aspect-ratio: 220/180;
}
.sfs-drawer-mark-base{ position:absolute; inset:0; width:100%; height:100%; }
.sfs-drawer-mark-gear{
  position: absolute;
  left: 32.05%; top: 16.4%;
  width: 59.1%; height: 72.2%;
  transform-origin: 50% 50%;
  animation: sfsLogoSpin 9s linear infinite;
}

/* ---- drop-menu nav links: match the same font used on the photo tiles,
   keep the existing font size unchanged ---- */
.photolane_fn_leftbar_nav ul.nav li a span{
  font-family: Archivo, Arial, sans-serif;
  font-weight: 600;
}

/* ---- small camera+gear "back to home" mark used inline in page content ---- */
.af-page-mark{ margin-bottom: 24px; display: flex; justify-content: center; }
.af-page-mark .sfs-drawer-mark{ width: 66px; }

/* ---- fix: "Get in Touch With Us" heading was dark-on-dark (invisible) ---- */
.photolane_fn_form h3{
  color: #fff !important;
}

/* ---- fix: contact form inputs were white-background/dark-text with the
   browser's default font instead of the site's — redesigned for the dark
   theme, explicit font so it can't silently fall back again ---- */
.photolane_fn_form form input[type="text"],
.photolane_fn_form form textarea{
  font-family: Archivo, Arial, sans-serif !important;
  color: #fff !important;
  background-color: #141414 !important;
  border-color: #333 !important;
}
.photolane_fn_form form input[type="text"]::placeholder,
.photolane_fn_form form textarea::placeholder{
  color: #777;
}
.photolane_fn_form form input[type="text"]:focus,
.photolane_fn_form form input[type="text"]:hover,
.photolane_fn_form form textarea:focus,
.photolane_fn_form form textarea:hover{
  border-color: #d1332b !important;
}

/* ---- Book a Session button redesign: bold solid fill, lift on hover
   (also applied to .sfs-mobile-book, the header's Book a Session link,
   so it matches this style exactly everywhere on the site) ---- */
a.photolane_fn_btn,
.sfs-mobile-book{
  background: #d1332b !important;
  color: #fff !important;
  border: none !important;
  padding: 18px 36px !important;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 8px 24px rgba(209,51,43,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease;
  position: relative;
}
a.photolane_fn_btn::after,
.sfs-mobile-book::after{
  content: "→";
  margin-left: 10px;
  display: inline-block;
  transition: transform .25s ease;
}
a.photolane_fn_btn:hover,
.sfs-mobile-book:hover{
  background: #fff !important;
  color: #d1332b !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(209,51,43,.45);
}
a.photolane_fn_btn:hover::after,
.sfs-mobile-book:hover::after{ transform: translateX(4px); }
@media (max-width: 380px){
  .sfs-mobile-book{ padding: 10px 18px !important; }
}

/* ---- mobile header: hamburger alone on the left (small logo hidden —
   the big logo already appears in the page content below), Book a
   Session alone on the right ---- */
@media (max-width: 768px){
  .photolane_fn_horizontal_menu .logo.sfs-logo-with-trigger{
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .photolane_fn_horizontal_menu .logo.sfs-logo-with-trigger .trigger{
    display: flex;
    align-items: center;
  }
}

/* ---- mobile nav drawer: true overlay, semi-transparent, over content
   (not pushing the page down like the old in-flow version) ---- */
.photolane_fn_horizontal_menu .navigation_list{
  background-color: rgba(10,10,10,.94) !important;
  backdrop-filter: blur(6px);
  z-index: 600 !important;
  padding-top: 100px !important;
}
.photolane_fn_horizontal_menu .horizontal_menu_in{
  position: relative;
  z-index: 601;
}

/* ---- fix: 100px top padding on Contact/Pricing pages left a large
   empty gap above the page-mark icon ---- */
.photolane_fn_contact{
  padding-top: 30px !important;
}

/* ---- fix: About page wrapper had 100px top margin, same gap issue
   as Contact/Pricing ---- */
.photolane_fn_secondary_wrap_in{
  margin-top: 30px !important;
}

/* ---- Pricing & Contact description text: same italic Archivo style
   used on photo captions, for visual consistency site-wide ---- */
.photolane_fn_contact p,
.photolane_fn_form > p{
  font-style: italic;
}

/* ---- guarantee: "Get in Touch With Us" (and any .photolane_fn_form
   heading) uses the site font at full weight, no matter what
   specificity conflict might otherwise win ---- */
.photolane_fn_form h3{
  font-family: Archivo, Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* ===========================================================
   INSTAGRAM FOLLOW POPUP — appears once per session, homepage
   only, a short delay after arrival.
=========================================================== */
.sfs-ig-popup{
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.sfs-ig-popup.open{
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}
.sfs-ig-popup-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
}
/* ---- the camera body: dark chassis, rounded like a grip corner ---- */
.sfs-ig-cam{
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, #2c2c2c, #111 60%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px 20px 24px 24px;
  padding: 30px 12px 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(14px) scale(.97);
  transition: transform .35s cubic-bezier(.19,1,.22,1);
}
.sfs-ig-popup.open .sfs-ig-cam{ transform: translateY(0) scale(1); }

/* ---- viewfinder hump, centered on the top edge ---- */
.sfs-ig-cam-hump{
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 24px;
  background: linear-gradient(165deg, #2c2c2c, #0e0e0e);
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  border-radius: 9px 9px 3px 3px;
  display: flex; align-items: center; justify-content: center;
}
.sfs-ig-cam-eyecup{
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #050505;
  border: 3px solid #333;
}

/* small nudge toward the rail's working buttons — sits at the top of
   the card, pointing right at AF / C1 / ISO / EV */
.sfs-ig-cam-hint{
  text-align: center;
  font-family: Archivo, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin: 0 0 10px;
}
.sfs-ig-cam-hint span{ color: #d1332b; }

.sfs-ig-cam-row{
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* ---- the "screen": where the actual content lives ---- */
.sfs-ig-cam-screen{
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 65%), #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
  /* bottom padding has to clear the two-line ISO/EV readout stacked
     in this corner — a single-line tag needed less room */
  padding: 24px 12px 46px;
}
/* pressing AF racks the content out of focus and back in, like an
   autofocus motor hunting for a lock, then settling sharp — this
   targets just the photo/text content, not the AF brackets on top,
   which need to stay crisp to read as "in focus" */
.sfs-ig-cam-content.sfs-ig-focusing{
  animation: sfsCamFocusHunt .9s ease-in-out;
}
@keyframes sfsCamFocusHunt{
  0%{ filter: blur(0); }
  22%{ filter: blur(7px); }
  46%{ filter: blur(.5px); }
  64%{ filter: blur(4px); }
  100%{ filter: blur(0); }
}
/* ISO / EV buttons: a quick brightness pulse on the content, brighter
   for "more exposure" and darker for "less" — same non-descendant
   targeting rule as the AF blur applies here too */
.sfs-ig-cam-content.sfs-ig-expo-up{ animation: sfsCamExpoUp .5s ease; }
.sfs-ig-cam-content.sfs-ig-expo-down{ animation: sfsCamExpoDown .5s ease; }
@keyframes sfsCamExpoUp{
  0%{ filter: brightness(1); }
  30%{ filter: brightness(1.55); }
  100%{ filter: brightness(1); }
}
@keyframes sfsCamExpoDown{
  0%{ filter: brightness(1); }
  30%{ filter: brightness(.55); }
  100%{ filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce){
  .sfs-ig-cam-content.sfs-ig-expo-up,
  .sfs-ig-cam-content.sfs-ig-expo-down{ animation: none; }
}
/* the AF confirm brackets, centered over the screen — flash in as
   the focus "acquires", then fade back out */
.sfs-ig-cam-af-box{
  position: absolute;
  top: 50%; left: 50%;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.sfs-ig-cam-af-box.sfs-ig-active{
  animation: sfsCamAfBox .9s ease-in-out;
}
.sfs-ig-cam-af-box .c{ position: absolute; width: 16px; height: 16px; }
.sfs-ig-cam-af-box .c.tl{ top: 0; left: 0; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.sfs-ig-cam-af-box .c.tr{ top: 0; right: 0; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.sfs-ig-cam-af-box .c.bl{ bottom: 0; left: 0; border-bottom: 2px solid #fff; border-left: 2px solid #fff; }
.sfs-ig-cam-af-box .c.br{ bottom: 0; right: 0; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
@keyframes sfsCamAfBox{
  0%{ opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
  18%{ opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  50%{ opacity: 1; transform: translate(-50%,-50%) scale(.9); }
  78%{ opacity: 1; transform: translate(-50%,-50%) scale(1.02); }
  100%{ opacity: 0; transform: translate(-50%,-50%) scale(.96); }
}
@media (prefers-reduced-motion: reduce){
  .sfs-ig-cam-screen.sfs-ig-focusing{ animation: none; }
  .sfs-ig-cam-af-box.sfs-ig-active{ animation: none; }
}
.sfs-ig-cam-tag{
  position: absolute;
  display: flex; align-items: center; gap: 4px;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.4);
}
.sfs-ig-cam-tag-tl{ top: 8px; left: 10px; }
.sfs-ig-cam-tag-br{ bottom: 8px; right: 10px; }
.sfs-ig-cam-tag-bl{ bottom: 8px; left: 10px; transition: opacity .15s ease; }
.sfs-ig-cam-tag-stack{
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
/* shutter-press flash, and the frame-counter tick it drives —
   the flash sits above the content but is unaffected by the AF
   blur since it's a sibling, not a descendant, of .sfs-ig-cam-content */
.sfs-ig-cam-flash{
  position: absolute; inset: 0; z-index: 4;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.sfs-ig-cam-flash.sfs-ig-flash-active{
  animation: sfsCamFlash .5s ease-out;
}
@keyframes sfsCamFlash{
  0%{ opacity: .85; }
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .sfs-ig-cam-flash.sfs-ig-flash-active{ animation: none; }
}
.sfs-ig-cam-rec-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d1332b;
  box-shadow: 0 0 5px #d1332b;
  animation: sfsRecPulse 1.6s ease-in-out infinite;
}
@keyframes sfsRecPulse{ 50%{ opacity: .3; } }

/* ---- the control rail down the right edge ---- */
.sfs-ig-cam-rail{
  flex: none;
  width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.sfs-ig-cam-shutter{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #d1332b;
  border: 3px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(209,51,43,.4);
  transition: transform .2s ease, box-shadow .2s ease;
  flex: none;
}
.sfs-ig-cam-shutter:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(209,51,43,.55);
}
.sfs-ig-cam-btn{
  font-family: Archivo, Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #888;
  width: 30px; height: 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
/* the AF button is the one functioning control here — pressing it
   racks the popup's "focus" in and out, like an autofocus motor
   hunting for a lock */
.sfs-ig-cam-af{
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sfs-ig-cam-af:hover, .sfs-ig-cam-af:focus-visible{
  border-color: #d1332b;
  color: #fff;
}
.sfs-ig-cam-af:active{ transform: scale(.94); }
/* C1 doubles as a little shutter-release: a click fires a quick flash
   over the screen and ticks the frame counter forward, like a
   camera's custom-function button wired to "capture". */
.sfs-ig-cam-c1{
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sfs-ig-cam-c1:hover, .sfs-ig-cam-c1:focus-visible{
  border-color: #d1332b;
  color: #fff;
}
.sfs-ig-cam-c1:active{ transform: scale(.94); }
/* ISO / EV: cycle through preset values, updating the readout in the
   screen's bottom-right corner and giving the content a brightness
   pulse — a small stand-in for how those settings actually behave */
.sfs-ig-cam-iso,
.sfs-ig-cam-ev{
  cursor: pointer;
  font-size: 7px;
  transition: border-color .2s ease, color .2s ease;
}
.sfs-ig-cam-iso:hover, .sfs-ig-cam-iso:focus-visible,
.sfs-ig-cam-ev:hover, .sfs-ig-cam-ev:focus-visible{
  border-color: #d1332b;
  color: #fff;
}
.sfs-ig-cam-iso:active,
.sfs-ig-cam-ev:active{ transform: scale(.94); }
.sfs-ig-cam-dial{
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.1), transparent 60%);
  margin-top: auto;
  flex: none;
}

.sfs-ig-popup-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 18px;
}
.sfs-ig-popup-thumb{
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 3px;
  background: #141414;
}
.sfs-ig-popup-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sfs-ig-popup-body{
  text-align: center;
}
.sfs-ig-popup-body h3{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: Archivo, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  margin: 0 0 9px;
}
.sfs-ig-popup-body h3 i.xcon-instagram{
  font-size: 16px;
  color: #d1332b;
}
.sfs-ig-popup-body p{
  font-family: Archivo, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #999;
  margin: 0 0 20px;
}
.sfs-ig-popup-btn{
  display: inline-block;
}
@media (max-width: 420px){
  .sfs-ig-cam{ padding: 28px 8px 10px; }
  .sfs-ig-cam-screen{ padding: 22px 10px 42px; }
  .sfs-ig-cam-rail{ width: 34px; gap: 10px; }
  /* AF, ISO and EV stay and stay working — only C1 (purely a fun
     "take a photo" extra, not one of the settings the person is
     meant to try) drops here to save a little width */
  .sfs-ig-cam-c1{ display: none; }
  .sfs-ig-cam-shutter{ width: 32px; height: 32px; }
  .sfs-ig-cam-dial{ width: 24px; height: 24px; }
}