:root{
  --bg:#050605;
  --panel:#0b0d0a;
  --panel2:#0b0d0a50f;
  --text:#f5f0df;
  --muted:#a8a38f;
  --line:rgba(212,175,55,.22);
  --accent:#d4af37;
  --green:#6f9f45;
  --green-soft:#9fbd72;
  --gold:#d4af37;
  --max:1380px;
}
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}

.container{width:min(calc(100% - 64px),var(--max));margin-inline:auto}

.noise{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}

.cursor-glow{
	position:fixed;
	width:350px;
	height:350px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(212,175,55,.08),transparent 70%);
	transform:translate(-50%,-50%);
	pointer-events:none;z-index:0
	}
	
.nav-wrap{
	position:fixed;
	top:0;width:100%;
	z-index:100;
	transition:.4s
	}

.nav-wrap.scrolled{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.nav-wrap.scrolled .nav{
  height:68px;
}

.nav-wrap.scrolled .brand-logo{
  width:160px!important;
  max-width:160px!important;
  flex-basis:160px!important;
}

.nav-wrap.scrolled .brand-logo img{
  width:160px!important;
  max-width:160px!important;
  max-height:42px!important;
}

.nav{
	height:84px;
	display:flex;
	align-items:center;
	justify-content:space-between
	}
.brand{
	font-family:'Space Grotesk';
	font-weight:700;
	letter-spacing:-.05em;
	font-size:20px
	}
.nav-links{
	display:flex;
	gap:34px;
	font-size:12px;
	font-weight:400;
	letter-spacing:.13em;
	color:var(--accent);
	}
.nav-links a{
  position:relative;
  color:var(--accent);
  text-decoration:none;
}

.menu-btn{
	display:none;
	background:none;
	border:0;
	width:42px;
	height:42px;
	padding:11px;
	cursor:pointer
	}
.menu-btn span{
	display:block;
	height:1px;
	background:var(--text);
	margin:6px 0
	}
.hero{
	height:100svh;
	min-height:100svh;
	position:relative;
	display:flex;
	align-items:center;
	overflow:hidden;
	}
.hero-media,
.hero-overlay{position:absolute;inset:0}
.hero-media{background:linear-gradient(125deg,#050605,#161616 65%,#090909)}
.hero-grid-bg{position:absolute;inset:-20%;opacity:.25;background-image:linear-gradient(rgba(212,175,55,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.07) 1px,transparent 1px);background-size:70px 70px;transform:perspective(700px) rotateX(55deg) translateY(12%)}.hero-orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb-1{width:52vw;height:52vw;right:-15vw;top:10vh;background:radial-gradient(circle at 35% 35%,rgba(111,159,69,.20),rgba(111,159,69,.035) 40%,transparent 70%)}.orb-2{width:28vw;height:28vw;left:6vw;bottom:-12vw;border:1px solid rgba(111,159,69,.14)}
.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0))}
.hero-content{position:relative;z-index:2;padding-top:7vh}
.eyebrow,
.section-index{font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:600}
.hero-title{font-family:'Space Grotesk';font-size:clamp(72px,10.5vw,180px);line-height:.82;letter-spacing:-.075em;margin:30px 0 55px;text-transform:uppercase;max-width:1250px}
.line{display:block;overflow:hidden}
.line span{display:block;animation:titleIn 1s cubic-bezier(.16,1,.3,1) both}
.line:nth-child(2) span{animation-delay:.14s;color:transparent;-webkit-text-stroke:1.2px rgba(242,239,232,.88)}@keyframes titleIn{from{transform:translateY(115%);opacity:0}to{transform:none;opacity:1}}
.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}
.hero-bottom p{font-size:14px;color:#c7c5bf}
.hero-bottom i{font-style:normal;color:var(--accent);margin:0 8px}
.hero-actions{display:flex;gap:10px}
.btn{
  border:1px solid var(--line);
  padding:15px 20px;
  font-size:11px;
  letter-spacing:.11em;
  font-weight:400;
  text-decoration:none;
  transition:.3s;
}
.btn.primary{
	background:var(--text);
	color:#0b0d0a
}
.btn.primary:hover{
	background:var(--accent)
}
.btn.ghost{
  color:var(--accent);
}
.btn.ghost:hover{
	border-color:var(--text);
	background:rgba(111,159,69,.06)
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:28px;

  transform:translateX(-50%);

  font-size:9px;
  letter-spacing:.16em;
  color:var(--muted);
  text-decoration:none;

  writing-mode:horizontal-tb!important;
  z-index:3;
}
.scroll-cue span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-left:10px;
  border:1px solid var(--accent);
  border-radius:50%;
  color:var(--accent);
  font-size:16px;
  line-height:1;
  animation:scrollArrow 1.8s ease-in-out infinite;
}
@keyframes scrollArrow{
  0%,100%{
    transform:translateY(0);
    opacity:1;
  }
  50%{
    transform:translateY(5px);
    opacity:.65;
  }
}

.section{
  padding:52px 0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  margin-bottom:28px;
}

.section-head h2{
  font-family:'Space Grotesk';
  font-size:clamp(25px,3vw,40px);
  letter-spacing:-.06em;
  line-height:.95;
  margin:0;
}

.modal{position:fixed;inset:0;background:rgba(5,5,5,.96);z-index:300;display:none;overflow:auto}
.modal.open{display:block;animation:modalIn .35s ease both}@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-close{position:fixed;right:26px;top:24px;z-index:2;background:transparent;border:1px solid var(--line);color:white;padding:12px 15px;font-size:10px;letter-spacing:.12em;cursor:pointer}
.modal-inner{width:min(calc(100% - 64px),1300px);margin:110px auto}
.modal-visual{height:min(65vw,720px);display:grid;place-items:center;background:radial-gradient(circle at 70% 30%,#31472a,transparent 30%),linear-gradient(145deg,#151811,#0b0d0a);font-family:'Space Grotesk';font-size:clamp(60px,10vw,150px);font-weight:700;letter-spacing:-.08em;color:rgba(255,255,255,.6)}
.modal-info{display:grid;grid-template-columns:.6fr 1.4fr 1fr;gap:35px;padding:35px 0}
.modal-info p{color:var(--muted);line-height:1.7}
.modal-info h2{font-family:'Space Grotesk';font-size:clamp(36px,5vw,70px);letter-spacing:-.05em;margin:0}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}

@media (max-width:900px){
	.container{width:min(calc(100% - 34px),var(--max))}
	.nav{height:72px}
	.nav-links{
		position:fixed;
		inset:0;
		background:#050605;
		display:none;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		font-family:'Space Grotesk';
		font-size:34px
		}
	.nav-links.open{display:flex}
	.menu-btn{display:block;position:relative;z-index:2}
	.hero{min-height:700px}
	.hero-content{padding-top:0}
	.hero-title{font-size:clamp(58px,16vw,110px);line-height:.86}
	.hero-bottom{align-items:flex-start;flex-direction:column}
	.hero-actions{width:100%;flex-direction:column}
	.btn{text-align:center}
	.scroll-cue{display:none}
	.section{padding:50px 0}
	.section-head,
	.split-head{display:block}
	.section-index{margin-bottom:18px}
	.modal-inner{width:calc(100% - 30px);margin-top:90px}
	.modal-visual{height:58vh}
	.modal-info{grid-template-columns:1fr}
	.cursor-glow{display:none}
	}
	
@media (max-width:520px){
	.hero-title{font-size:15vw}
	.hero-bottom p{line-height:1.8}
	.section-head h2{font-size:11vw}
	}
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}

/* Robust logo sizing — desktop + mobile */
.brand-logo{
  width:220px!important;
  max-width:220px!important;
  min-width:0!important;
  height:auto!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 220px!important;
}

.brand-logo img{
  width:220px!important;
  max-width:220px!important;
  height:auto!important;
  max-height:55px!important;
  object-fit:contain!important;
  display:block!important;
}
.footer .brand-logo{width:160px!important;max-width:160px!important;flex-basis:160px!important}
.footer .brand-logo img{width:160px!important;max-width:160px!important;max-height:42px!important}
@media (max-width:900px){
  .nav{gap:16px}
  .brand-logo{width:138px!important;max-width:138px!important;flex:0 0 138px!important}
  .brand-logo img{width:138px!important;max-width:138px!important;height:auto!important;max-height:38px!important}
  .footer .brand-logo{width:132px!important;max-width:132px!important;flex-basis:132px!important}
  .footer .brand-logo img{width:132px!important;max-width:132px!important;max-height:36px!important}
}
@media (max-width:520px){
  .brand-logo{width:124px!important;max-width:124px!important;flex:0 0 124px!important}
  .brand-logo img{width:124px!important;max-width:124px!important;max-height:34px!important}
  .footer .brand-logo{width:118px!important;max-width:118px!important;flex-basis:118px!important}
  .footer .brand-logo img{width:118px!important;max-width:118px!important;max-height:32px!important}
}
/* =========================================
   01 / THE VISUALS
========================================= */

.visual-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.visual-card{
  display:grid;
  grid-template-rows:auto;
  align-items:start;
  min-width:0;
  min-height:0;
}

.visuals-section{
  position:relative;
  padding-top:25px;
  padding-bottom:0;
}

.visuals-section .section-head{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  z-index:5;
  margin-bottom:18px;
}

.visuals-section .visual-grid{
  position:relative;
}

.visuals-section .visual-card:first-child{
  padding-top:0;
}

.visual-media-left{
  grid-template-columns:60% 40%;
}

.visual-media-right{
  grid-template-columns:40% 60%;
}

.visual-panel{
  min-width:0;
  grid-row:1;
}

.visual-media-left .visual-panel{
  grid-column:1;
}

.visual-media-left .visual-meta{
  grid-column:2;
}

.visual-media-right .visual-panel{
  grid-column:2;
}

.visual-media-right .visual-meta{
  grid-column:1;
}

/* =========================================
   FIRST VISUAL INTRO
========================================= */

.visual-card:nth-child(odd){
  grid-template-columns:100% 0%;
  transition:grid-template-columns 1.4s cubic-bezier(.16,1,.3,1) .4s;
}

.visual-card:nth-child(odd) .visual-meta{
  opacity:1;
  transform:translateX(35px);
  transition:
    opacity .9s ease .8s,
    transform 1.1s cubic-bezier(.16,1,.3,1) .8s;
}

.visual-card:nth-child(odd).visible{
  grid-template-columns:60% 40%;
}

.visual-card:nth-child(odd).visible .visual-meta{
  opacity:1;
  transform:translateX(0);
}

/* =========================================
   IMAGE REVEAL — 02 / 04
========================================= */

.visual-card:nth-child(even) .visual-media::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:4;

  background:#0b0d0a;

  transform:translateX(0);

  transition:
    transform 1.3s cubic-bezier(.16,1,.3,1) .2s;
}

.visual-card:nth-child(even).visible .visual-media::after{
  transform:translateX(100%);
}

/* =========================================
   MEDIA
========================================= */

.visual-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:18px;
  background:#0b0d0a;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.07),
    0 25px 70px rgba(111,159,69,.06);
}

.visual-media::before{
  content:"";

  position:absolute;
  inset:-18px;

  z-index:-1;

  filter:blur(35px);

  border-radius:30px;

  opacity:.8;
}

/* 01 / 03 / 05 */
.visual-card:nth-child(odd) .visual-media::before{
  background:rgba(111,159,69,.10);
}

/* 02 / 04 */
.visual-card:nth-child(even) .visual-media::before{
  background:rgba(212,175,55,.07);
}

.media-carousel{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
}

.carousel-media{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;
  background:#0b0d0a;

  opacity:0;
  visibility:hidden;

  transform:scale(1);

  transition:opacity .6s ease;
}

.carousel-media.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

/* =========================================
   MEDIA OVERLAY
========================================= */

.visual-overlay{
  position:absolute;
  inset:0;

  z-index:2;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.04),
      transparent 55%,
      rgba(0,0,0,.65)
    );

  pointer-events:none;
}


/* =========================================
   MEDIA LABEL
========================================= */

.visual-label{
  position:absolute;

  left:20px;
  right:20px;
  bottom:18px;

  z-index:3;

  display:flex;
  justify-content:space-between;
  align-items:center;

  color:#fff;

  font-size:9px;
  font-weight:600;

  letter-spacing:.16em;
}

.media-count{
  opacity:.7;
}


/* =========================================
   TEXT
========================================= */

.visual-meta{
  grid-row:1;

  padding:40px 36px;
}

.visual-index{
  margin:0 0 18px;

  color:var(--muted);

  font-size:9px;

  letter-spacing:.16em;
}

.visual-meta h3{
  margin:0 0 20px;

  font-family:'Space Grotesk';

  font-size:clamp(34px,3.4vw,58px);

  line-height:.88;

  letter-spacing:-.055em;
}

.visual-meta p:not(.visual-index){
  max-width:290px;

  margin:0;

  color:var(--muted);

  font-size:12px;

  line-height:1.7;
}

.visual-meta > span{
  display:inline-block;

  margin-top:28px;

  color:var(--text);

  font-size:9px;

  letter-spacing:.15em;

  transition:
    color .3s ease,
    transform .3s ease;
}

.visual-meta > span:hover{
  color:var(--accent);
  transform:translateX(5px);
}


/* =========================================
   SUBTLE MEDIA HOVER
========================================= */
.visual-card:hover .visual-media{
  box-shadow:
    0 0 0 1px rgba(212,175,55,.10),
    0 28px 80px rgba(212,175,55,.13);
}

/* =========================================
   02 / NEW REALITIES
   ROTATING AI CANVAS
========================================= */

.ai-section{
  position:relative;
}


/* =========================================
   AI CANVAS
========================================= */

.ai-stage{
  position:relative;
  width:100%;
  height:620px;
  margin-top:8px;
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 18% 35%,
      rgba(212,175,55,.065),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 70%,
      rgba(111,159,69,.045),
      transparent 30%
    ),
    #0b0d0a;
}


/* subtle canvas texture */

.ai-stage::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  opacity:.25;
  pointer-events:none;
}


/* =========================================
   ALL AI BLOCKS
========================================= */

.ai-block{
  position:absolute;
  z-index:2;

  cursor:pointer;

  transition:
    left 1.2s cubic-bezier(.16,1,.3,1),
    top 1.2s cubic-bezier(.16,1,.3,1),
    width 1.2s cubic-bezier(.16,1,.3,1),
    height 1.2s cubic-bezier(.16,1,.3,1),
    transform 1.2s cubic-bezier(.16,1,.3,1),
    opacity .8s ease;
}


/* =========================================
   DEFAULT / SMALL POSITIONS
========================================= */

.ai-video-block{
  left:5%;
  top:9%;
  width:62%;
  height:82%;
}

.ai-image-block{
  left:73%;
  top:9%;
  width:24%;
  height:34%;
}

.ai-world-block{
  left:73%;
  top:57%;
  width:24%;
  height:34%;
}


/* =========================================
   VISUAL CONTAINER
========================================= */

.ai-block-visual{
  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;

  background:#181818;

  box-shadow:
    0 25px 70px rgba(0,0,0,.38);

  transition:
    border-color .5s ease,
    box-shadow .8s ease;
}


/* =========================================
   MEDIA
========================================= */

.ai-media{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  z-index:0;

  transition:
    transform 1.2s cubic-bezier(.16,1,.3,1);
}


/* =========================================
   DARK OVERLAY
========================================= */

.ai-block-overlay{
  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.02) 15%,
      rgba(0,0,0,.18) 50%,
      rgba(0,0,0,.82) 100%
    );
}


/* =========================================
   CONTENT
========================================= */

.ai-block-content{
  position:absolute;

  left:28px;
  right:28px;
  bottom:28px;

  z-index:3;

  opacity:1;

  transform:translateY(18px);

  transition:
    opacity .6s ease,
    transform .8s cubic-bezier(.16,1,.3,1);
}


/* Active block gets full content */

.ai-block.is-active .ai-block-content{
  opacity:1;
  transform:none;
}


/* =========================================
   TEXT
========================================= */

.ai-block-content .ai-index{
  margin:0 0 14px;

  color:rgba(255,255,255,.65);

  font-size:9px;
  font-weight:600;

  letter-spacing:.16em;
}

.ai-block-content h3{
  margin:0 0 18px;

  font-family:'Space Grotesk';

  font-size:clamp(34px,4vw,62px);

  line-height:.86;

  letter-spacing:-.065em;
}

.ai-block-content .ai-description{
  max-width:380px;

  margin:0 0 20px;

  color:#aaa;

  font-size:11px;

  line-height:1.65;
}

.ai-link{
  display:inline-block;

  color:var(--text);

  font-size:9px;

  font-weight:700;

  letter-spacing:.12em;

  transition:.3s;
}

.ai-link:hover{
  color:var(--accent);
}


/* =========================================
   CORNER LABEL
========================================= */

.ai-corner-label{
  position:absolute;

  right:20px;
  bottom:18px;

  z-index:3;

  color:rgba(255,255,255,.45);

  font-size:7px;

  letter-spacing:.14em;

  opacity:.7;
}


/* =========================================
   ACTIVE / HERO STATE
   FIXED SLOT ROTATION
========================================= */


/* =========================================
   VIDEO LARGE
   VIDEO = LEFT LARGE
   IMAGE = RIGHT TOP
   WORLD = RIGHT BOTTOM
========================================= */

.ai-stage.ai-active-video .ai-video-block{
  left:5%;
  top:9%;
  width:62%;
  height:82%;
  z-index:5;
}

.ai-stage.ai-active-video .ai-image-block{
  left:73%;
  top:9%;
  width:24%;
  height:34%;
  z-index:3;
}

.ai-stage.ai-active-video .ai-world-block{
  left:73%;
  top:57%;
  width:24%;
  height:34%;
  z-index:3;
}

/* =========================================
   WORLD LARGE
   WORLD = LEFT LARGE
   VIDEO = RIGHT TOP
   IMAGE = RIGHT BOTTOM
========================================= */

.ai-stage.ai-active-world .ai-world-block{
  left:5%;
  top:9%;
  width:62%;
  height:82%;
  z-index:5;
}

.ai-stage.ai-active-world .ai-video-block{
  left:73%;
  top:9%;
  width:24%;
  height:34%;
  z-index:3;
}

.ai-stage.ai-active-world .ai-image-block{
  left:73%;
  top:57%;
  width:24%;
  height:34%;
  z-index:3;
}
/* =========================================
   IMAGE LARGE
   IMAGE = LEFT LARGE
   WORLD = RIGHT TOP
   VIDEO = RIGHT BOTTOM
========================================= */

.ai-stage.ai-active-image .ai-image-block{
  left:5%;
  top:9%;
  width:62%;
  height:82%;
  z-index:5;
}

.ai-stage.ai-active-image .ai-world-block{
  left:73%;
  top:9%;
  width:24%;
  height:34%;
  z-index:3;
}

.ai-stage.ai-active-image .ai-video-block{
  left:73%;
  top:57%;
  width:24%;
  height:34%;
  z-index:3;
}

/* =========================================
   ACTIVE MEDIA
========================================= */

.ai-block.is-active .ai-media{
  transform:scale(1.015);
}

.ai-block.is-active .ai-block-visual{
  border-color:rgba(255,255,255,.24);

  box-shadow:
    0 35px 90px rgba(0,0,0,.5);
}


/* =========================================
   SMALL CARDS
========================================= */

.ai-block:not(.is-active) .ai-block-content{
  opacity:0;
  transform:translateY(10px);
}

.ai-block:not(.is-active) .ai-corner-label{
  opacity:.45;
}


/* =========================================
   HOVER
========================================= */

.ai-block:not(.is-active):hover .ai-media{
  transform:scale(1.04);
}

.ai-block:hover .ai-block-visual{
  border-color:rgba(255,255,255,.24);
}


/* =========================================
   AI ENTRANCE
========================================= */

.ai-block.reveal{
  opacity:0;
}

.ai-block.reveal.visible{
  opacity:1;
  transform:none;
}
/* =========================================================
   RESPONSIVE CLEANUP
   MOBILE + TABLET
   ========================================================= */

/* =========================================================
   TABLET
   901px — 1100px
   ========================================================= */

@media (min-width:901px) and (max-width:1100px){

  /* ---------- GLOBAL ---------- */

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .container{
    width:min(calc(100% - 40px),var(--max));
  }


  /* =======================================================
     01 / THE VISUALS
     Clean tablet two-column layout
     ======================================================= */

  .visual-grid{
    gap:55px;
  }

  .visual-card,
  .visual-card:nth-child(odd),
  .visual-card:nth-child(even){
    display:grid;
    align-items:center;
    min-width:0;
    width:100%;
  }

  .visual-card:nth-child(odd){
    grid-template-columns:58% 42%;
  }

  .visual-card:nth-child(even){
    grid-template-columns:42% 58%;
  }

  .visual-panel{
    width:100%;
    min-width:0;
    grid-row:1;
    display:block;
  }

  .visual-media-left .visual-panel{
    grid-column:1;
  }

  .visual-media-left .visual-meta{
    grid-column:2;
  }

  .visual-media-right .visual-panel{
    grid-column:2;
  }

  .visual-media-right .visual-meta{
    grid-column:1;
  }

  .visual-media{
    width:100%;
    aspect-ratio:16/10;
    height:auto;
    border-radius:16px;
  }

  .visual-meta,
  .visual-card:nth-child(odd) .visual-meta{
    position:relative;
    inset:auto;
    opacity:1;
    transform:none;
    padding:28px 24px;
    width:auto;
  }

  .visual-meta h3{
    font-size:clamp(32px,4vw,48px);
  }

  .visual-meta p:not(.visual-index){
    max-width:270px;
    font-size:11px;
  }


  /* Remove mobile accordion behaviour from tablet */

  .visual-panel{
    overflow:visible;
  }

  .visual-media{
    min-height:0;
    opacity:1;
  }


  /* =======================================================
     02 / NEW REALITIES — TABLET
     ======================================================= */

  .ai-stage{
    width:100%;
    max-width:100%;
    height:560px;
    overflow:hidden;
    border-radius:18px;
  }

  .ai-block{
    right:auto !important;
    max-width:100%;
  }


  /* ----- VIDEO LARGE ----- */

  .ai-stage.ai-active-video .ai-video-block{
    left:4%;
    top:7%;
    width:62%;
    height:86%;
  }

  .ai-stage.ai-active-video .ai-image-block{
    left:69%;
    top:7%;
    width:27%;
    height:38%;
  }

  .ai-stage.ai-active-video .ai-world-block{
    left:69%;
    top:55%;
    width:27%;
    height:38%;
  }


  /* ----- WORLD LARGE ----- */

  .ai-stage.ai-active-world .ai-world-block{
    left:4%;
    top:7%;
    width:62%;
    height:86%;
  }

  .ai-stage.ai-active-world .ai-video-block{
    left:69%;
    top:7%;
    width:27%;
    height:38%;
  }

  .ai-stage.ai-active-world .ai-image-block{
    left:69%;
    top:55%;
    width:27%;
    height:38%;
  }


  /* ----- IMAGE LARGE ----- */

  .ai-stage.ai-active-image .ai-image-block{
    left:4%;
    top:7%;
    width:62%;
    height:86%;
  }

  .ai-stage.ai-active-image .ai-world-block{
    left:69%;
    top:7%;
    width:27%;
    height:38%;
  }

  .ai-stage.ai-active-image .ai-video-block{
    left:69%;
    top:55%;
    width:27%;
    height:38%;
  }

  .ai-block-content{
    left:24px;
    right:24px;
    bottom:24px;
  }

  .ai-block-content h3{
    font-size:clamp(30px,4vw,48px);
  }

}


/* =========================================================
   MOBILE
   0 — 900px
   ========================================================= */

@media (max-width:900px){

  .nav-wrap.scrolled .nav{
    height:68px;
  }

  .nav-wrap.scrolled .brand-logo{
    width:124px!important;
    max-width:124px!important;
    flex-basis:124px!important;
  }

  .nav-wrap.scrolled .brand-logo img{
    width:124px!important;
    max-width:124px!important;
    max-height:34px!important;
  }

  /* ---------- GLOBAL ---------- */

 html{
  scroll-snap-type:y proximity;
}
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
.visuals-section{
  padding-top:0;
  padding-bottom:0;
}

.visuals-section .section-head{
  top:72px;
}

.visuals-section .visual-card{
  min-height:0;
}

.visuals-section .visual-card:first-child{
  padding-top:0;
  overflow:hidden;
}

  .container{
    width:calc(100% - 34px);
    max-width:none;
  }


  /* =======================================================
     01 / THE VISUALS
     
     IMPORTANT:
     NO TEXT OVER THE IMAGE.
     
     Structure:
     IMAGE / VIDEO
     ↓
     TEXT
     ↓
     CTA
     ======================================================= */

  .visual-grid{
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
  }

  .visual-card,
  .visual-card:nth-child(odd),
  .visual-card:nth-child(even){
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    border-bottom:1px solid var(--line);
    padding-bottom:0;
  }


  /* Disable desktop reveal grid behaviour */

  .visual-card:nth-child(odd){
    grid-template-columns:none;
    transition:none;
  }

  .visual-card:nth-child(odd).visible{
    grid-template-columns:none;
  }


  /* ---------- MEDIA ---------- */

  .visual-panel,
  .visual-media-left .visual-panel,
  .visual-media-right .visual-panel{
    display:block;
    width:100%;
    min-width:0;
    grid-column:auto;
    grid-row:auto;
    overflow:visible;
  }

  .visual-media{
    position:relative;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/10;
    opacity:1 !important;
    overflow:hidden;
    border-radius:14px;
  }


  /* No black reveal layer on mobile */

  .visual-card:nth-child(even) .visual-media::after{
    display:none;
  }


  /* ---------- MEDIA LABEL ---------- */

  .visual-label{
    left:14px;
    right:14px;
    bottom:14px;
    top:auto;
    font-size:8px;
  }


  /* ---------- TEXT BELOW MEDIA ---------- */

  .visual-meta,
  .visual-card:nth-child(odd) .visual-meta,
  .visual-card:nth-child(even) .visual-meta{
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    right:auto;
    bottom:auto;

    display:block;

    width:100%;
    max-width:none;

    padding:24px 4px 0;

    opacity:1 !important;
    transform:none !important;

    text-align:left;
    color:var(--text);
  }

  /* ---------- TEXT TYPOGRAPHY ---------- */

  .visual-index{
    margin:0 0 12px;
    font-size:8px;
  }

  .visual-meta h3{
    margin:0 0 16px;

    font-size:clamp(34px,10vw,52px);
    line-height:.9;
    letter-spacing:-.055em;
  }

  .visual-meta p:not(.visual-index){
    max-width:100%;
    margin:0;

    color:var(--muted);
    font-size:12px;
    line-height:1.7;
  }

  .visual-meta > span{
    margin-top:20px;
    font-size:9px;
  }


  /* =======================================================
     02 / NEW REALITIES — MOBILE
     
     Clean layout:
     
     ┌──────────────────────┐
     │                      │
     │    ACTIVE MEDIA      │
     │                      │
     └──────────────────────┘
     
     ┌───────────┐ ┌───────────┐
     │ SMALL     │ │ SMALL     │
     └───────────┘ └───────────┘
     ======================================================= */

  .ai-stage{
    position:relative;

    width:100%;
    max-width:100%;
    height:620px;

    margin-top:14px;

    overflow:hidden;

    border-radius:16px;
  }


  /* Critical:
     remove right-based positioning completely */

  .ai-block{
    max-width:none;
    transition:
      left .9s cubic-bezier(.16,1,.3,1),
      top .9s cubic-bezier(.16,1,.3,1),
      width .9s cubic-bezier(.16,1,.3,1),
      height .9s cubic-bezier(.16,1,.3,1),
      opacity .6s ease,
      transform .9s cubic-bezier(.16,1,.3,1);
  }


  /* =======================================================
     VIDEO ACTIVE
     
     VIDEO = LARGE TOP
     IMAGE = SMALL BOTTOM LEFT
     WORLD = SMALL BOTTOM RIGHT
     ======================================================= */

  .ai-stage.ai-active-video .ai-video-block{
    left:4%;
    top:4%;
    width:92%;
    height:57%;
    z-index:5;
  }

  .ai-stage.ai-active-video .ai-image-block{
    left:4%;
    top:66%;
    width:44%;
    height:28%;
    z-index:3;
  }

  .ai-stage.ai-active-video .ai-world-block{
    left:52%;
    top:66%;
    width:44%;
    height:28%;
    z-index:3;
  }


  /* =======================================================
     WORLD ACTIVE
     
     WORLD = LARGE TOP
     VIDEO = SMALL BOTTOM LEFT
     IMAGE = SMALL BOTTOM RIGHT
     ======================================================= */

  .ai-stage.ai-active-world .ai-world-block{
    left:4%;
    top:4%;
    width:92%;
    height:57%;
    z-index:5;
  }

  .ai-stage.ai-active-world .ai-video-block{
    left:4%;
    top:66%;
    width:44%;
    height:28%;
    z-index:3;
  }

  .ai-stage.ai-active-world .ai-image-block{
    left:52%;
    top:66%;
    width:44%;
    height:28%;
    z-index:3;
  }


  /* =======================================================
     IMAGE ACTIVE
     
     IMAGE = LARGE TOP
     WORLD = SMALL BOTTOM LEFT
     VIDEO = SMALL BOTTOM RIGHT
     ======================================================= */

  .ai-stage.ai-active-image .ai-image-block{
    left:4%;
    top:4%;
    width:92%;
    height:57%;
    z-index:5;
  }

  .ai-stage.ai-active-image .ai-world-block{
    left:4%;
    top:66%;
    width:44%;
    height:28%;
    z-index:3;
  }

  .ai-stage.ai-active-image .ai-video-block{
    left:52%;
    top:66%;
    width:44%;
    height:28%;
    z-index:3;
  }


  /* ---------- AI TEXT ---------- */

  .ai-block-content{
    left:18px;
    right:18px;
    bottom:18px;
  }

  .ai-block-content h3{
    font-size:clamp(26px,8vw,40px);
    line-height:.88;
    margin-bottom:12px;
  }

  .ai-block-content .ai-description{
    display:none;
  }

  .ai-block-content .ai-index{
    font-size:8px;
    margin-bottom:9px;
  }

  .ai-link{
    font-size:8px;
  }

  .ai-corner-label{
    display:none;
  }


  /* Small AI cards should show image only */

  .ai-block:not(.is-active) .ai-block-content{
    display:none;
  }

  .ai-block:not(.is-active) .ai-block-visual{
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }


  /* ---------- AI MEDIA ---------- */

  .ai-media{
    width:100%;
    height:100%;
    object-fit:cover;
  }

}


/* =========================================================
   SMALL PHONES
   0 — 520px
   ========================================================= */

@media (max-width:520px){

  .container{
    width:calc(100% - 28px);
  }

  .visual-card{
    padding-bottom:0;
  }

  .visual-media{
    aspect-ratio:4/3;
    border-radius:13px;
  }

  .visual-meta{
    padding-top:20px !important;
  }

  .visual-meta h3{
    font-size:clamp(31px,10.5vw,46px);
  }

  .visual-meta p:not(.visual-index){
    font-size:11px;
    line-height:1.65;
  }

  .ai-stage{
    height:540px;
  }

  .ai-stage.ai-active-video .ai-video-block,
  .ai-stage.ai-active-world .ai-world-block,
  .ai-stage.ai-active-image .ai-image-block{
    left:3%;
    width:94%;
    height:57%;
    top:3%;
  }

  .ai-stage.ai-active-video .ai-image-block,
  .ai-stage.ai-active-world .ai-video-block,
  .ai-stage.ai-active-image .ai-world-block{
    left:3%;
    top:65%;
    width:45%;
    height:29%;
  }

  .ai-stage.ai-active-video .ai-world-block,
  .ai-stage.ai-active-world .ai-image-block,
  .ai-stage.ai-active-image .ai-video-block{
    left:52%;
    top:65%;
    width:45%;
    height:29%;
  }

}

/* =========================================================
   FLOATING SOCIAL
   ========================================================= */

.floating-social{
  position:absolute;
  left:24px;
  bottom:24px;

  display:flex;
  align-items:center;
  gap:10px;

  z-index:250;
}

.floating-social a{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:transparent;
  color:#ffffff;

  border:none;
  border-radius:0;

  box-shadow:none;

  text-decoration:none;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    opacity .3s ease;
}

.social-svg{
  width:24px;
  height:24px;
  display:block;
}

.instagram-svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.whatsapp-svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.floating-social a:hover{
  transform:scale(1.08);
  opacity:.7;
}
@media (max-width:900px){

  .floating-social{
    left:18px;
    bottom:18px;
    gap:8px;
  }

  .floating-social a{
    width:46px;
    height:46px;
  }

  .instagram-icon{
    font-size:23px;
  }

  .youtube-icon{
    font-size:17px;
  }

  .whatsapp-icon{
    font-size:21px;
  }

}

@media (max-width:520px){

  .floating-social{
    left:16px;
    bottom:16px;
    gap:7px;
  }

  .floating-social a{
    width:44px;
    height:44px;
  }

  .instagram-icon{
    font-size:22px;
  }

  .youtube-icon{
    font-size:16px;
  }

  .whatsapp-icon{
    font-size:20px;
  }

}

/* =========================================================
   04 / BEHIND THE VISION
========================================================= */

.about-section{
  position:relative;
  padding:20px 0 28px;
  overflow:hidden;
}

.about-section::before{
  content:"";

  position:absolute;

  /* Start slightly inside the left side */
  left:2%;
  top:115px;

  /* Extend toward the CTA, but stay in the content area */
  width:min(760px,58vw);
  height:250px;

  background-image:url("assets/images/logo.png");
  background-repeat:no-repeat;

  /* IMPORTANT: keep the logo at the top of this area */
  background-position:left top;
  background-size:contain;

  opacity:.035;

  pointer-events:none;
  z-index:0;
}

.about-section > *{
  position:relative;
  z-index:1;
}

.about-section .section-head{
  margin-bottom:22px;
}

.about-section .section-title{
  max-width:none;
  font-size:clamp(25px,3vw,40px);
  line-height:.95;
  letter-spacing:-.06em;
}


/* MAIN CONTENT */

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:clamp(60px,10vw,150px);
  align-items:start;
}


/* LEFT TEXT */

.about-copy{
  max-width:720px;
}

.about-copy p{
  max-width:650px;
  margin:0 0 28px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
}

.about-copy .about-intro{
  max-width:680px;
  margin-bottom:42px;
  font-size:clamp(20px,2vw,28px);
  line-height:1.35;
  color:var(--text);
}


/* CREATE CTA */

/* =========================
   HERO CTA
========================= */

.about-connect{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  padding-top:0;
}

.about-connect-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 26px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

.about-connect-label::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

.about-create{
  display:block;
  padding:0;
  border:0;
  text-decoration:none;
  color:var(--text);
}

.about-create .top{
  display:block;
  font-family:"Space Grotesk";
  font-size:clamp(44px,5vw,72px);
  line-height:.88;
  font-weight:300;
  letter-spacing:-.06em;
}

.about-create .bottom{
  display:block;
  font-family:"Space Grotesk";
  font-size:clamp(52px,6vw,88px);
  line-height:.86;
  font-weight:700;
  letter-spacing:-.07em;
  color:var(--accent);
}

.about-create .meta{
  display:block;
  margin-top:18px;
  font-size:11px;
  letter-spacing:.28em;
  color:var(--muted);
  text-transform:uppercase;
}

.about-create:hover{
  color:var(--text);
}

.about-create:hover .bottom{
  color:#d7ff8a;
}

.about-contact-icons{
  display:flex;
  align-items:center;
  gap:28px;

  margin-top:30px;
}

.about-contact-icons a{
  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text);
  text-decoration:none;

  transition:
    transform .3s ease,
    opacity .3s ease;
}

.about-contact-icons svg{
  width:24px;
  height:24px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.about-contact-icons a:hover{
  transform:translateY(-3px);
  opacity:.65;
}

.linkedin-mark{
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.about-footer{
  margin-top:70px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.about-footer .copyright{
  margin:0;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

  .about-section .section-title{
        font-size:clamp(25px,3vw,40px);
  }

  .about-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);
    gap:60px;
  }

}


/* =========================================================
   MOBILE + TABLET
========================================================= */

@media (max-width:900px){

  .about-section{
    padding-top:70px;
    padding-bottom:28px;
  }

  .about-section .section-head{
    margin-bottom:38px;
  }

  .about-section .section-title{
    max-width:100%;
    font-size:clamp(40px,10vw,60px);
    line-height:.92;
  }

  .about-grid{
    display:flex;
    flex-direction:column;
    gap:45px;
  }

  .about-copy{
    max-width:none;
  }

  .about-copy p{
    font-size:12px;
    line-height:1.7;
    margin-bottom:22px;
  }

  .about-copy .about-intro{
    font-size:19px;
    line-height:1.4;
    margin-bottom:30px;
  }

  .about-connect{
    width:100%;
  }

.about-footer{
  margin-top:55px;
  padding-top:18px;
}

.about-footer .copyright{
  font-size:10px;
}

  .about-create{
    font-size:clamp(28px,8vw,42px);
    padding:17px 0;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:520px){

  .about-section{
    padding-top:60px;
    padding-bottom:28px;
  }

  .about-section .section-title{
    font-size:12vw;
  }

  .about-grid{
    gap:38px;
  }

  .about-copy .about-intro{
    font-size:18px;
  }

  .about-create{
    font-size:8vw;
  }

}


/* =========================================================
   VIZEN STUDIO — SERVICES / GALLERIES / CONTACT
   Final overrides for the new information architecture
   ========================================================= */

html{scroll-behavior:smooth}
body.gallery-open{overflow:hidden}

.nav-links a{text-transform:uppercase}

.services-section{padding-top:72px;padding-bottom:20px}
.services-grid{display:flex;flex-direction:column;gap:110px}
.service-card{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.75fr);gap:42px;align-items:center}
.service-card:nth-child(even){grid-template-columns:minmax(280px,.75fr) minmax(0,1.7fr)}
.service-card:nth-child(even) .service-media-wrap{order:2}
.service-card:nth-child(even) .service-copy{order:1}
.service-media-wrap{min-width:0}
.service-collage{position:relative;display:grid;grid-template-columns:1.7fr .7fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:16/9}
.gallery-media{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:#0b0d0a;cursor:pointer;min-width:0;min-height:0}
.gallery-main{grid-row:1 / 3;grid-column:1}
.gallery-side{grid-column:2}
.gallery-side-1{grid-row:1}.gallery-side-2{grid-row:2}
.service-slot-media{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .4s ease}
.gallery-media:hover .service-slot-media{transform:scale(1.035)}
.gallery-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.35));pointer-events:none}
.service-media-label{position:absolute;left:20px;right:20px;bottom:18px;z-index:4;display:flex;justify-content:space-between;gap:15px;color:#fff;font-size:9px;font-weight:600;letter-spacing:.16em;pointer-events:none}
.service-count{opacity:.72}
.media-arrow{position:absolute;z-index:8;top:50%;width:44px;height:44px;border:1px solid rgba(245,240,223,.35);border-radius:50%;background:rgba(5,6,5,.68);backdrop-filter:blur(8px);color:#f5f0df;display:grid;place-items:center;transform:translateY(-50%);cursor:pointer;font-size:18px;transition:.25s}
.media-arrow:hover{background:var(--accent);color:#080908;border-color:var(--accent);transform:translateY(-50%) scale(1.06)}
.media-arrow-prev{left:18px}.media-arrow-next{right:18px}
.service-copy{padding:12px 10px}
.service-index{margin:0 0 18px;color:var(--muted);font-size:9px;letter-spacing:.16em}
.service-copy h3{margin:0 0 22px;font-family:'Space Grotesk';font-size:clamp(38px,4.1vw,68px);line-height:.86;letter-spacing:-.065em}
.service-copy>p:not(.service-index){max-width:330px;margin:0;color:var(--muted);font-size:12px;line-height:1.75}
.service-card--fashion .gallery-main{border-radius:22px}
.service-card--fashion .service-collage{grid-template-columns:1.8fr .65fr}

/* Full gallery */
.service-gallery-modal{position:fixed;inset:0;z-index:500;background:rgba(5,6,5,.98);display:none;overflow:auto}
.service-gallery-modal.open{display:block;animation:galleryIn .3s ease both}
@keyframes galleryIn{from{opacity:0}to{opacity:1}}
.service-gallery-close{position:fixed;right:28px;top:24px;z-index:10;border:1px solid var(--line);background:rgba(5,6,5,.65);color:var(--text);padding:12px 16px;font-size:10px;letter-spacing:.12em;cursor:pointer}
.service-gallery-inner{width:min(calc(100% - 64px),1400px);margin:90px auto 45px}
.service-gallery-top{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.service-gallery-top h2{margin:0;font-family:'Space Grotesk';font-size:clamp(38px,5vw,76px);line-height:.86;letter-spacing:-.06em}
.service-gallery-viewer{display:grid;grid-template-columns:62px minmax(0,1fr) 62px;align-items:center;gap:15px}
.gallery-stage{height:min(72vh,760px);display:grid;place-items:center;background:#0b0d0a;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.gallery-full-media{width:100%;height:100%;object-fit:contain;display:block;background:#0b0d0a}
.gallery-nav{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--accent);font-size:20px;cursor:pointer;transition:.25s}
.gallery-nav:hover{background:var(--accent);color:#080908}
.gallery-footer{display:flex;justify-content:space-between;gap:20px;padding-top:15px;color:var(--muted);font-size:9px;letter-spacing:.15em}

/* Contact replaces the separate footer */
.contact-section{padding-top:110px;padding-bottom:28px;border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:end}
.contact-label{margin:0 0 18px;color:var(--muted);font-size:10px;letter-spacing:.18em}
.contact-cta{display:inline-block;color:var(--text);text-decoration:none;font-family:'Space Grotesk';font-size:clamp(70px,10vw,150px);font-weight:700;line-height:.78;letter-spacing:-.08em;transition:color .3s ease}
.contact-cta:hover{color:var(--accent)}
.contact-note{margin:24px 0 0;color:var(--muted);font-size:9px;letter-spacing:.15em}
.contact-icons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.contact-icons a{min-height:116px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text);text-decoration:none;font-size:9px;letter-spacing:.14em;transition:.3s}
.contact-icons a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.contact-icons svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5}
.contact-icons .linkedin-mark{font-family:Arial,sans-serif;font-weight:700;font-size:28px;line-height:30px}
.contact-copyright{margin-top:90px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:.12em}

@media(max-width:900px){
  .services-section{padding-top:50px}
  .services-grid{gap:72px}
  .service-card,.service-card:nth-child(even){display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .service-card:nth-child(even) .service-media-wrap,.service-card:nth-child(even) .service-copy{order:initial}
  .service-collage{aspect-ratio:4/3;gap:8px}
  .gallery-media{border-radius:12px}
  .service-media-label{left:13px;right:13px;bottom:13px;font-size:8px}
  .media-arrow{width:40px;height:40px;font-size:16px}
  .media-arrow-prev{left:12px}.media-arrow-next{right:12px}
  .service-copy{padding:0 3px}
  .service-copy h3{font-size:clamp(38px,11vw,58px)}
  .service-gallery-inner{width:calc(100% - 30px);margin-top:88px}
  .service-gallery-top{display:block}
  .service-gallery-top h2{margin-top:12px;font-size:clamp(40px,11vw,62px)}
  .service-gallery-viewer{grid-template-columns:42px minmax(0,1fr) 42px;gap:8px}
  .gallery-stage{height:68vh;border-radius:14px}
  .gallery-nav{width:38px;height:38px;font-size:16px}
  .gallery-footer{font-size:8px}
  .contact-grid{grid-template-columns:1fr;gap:45px}
  .contact-cta{font-size:18vw}
  .contact-icons{grid-template-columns:repeat(2,1fr)}
  .contact-copyright{margin-top:55px}
}

@media(max-width:520px){
  .service-collage{grid-template-columns:1.55fr .72fr;aspect-ratio:1/1.05}
  .service-media-label{font-size:7px}
  .media-arrow{width:36px;height:36px}
  .gallery-stage{height:62vh}
  .gallery-footer{display:block;line-height:1.7}
  .gallery-footer span+span{display:block;margin-top:5px}
  .contact-icons a{min-height:100px}
}