/* ╔══════════════════════════════════════════════════════════════╗
   ║  WHITE ROCK AGENCY — COMPLETE ORGANISED CSS                 ║
   ║  Version: reorganised control architecture                  ║
   ║                                                              ║
   ║  Structure                                                   ║
   ║  01. Variables and reset                                     ║
   ║  02. Global layout and utilities                             ║
   ║  03. Top banner / navigation                                 ║
   ║  04. Hero / Hype animation / tagline / scroll                ║
   ║  05. Positioning / Our proposition                           ║
   ║  06. Services layout                                         ║
   ║  07. Right-side roulette / desktop service menu              ║
   ║  08. Service detail sections                                 ║
   ║  09. Highlights                                              ║
   ║  10. Contact                                                 ║
   ║  11. Footer                                                  ║
   ║  12. Mobile navigation                                       ║
   ║  13. Responsive overrides                                    ║
   ║  14. Reduced motion                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  01. VARIABLES AND RESET                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root{
  /* Service colours */
  --s1-color:#6c8afc;
  --s1-dark:#5673e0;

  --s2-color:#D0733F;
  --s2-dark:#b95f30;

  --s3-color:#7A5B9B;
  --s3-dark:#62477f;

  --s4-color:#5FA37A;
  --s4-dark:#4d8b66;

  --s5-color:#A23D6A;
  --s5-dark:#842d56;

  --s6-color:#1D3557;
  --s6-dark:#162844;

  /* Core palette */
  --ink:#1d1d1b;
  --off:#f5f4f2;
  --mid:#888;
  --lt:#e6e4e0;

  /* Navigation */
  --nav-padding-y:1.4rem;
  --nav-padding-x:3.5rem;
  --nav-scrolled-padding-y:1rem;
  --banner-logo-height:21px;
  --banner-logo-mobile-height:17px;

  /* Hero desktop defaults */
  --hero-logo-width:400px;
  --hero-logo-top-offset:-30px;
  --hero-logo-start-shift-y:0px;
  --hero-logo-initial-scale:20;
  --hero-logo-aspect:1872 / 1688;
  --hero-tagline-top:calc(50% + 200px);
  --hero-tagline-font-size:1rem;
  --hero-scroll-bottom:10px;
  --hero-scroll-scale:1;
  --hero-appear-delay:2.5s;

  /* Service layout */
  --roulette-column-width:240px;
  --service-section-padding-top:77px;
  --service-section-padding-x:4rem;
  --service-section-margin-bottom:55px;

  /* Footer desktop defaults */
  --footer-logo-height:12px;
  --footer-logo-text-gap:12px;
  --footer-copy-line-gap:3px;
  --footer-copy-color:#8a8a8a;
  --footer-copy-size:.82rem;
  --footer-link-size:.6rem;

  /* Highlight timing */
  --highlight-start-delay:.5s;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Barlow',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:#fff;
  overflow-x:clip;
  cursor:auto;
}

body.touch{
  cursor:auto;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9990;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
nav#nav.no-nav-transition{
  transition:none !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  02. GLOBAL LAYOUT AND UTILITIES                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

#prog{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:var(--ink);
  z-index:1001;
  transition:width .08s linear;
}

#prog::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:#fff;
  z-index:-1;
}

.rv{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s ease,transform .85s ease;
}

.rv.in{
  opacity:1;
  transform:none;
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.sr-only *{
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  white-space:normal !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  03. TOP BANNER / NAVIGATION                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

nav#nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1100 !important;
  padding:var(--nav-padding-y) var(--nav-padding-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  opacity:0;
  animation:none;
  transition:background .4s,box-shadow .4s,padding .4s;
}

nav#nav.scrolled{
  background:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--lt);
  padding:var(--nav-scrolled-padding-y) var(--nav-padding-x);
}

.nav-brand{
  display:flex;
  align-items:center;
  gap:0;
  text-decoration:none;
  color:var(--ink);
}

.banner-logo-svg{
  display:block !important;
    position:relative !important;

  top:-2px !important;
  width:auto !important;
  height:var(--banner-logo-height) !important;
  max-height:var(--banner-logo-height) !important;
  overflow:visible;
}

.banner-logo-svg *{
  vector-effect:non-scaling-stroke;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:1rem;
  position:relative;
}

.nav-links{

    display:flex !important;

    align-items:flex-start !important;

    justify-content:flex-start !important;

    gap:1.5rem !important;

    row-gap:.45rem !important;

    flex-wrap:wrap !important;

    max-width:calc(100vw - 200px - 3.5rem) !important;

    margin:10px !important;

    padding:0px !important;

    line-height:1.2 !important;

    list-style:none !important;

}

.nav-links li:first-child{

    flex-shrink:1 !important;

    min-width:0 !important;

}

.nav-lang{

    white-space:nowrap !important;

}

.nav-links a{
  font-family:'DM Mono',monospace;
  font-size:.88rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  transition:opacity .2s;
}

.nav-links a:hover{
  opacity:.5;
}



.nav-lang{
  font-family:'DM Mono',monospace;
  font-size:.88rem;
  letter-spacing:.1em;
  color:#bbb;
  border:1px solid var(--lt);
  padding:.28rem .65rem;
    white-space:nowrap !important;
}

@keyframes heroNavFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

body.hero-ready nav#nav{
  animation:heroNavFadeIn 1s ease forwards;
  animation-delay:var(--hero-appear-delay);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  04. HERO / HYPE ANIMATION / TAGLINE / SCROLL               ║
   ╚══════════════════════════════════════════════════════════════╝ */

#hero{
  background:#fff !important;
  height:100dvh !important;
  min-height:100dvh !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
}

/* Anti-hairline safety layer.
   Prevents fine white/viewport gaps caused by mobile viewport rounding. */
#hero::before{
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  right:0;
  height:calc(100% + 4px);
  background:#fff;
  z-index:0;
  pointer-events:none;
}

.hero-hype-wrapper{
  position:absolute;
  left:50%;
  top:calc(50% + var(--hero-logo-top-offset));
  width:calc(var(--hero-logo-width) * 1.04);
  max-width:calc(var(--hero-logo-width) * 1.04);
  min-width:calc(var(--hero-logo-width) * 1.04);
  aspect-ratio:var(--hero-logo-aspect);
  transform:
    translate(-50%,-50%)
    translateY(var(--hero-logo-start-shift-y, 0px))
    scale(var(--hero-logo-initial-scale));
  transform-origin:center center;
  overflow:hidden;
  z-index:1000;
  pointer-events:none;
  animation:none;
}

.hero-hype-wrapper #whiterockagencylogov4_hype_container{
  width:101% !important;
  height:101% !important;
  margin:-0.5% !important;
  overflow:hidden !important;
  position:relative !important;
}

@keyframes heroHypeWrapperScale{

  from{
    transform:
      translate(-50%,-50%)
      translateY(var(--hero-logo-start-shift-y, 0px))
      scale(var(--hero-logo-initial-scale));
  }

  to{
    transform:
      translate(-50%,-50%)
      translateY(0)
      scale(1);
  }
}

@keyframes heroHypeLayerDown{
  0%,99%{ z-index:1000; }
  100%{ z-index:1; }
}

body.hero-ready .hero-hype-wrapper{
  animation:heroHypeWrapperScale 2s linear forwards,
            heroHypeLayerDown 2s linear forwards;
}

.hero-agency-tagline{
  position:absolute;
  left:50%;
  top:var(--hero-tagline-top);
  transform:translateX(-50%);
  width:max-content;
  z-index:900;
  opacity:0;
  text-align:center;
  color:var(--ink);
  pointer-events:none;
}

.hero-agency-tagline span{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:var(--hero-tagline-font-size);
  line-height:1.55;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero-agency-tagline span + span{
  margin-top:.18rem;
  color:rgba(29,29,27,.55);
}

@keyframes heroTaglineFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

body.hero-ready .hero-agency-tagline{
  animation:heroTaglineFadeIn 1s ease forwards;
  animation-delay:4s;
}

.hero-scroll,
.hero-scroll-static{
  position:absolute !important;
  left:50%;
  bottom:var(--hero-scroll-bottom);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.30rem;
  transform:translateX(-50%) scale(var(--hero-scroll-scale));
  transform-origin:center bottom;
  opacity:0;
  z-index:900;
  pointer-events:none;
  animation:none;
}

.hero-scroll span{
  font-family:'DM Mono',monospace;
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#818181;
}

.scroll-tick{
  width:1px;
  height:12px;
  background:linear-gradient(to bottom,var(--mid) 50%,transparent);
  animation:tp 1s ease-in-out infinite;
  transform-origin:top;
}

@keyframes tp{
  0%,100%{ transform:scaleY(.45); opacity:.35; }
  50%{ transform:scaleY(1); opacity:1; }
}

@keyframes heroScrollFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

body.hero-ready .hero-scroll-static{
  animation:heroScrollFadeIn 1s ease forwards;
  animation-delay:var(--hero-appear-delay);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  05. POSITIONING / OUR PROPOSITION                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

#positioning{
  position:relative;
  overflow:hidden;
  background:#000 !important;
  color:#fff;
  padding:7rem 3.5rem;
  scroll-margin-top:0 !important;
}

#positioning::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to left,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.70) 50%,
      rgba(0,0,0,.99) 100%
    ),
    url("../images/our_proposition.jpg");
  background-size:cover;
  background-position:right bottom;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:1;
  opacity:.92;
}

#positioning > *{
  position:relative;
  z-index:2;
}

.pos-lbl{
  font-family:'DM Mono',monospace;
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);
  margin-bottom:2.2rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

.pos-lbl::before{
  content:'';
  width:28px;
  height:1px;
  background:rgba(255,255,255,.2);
  display:block;
}

.pos-lbl.ct-sub{
  display:inline-block;
  margin-bottom:2.2rem;
}

.pos-lbl.ct-sub::before{
  display:none;
}

.pos-h{
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(2.2rem,5.5vw,5rem);
  line-height:.95;
  margin-bottom:2.2rem;
}

.pos-body{
  max-width:560px;
  font-size:.95rem;
  line-height:1.82;
  color:rgba(255,255,255,.72);
}

.pos-body strong{
  color:rgba(255,255,255,.90);
}

.pos-body p + p{
  margin-top:1.15rem;
}

.pos-stats{
  display:flex;
  gap:2rem;
  margin-top:2rem;
  margin-bottom:-2rem;
  flex-wrap:wrap;
}

.stat-n{
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:3.5rem;
  line-height:1;
}

.stat-l{
  color:rgba(255,255,255,.72) !important;
  text-transform:uppercase;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  06. SERVICES LAYOUT                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

#services{
  background:#fff;
  padding:8rem 0 0;
}

.services-intro-block{
  background:#fff;
  padding-top:8rem !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

.services-intro-block .svc-hd,
.svc-hd{
  padding:0 3.5rem 4rem !important;
  margin-bottom:0 !important;
  border-bottom:0px solid var(--lt) !important;
}

.sec-ttl{
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(2.5rem,6vw,6rem);
  letter-spacing:.02em;
  line-height:.9;
}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
}

.svc-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  padding:1.8rem 2.5rem 2rem;
  border-right:1px solid var(--lt);
  border-bottom:1px solid var(--lt);
  background:var(--ac);
  color:#fff;
  transition:color .4s ease;
}

.svc-card:nth-child(even){
  border-right:none;
}

.svc-img{
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--dk) center/cover no-repeat;
  opacity:0;
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}

.svc-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--dk);
  opacity:.82;
}

.svc-card:hover .svc-img{
  opacity:1;
}

.svc-c{
  position:relative;
  z-index:1;
}

.svc-num{
  font-family:'DM Mono',monospace;
  font-size:1.2rem;
  letter-spacing:.08em;
  color:#fff;
  margin-bottom:.9rem;
  display:flex;
  align-items:center;
  gap:1rem;
  transition:color .4s;
}

.svc-num span{
  display:block;
  flex:1;
  max-width:80px;
  height:2px;
  background:rgba(255,255,255,.65);
  opacity:.6;
}

.svc-name{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.8rem);
  line-height:1.15;
  letter-spacing:.02em;
  color:#fff;
  transition:color .4s;
}

.svc-card:hover .svc-name,
.svc-card:hover .svc-num{
  color:#fff;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  07. RIGHT-SIDE ROULETTE / DESKTOP SERVICE MENU             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.svc-details-wrap{
  display:flex;
  align-items:flex-start;
}

.svc-details-content{
  flex:1;
  min-width:0;
}

.svc-roulette-col{
  width:var(--roulette-column-width);
  flex-shrink:0;
  align-self:stretch;
  position:relative;
  position:sticky;
  overflow:hidden;
}

.svc-roulette{
  width:100%;
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  position:absolute;
  top:0;
  left:0;
  transform:translateY(var(--roulette-y,0px));
  will-change:transform;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.svc-roulette.visible{
  opacity:1;
  pointer-events:auto;
}

.svc-roulette.is-jumping .swi{
  transition:none;
}

.svc-roulette.is-jumping .swi:not(.active){
  opacity:.32 !important;
}

.svc-roulette.is-jumping .swi.active{
  opacity:1 !important;
}

.swi{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  cursor:pointer;
  transition:opacity .25s ease,border-color .25s ease,padding-left .25s ease;
  padding:.2rem 0;
  border-left:3px solid transparent;
  opacity:1 !important;
}

.swi-num{
  font-family:'DM Mono',monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  color:#cccccc !important;
  flex-shrink:0;
  padding-top:.12em;
  line-height:1.4;
  transition:color .3s;
}

.swi-name{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:300 !important;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8f8f8f !important;
  line-height:1.35;
  transition:color .3s,font-weight .3s;
}

.swi:not(.active):hover .swi-name,
.swi:not(.active):hover .swi-num{
  color:#7d7d7d !important;
  font-weight:700 !important;
}

.swi.active{
  padding-left:.45rem;
  border-left-color:var(--swi-c,var(--ink));
  margin-left:-.15rem;
}

.swi.active .swi-num,
.swi.active .swi-name,
.swi.active:hover .swi-num,
.swi.active:hover .swi-name{
  color:var(--swi-c,var(--ink)) !important;
  font-weight:700 !important;
}

body.roulette-scroll-lock .swi,
body.roulette-scroll-lock .swi *{
  transition:color .25s ease,border-color .25s ease;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  08. SERVICE DETAIL SECTIONS                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.svc-detail{
  position:relative;
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  padding:var(--service-section-padding-top) var(--service-section-padding-x) 0 !important;
  margin:0 0 var(--service-section-margin-bottom) !important;
  border-top:1px solid var(--lt) !important;
  background:#fff !important;
}

.svc-detail:first-of-type,
#svc-photography{
  border-top:none !important;
}

.svc-detail-inner{
  position:relative;
  z-index:2;
  width:80% !important;
  max-width:1600px !important;
  margin:0 auto !important;
  text-align:left !important;
  height:auto !important;
  min-height:0 !important;
}

.svc-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#818181;
  margin:0px 0px 13px 0px !important;
}

.svc-detail-title{
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(3rem,6vw,6rem);
  line-height:.95;
  letter-spacing:.005em !important;
  font-weight:300;
  color:var(--ac);
  margin-top:0 !important;
  margin-bottom:1rem !important;
  margin-left:-2px !important;
}

.svc-detail-text{
  max-width:64ch !important;
  margin:0 0 25px 40px !important;
  font-size:1rem !important;
  line-height:1.52 !important;
  color:rgba(29,29,27,.80) !important;
}

.svc-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  width:100%;
  margin:0 !important;
}

.svc-gallery img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  background:#e8e8e8;
}

.svc-visual{
  width:90%;
  margin:0 0 30px 0 !important;
}

.svc-visual img{
  display:block;
  width:100%;
  height:auto;
}

.svc-visual-caption{
  width:90%;
  margin:0 0 18px 0;
  text-align:center;
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(29,29,27,.68);
}

.svc-visual-secondary{
  width:63% !important;
  margin:0 auto 30px !important;
}

.svc-visual-secondary img{
  width:100%;
  height:auto;
}

.svc-visual-portfolio{
  width:50% !important;
  margin-top:0 !important;
}

.svc-visual-portfolio a{
  display:block;
  text-decoration:none;
}

.svc-visual-portfolio img{
  display:block;
  width:100%;
  height:auto;
}

/* Section title colours */
#svc-photography .svc-detail-title{ color:var(--s1-color); }
#svc-photoshop .svc-detail-title{ color:var(--s5-color); }
#svc-content .svc-detail-title{ color:var(--s2-color); }
#svc-indesign .svc-detail-title{ color:var(--s3-color); }
#svc-accessibility .svc-detail-title{ color:var(--s4-color); }
#svc-writing .svc-detail-title{ color:var(--s6-color); }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  09. HIGHLIGHTS                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.highlight-line{
  position:relative;
  display:inline-block;
  padding:3px;
  margin:-3px;
  isolation:isolate;
}

.highlight-line::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--highlight-color,#b9d1f7);
  z-index:-1;
  clip-path:inset(0 100% 0 0);
}

.highlight-line.highlight-run::before{
  animation:highlightSelect var(--highlight-duration,3s) cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--highlight-start-delay,.5s);
}

@keyframes highlightSelect{
  0%{ clip-path:inset(0 100% 0 0); }
  50%{ clip-path:inset(0 0 0 0); }
  100%{ clip-path:inset(0 0 0 100%); }
}

.svc-eyebrow .service-highlight{
  color:#818181;
  position:relative;
  display:inline-grid;
  padding:3px;
  margin:-3px;
  isolation:isolate;
}

.svc-eyebrow .service-highlight::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--highlight-color,#b9d1f7) !important;
  z-index:0;
  clip-path:inset(0 100% 0 0);
}

.svc-eyebrow .service-highlight-base,
.svc-eyebrow .service-highlight-white{
  grid-area:1 / 1;
  position:relative;
  z-index:1;
}

.svc-eyebrow .service-highlight-base{
  color:#818181;
}

.svc-eyebrow .service-highlight-white{
  color:#fff;
  clip-path:inset(0 100% 0 0);
  pointer-events:none;
}

.svc-eyebrow .service-highlight.highlight-run::before,
.svc-eyebrow .service-highlight.highlight-run .service-highlight-white{
  animation:serviceHighlightMask var(--service-highlight-duration,3.5s) cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--highlight-start-delay,.5s);
}

@keyframes serviceHighlightMask{
  0%{ clip-path:inset(0 100% 0 0); }
  42%{ clip-path:inset(0 0 0 0); }
  58%{ clip-path:inset(0 0 0 0); }
  100%{ clip-path:inset(0 0 0 100%); }
}

/* Service highlight stripe colours */
#svc-photography .service-highlight::before{ background:#6c8afc !important; }
#svc-photoshop .service-highlight::before{ background:#A23D6A !important; }
#svc-content .service-highlight::before{ background:#D0733F !important; }
#svc-indesign .service-highlight::before{ background:#7A5B9B !important; }
#svc-accessibility .service-highlight::before{ background:#5FA37A !important; }
#svc-writing .service-highlight::before{ background:#1D3557 !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  PHOTOGRAPHY INFOGRAPHIC — STATIC / HYPE MEDIA SWITCH       ║
   ║                                                              ║
   ║  Purpose                                                     ║
   ║  - Desktop: keep images/ifgp-photography-en.png              ║
   ║  - Mobile landscape: keep images/ifgp-photography-en.png     ║
   ║  - Small landscape phones: keep the static PNG               ║
   ║  - Mobile portrait only: replace the PNG with Hype animation ║
   ║                                                              ║
   ║  Hype original fixed stage                                   ║
   ║  - Width: 440 px                                             ║
   ║  - Height: 552 px                                            ║
   ║  - Ratio: 440 / 552                                          ║
   ║                                                              ║
   ║  Important                                                   ║
   ║  Hype internal objects remain fixed. The complete Hype stage ║
   ║  is scaled externally as one proportional graphic block.     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Photography infographic / common */
#svc-photography .photography-infographic-static,
#svc-photography .photography-infographic-hype{
  width:100%;
}

/* Photography infographic layout.
   The .svc-visual wrapper is the width reference.
   On desktop and landscape, it follows the same column as .svc-detail-text:
   max-width:64ch and margin-left:40px by default. */
#svc-photography .svc-visual{
  width:100% !important;
  max-width:64ch !important;
  margin:0 0 30px 40px !important;
  font-size:1rem !important;
}


/* Default for desktop and all non-portrait contexts:
   show the existing PNG and keep the Hype version hidden. */
#svc-photography .photography-infographic-static{
  display:block;
}

#svc-photography .photography-infographic-hype{
  display:none;
}

#svc-photography .photography-infographic-static img{
  display:block;
  width:100%;
  height:auto;
}

/* Responsive outer stage.
   This box receives the same available width as the static infographic.
   Its height is calculated by JS from the original 440 × 552 ratio. */
#svc-photography .photography-hype-stage{
  position:relative;
  width:100%;
  max-width:100%;
  height:0;
  overflow:hidden;
}

/* Fixed original Hype document.
   Do not make this flexible. It is scaled as a complete block by JS. */
#svc-photography #ifgpphotographyanimen_hype_container{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:440px !important;
  height:552px !important;
  margin:0 !important;
  overflow:hidden !important;
  transform-origin:top left !important;
  will-change:transform;
}

/* Mobile portrait only:
   replace the PNG by the externally scaled Hype animation.
   The infographic wrapper uses full screen width in portrait. */
@media (orientation:portrait) and (max-width:900px){

  #svc-photography .svc-visual{
    width:calc(100% + 2.5rem) !important;
    max-width:calc(100% + 2.5rem) !important;
    margin-left:-1.25rem !important;
    margin-right:-1.25rem !important;
    margin-bottom:30px !important;
    font-size:1rem !important;
  }

  #svc-photography .photography-infographic-static{
    display:none !important;
  }

  #svc-photography .photography-infographic-hype{
    display:block !important;
    width:100% !important;
  }
}

/* Small portrait phones keep the same external scaling.
   This block exists for future fine-tuning if needed. */
@media (orientation:portrait) and (max-width:390px) and (max-height:700px){

  #svc-photography .photography-infographic-hype{
    display:block !important;
    width:100% !important;
  }
}

/* Mobile landscape and small landscape explicitly keep the PNG. */
@media (orientation:landscape) and (max-width:900px){

  #svc-photography .photography-infographic-static{
    display:block !important;
  }

  #svc-photography .photography-infographic-hype{
    display:none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  10. CONTACT                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

#contact{
  background:var(--off);
  padding:8rem 3.5rem;
}

.ct-inner{
  max-width:820px;
}

.ct-h{
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(2.5rem,6vw,6rem);
  line-height:.92;
  margin-bottom:1rem;
}

.ct-sub{
  font-family:'DM Mono',monospace;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#818181;
  margin-bottom:3rem;
}

.cf{
  display:grid;
  gap:1.1rem;
}

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

.cf input,
.cf select,
.cf textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--lt);
  padding:1rem 1.2rem;
  font-family:'Barlow',sans-serif;
  font-size:.92rem;
  font-weight:300;
  color:var(--ink);
  outline:none;
  border-radius:0;
  -webkit-appearance:none;
  transition:border-color .2s;
}

.cf input:focus,
.cf select:focus,
.cf textarea:focus{
  border-color:var(--ink);
}

.cf textarea{
  min-height:150px;
  resize:vertical;
}

.cf-btn{
  background:var(--ink);
  color:#fff;
  border:none;
  padding:1.1rem 3rem;
  align-self:start;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .2s;
}

.cf-btn:hover{
  opacity:.75;
}

.cf-status{
  font-family:'DM Mono',monospace;
  font-size:.7rem;
  letter-spacing:.1em;
  color:#818181;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  11. FOOTER — SEMANTIC CONTROL                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

footer#foot{
  background:var(--ink) !important;
  color:#fff !important;
  padding:3rem 3.5rem !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:1.5rem !important;
}

/* Left column containing footer logo + legal/address text */
.foot-copy-wrap,
footer#foot > div:first-child{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
}

/* Logo wrapper only */
.foot-brand-wrap{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Actual footer SVG logo only */
.footer-logo-svg{
  display:block !important;
  width:auto !important;
  height:var(--footer-logo-height) !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto !important;
}

/* Safety if an SVG is wrapped inside another object */
.footer-logo-svg svg{
  display:block !important;
  width:auto !important;
  height:100% !important;
}

/* Legal/address text block only */
.foot-copy{
  display:block !important;
  margin-top:var(--footer-logo-text-gap) !important;
  padding:0 !important;
  font-family:'DM Mono',monospace !important;
  font-size:var(--footer-copy-size) !important;
  line-height:1.35 !important;
  letter-spacing:.08em !important;
  color:var(--footer-copy-color) !important;
}

/* Individual footer text lines */
.foot-copy p{
  margin:0 !important;
  padding:0 !important;
  color:var(--footer-copy-color) !important;
}

/* Space between legal line and address line */
.foot-copy p + p{
  margin-top:var(--footer-copy-line-gap) !important;
}

/* Social links block only */
.foot-links{
  display:flex !important;
  gap:2.2rem !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Disabled social link text only */
.foot-link-disabled,
.foot-links a,
.foot-links-disabled,
.foot-links-disabled a{
  font-family:'DM Mono',monospace !important;
  font-size:var(--footer-link-size) !important;
  color:var(--footer-copy-color) !important;
  text-decoration:none !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  12. MOBILE NAVIGATION                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

.mobile-menu-toggle,
.mobile-service-menu{
  display:none;
}

.mobile-menu-box{
  display:none;
  z-index:999998 !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  13. RESPONSIVE OVERRIDES — INDEPENDENT DEVICE MAP          ║
   ║                                                              ║
   ║  Principle                                                   ║
   ║  Each device block is self-contained.                        ║
   ║  Edit the object directly inside the device + orientation.   ║
   ║  Do not rely on values inherited from another mobile media.  ║
   ║                                                              ║
   ║  Target viewports                                            ║
   ║  01. Desktop / default                                       ║
   ║  02. iPhone Pro Max portrait      440 × 956                  ║
   ║  03. iPhone Pro Max landscape     956 × 440                  ║
   ║  04. iPhone Pro portrait          402 × 874                  ║
   ║  05. iPhone Pro landscape         874 × 402                  ║
   ║  06. iPhone portrait              393 × 852                  ║
   ║  07. iPhone landscape             852 × 393                  ║
   ║  08. iPhone SE portrait           375 × 667                  ║
   ║  09. iPhone SE landscape          667 × 375                  ║
   ╚══════════════════════════════════════════════════════════════╝ */


/* ──────────────────────────────────────────────────────────────
   GLOBAL DESIGN DECISIONS
   These are site-wide, not media-specific editing values.
────────────────────────────────────────────────────────────── */

:root{
  --hero-logo-initial-scale:30;
}

.services-intro-block{
  padding-top:4rem !important;
}

.services-intro-block .svc-hd,
.svc-hd{
  padding-bottom:0 !important;
}

.svc-eyebrow,
.svc-eyebrow .service-highlight{
  letter-spacing:.08em !important;
}

@keyframes highlightSelectMobileSection{
  0%{ clip-path:inset(0 100% 0 0); }
  18%{ clip-path:inset(0 0 0 0); }
  86%{ clip-path:inset(0 0 0 0); }
  100%{ clip-path:inset(0 0 0 100%); }
}

/* ──────────────────────────────────────────────────────────────
   01. DESKTOP / DEFAULT
────────────────────────────────────────────────────────────── */

@media (min-width:981px) and (min-height:501px){


  /* DESKTOP — edit here only for desktop */
  :root{
    --hero-logo-initial-scale:30;
  }

  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -30px) !important;
    width:calc(400px * 1.04) !important;
    max-width:calc(400px * 1.04) !important;
    min-width:calc(400px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(1000px)
      scale(var(--hero-logo-initial-scale));
  }

  .hero-agency-tagline{
    position:absolute !important;
    left:50% !important;
    top:calc(50% + 200px) !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    z-index:900 !important;
  }

  .hero-agency-tagline span{
    font-size:1rem !important;
    line-height:1.55 !important;
    letter-spacing:.14em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:50% !important;
    right:auto !important;
    bottom:10px !important;
    transform:translateX(-50%) scale(1.3) !important;
    transform-origin:center bottom !important;
  }

  .footer-logo-svg{
    height:24px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:.82rem !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:.6rem !important;
  }
  
    .svc-visual,
  .svc-visual-caption{
    width:90% !important;
    max-width:1000px !important;
  }
  .svc-visual-secondary{
    width:63% !important;
    max-width:786px !important;
  }
  .svc-visual-portfolio{
    width:50% !important;
    max-width:624px !important;
  }
  
  #positioning .pos-lbl{

  font-size:1.1rem !important;

}
}

/* ──────────────────────────────────────────────────────────────
   DESKTOP WIDE — progressive scaling
────────────────────────────────────────────────────────────── */


@media (min-width:775px){

  #positioning .pos-body{

    width:75% !important;

    max-width:none !important;

    font-size:1.25rem !important;

  }

}

@media (min-width:900px){

  #positioning .pos-body{

    width:75% !important;

    max-width:none !important;

    font-size:calc(1rem * (1 + ((100vw - 1200px) / 200) * .25)) !important;

  }

}

@media (min-width:1200px){

  #positioning .pos-body{

    width:75% !important;

    max-width:none !important;

    font-size:calc(1rem * (1 + ((100vw - 1200px) / 200) * .25)) !important;

  }

  .svc-roulette-col{

    width:calc(240px + ((100vw - 1200px) * 0.08333)) !important;

    max-width:360px !important;

  }

  .svc-roulette{

    padding:calc(1.6rem * (1 + ((100vw - 1200px) / 200))) !important;

    gap:calc(.5rem * (1 + ((100vw - 1200px) / 200))) !important;

  }

  .swi-name{

    font-size:calc(.8rem * (1 + ((100vw - 1200px) / 200))) !important;

  }

  .swi-num{

    font-size:calc(.62rem * (1 + ((100vw - 1200px) / 200))) !important;

  }

  .svc-eyebrow{

    font-size:calc(.9rem * (1 + ((100vw - 1200px) / 200))) !important;

  }

  .svc-detail-text{

    font-size:calc(1rem * (1 + ((100vw - 1200px) / 200))) !important;

  }

}

@media (min-width:1400px){
  .svc-roulette-col{
    width:360px !important;
  }
  .svc-roulette{
    padding:2rem !important;
    gap:.625rem !important;
  }
  .swi-name{
    font-size:1.1rem !important;
  }
  .svc-eyebrow{
  font-size:1.125rem !important;
}
  .swi-num{
    font-size:.85rem !important;
  }
  .svc-detail-text{
  font-size:1.25rem !important;
}

#svc-photography .svc-visual{
  font-size:1.25rem !important;
}
  .pos-body{
    width:60% !important;
    max-width:1125px !important;
    font-size:1.25rem !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   02. iPhone Pro Max portrait — 440 × 956
────────────────────────────────────────────────────────────── */

@media (orientation:portrait) and (min-width:431px) and (max-width:450px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  html{
    scroll-behavior:auto !important;
  }

  .svc-roulette-col{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    flex:0 0 0 !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
  
    #svc-photography{
    padding-top:10px !important;
  }

  #positioning{
    padding:5rem 1.5rem !important;
  }

  .services-intro-block,
  #positioning,
  #contact{
    width:100% !important;
  }

  .services-intro-block .svc-hd{
    padding:0 1.5rem 2rem !important;
  }

  .svc-grid{
    grid-template-columns:1fr !important;
  }

  .svc-card{
    border-right:none !important;
  }

  .svc-detail{
    padding:77px 1.25rem 0 !important;
    margin-bottom:55px !important;
  }

  .svc-detail-inner{
    width:100% !important;
  }

  .svc-detail-title{
    font-size:clamp(2.4rem,12vw,4rem) !important;
  }

  .svc-detail-text{
    margin-left:20px !important;
  }

  .svc-gallery{
    grid-template-columns:1fr !important;
  }

  .svc-visual{
    width:100% !important;
    margin-top:22px !important;
  }

  .svc-visual-portfolio{
    width:100% !important;
  }

  .svc-visual-secondary{
    width:78% !important;
  }

  #svc-indesign .svc-visual-secondary,
  #svc-indesign .svc-visual-secondary img{
    width:100% !important;
    max-width:100% !important;
  }

  #contact{
    padding:5rem 1.5rem !important;
  }

  .cf-row{
    grid-template-columns:1fr !important;
  }

  .svc-detail .service-highlight{
    --highlight-duration:4.4s !important;
  }

  .svc-detail .service-highlight.highlight-run::before,
  .svc-detail .service-highlight.highlight-run .service-highlight-white{
    animation-name:highlightSelectMobileSection !important;
    animation-duration:4.4s !important;
    animation-timing-function:cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode:forwards !important;
    animation-delay:var(--highlight-start-delay,.5s) !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -34px) !important;
    width:calc(286px * 1.04) !important;
    max-width:calc(286px * 1.04) !important;
    min-width:calc(286px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 28px !important;
    margin:0 auto !important;
    left:auto !important;
    right:auto !important;
    top:calc(50% + 175px) !important;
    transform:none !important;
    text-align:center !important;
    box-sizing:border-box !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:340px !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:1rem !important;
    line-height:1.6 !important;
    letter-spacing:.035em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:50% !important;
    right:auto !important;
    bottom:40px !important;
    transform:translateX(-50%) scale(1.3) !important;
    transform-origin:center bottom !important;
  }
  
    .pos-stats{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:.6rem !important;
}

.stat{
  flex:1 1 0 !important;
  min-width:0 !important;
}

.stat-n{
  font-size:3.2rem !important;
}

.stat-l{
  font-size:.75rem !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;

}

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:2.5rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:1.5rem !important;
  }

  .footer-logo-svg{
    height:20px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:.76rem !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.4rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:.56rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   03. iPhone Pro Max landscape — 956 × 440
────────────────────────────────────────────────────────────── */

@media (orientation:landscape) and (min-width:901px) and (max-width:980px) and (max-height:500px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  #hero{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  .svc-roulette-col{
    display:none !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
  }

  /* SERVICE TEXT ALIGNMENT — MOBILE LANDSCAPE ONLY */

  .svc-eyebrow{
    margin-left:-60px !important;
  }

  .svc-detail-title{
    margin-left:-62px !important;
  }

  .svc-detail-text{
    margin-left:-20px !important;
  }

  #svc-photography .svc-visual{
    width:100% !important;
    max-width:64ch !important;
    margin-left:-20px !important;
    margin-right:0 !important;
    margin-bottom:30px !important;
    font-size:1rem !important;
  }
  
  #svc-photography{
    padding-top:40px !important;
  }
  
  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -14px) !important;
    width:calc(260px * 1.04) !important;
    max-width:calc(240px * 1.04) !important;
    min-width:calc(240px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:absolute !important;
    left:50% !important;
          padding-top:8px !important;
    top:calc(50% + 126px) !important;
    transform:translateX(-50%) !important;
    width:90vw !important;
    max-width:90vw !important;
    text-align:center !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:90vw !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:.8rem !important;
    line-height:1.35 !important;
    letter-spacing:.095em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:auto !important;
    right:1rem !important;
    bottom:10px !important;
    transform:scale(1.3) !important;
    transform-origin:right bottom !important;
  }

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:1.4rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:.8rem !important;
  }

  .footer-logo-svg{
    height:20px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:9px !important;
    letter-spacing:.045em !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.1rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:9px !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   04. iPhone Pro portrait — 402 × 874
────────────────────────────────────────────────────────────── */

@media (orientation:portrait) and (min-width:400px) and (max-width:430px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  html{
    scroll-behavior:auto !important;
  }

  .svc-roulette-col{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    flex:0 0 0 !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
  
    #svc-photography{
    padding-top:10px !important;
  }

  #positioning{
    padding:5rem 1.5rem !important;
  }

  .services-intro-block,
  #positioning,
  #contact{
    width:100% !important;
  }

  .services-intro-block .svc-hd{
    padding:0 1.5rem 2rem !important;
  }

  .svc-grid{
    grid-template-columns:1fr !important;
  }

  .svc-card{
    border-right:none !important;
  }

  .svc-detail{
    padding:77px 1.25rem 0 !important;
    margin-bottom:55px !important;
  }

  .svc-detail-inner{
    width:100% !important;
  }

  .svc-detail-title{
    font-size:clamp(2.4rem,12vw,4rem) !important;
  }

  .svc-detail-text{
    margin-left:20px !important;
  }

  .svc-gallery{
    grid-template-columns:1fr !important;
  }

  .svc-visual{
    width:100% !important;
    margin-top:22px !important;
  }

  .svc-visual-portfolio{
    width:100% !important;
  }

  .svc-visual-secondary{
    width:78% !important;
  }

  #svc-indesign .svc-visual-secondary,
  #svc-indesign .svc-visual-secondary img{
    width:100% !important;
    max-width:100% !important;
  }

  #contact{
    padding:5rem 1.5rem !important;
  }

  .cf-row{
    grid-template-columns:1fr !important;
  }

  .svc-detail .service-highlight{
    --highlight-duration:4.4s !important;
  }

  .svc-detail .service-highlight.highlight-run::before,
  .svc-detail .service-highlight.highlight-run .service-highlight-white{
    animation-name:highlightSelectMobileSection !important;
    animation-duration:4.4s !important;
    animation-timing-function:cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode:forwards !important;
    animation-delay:var(--highlight-start-delay,.5s) !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -34px) !important;
    width:calc(286px * 1.04) !important;
    max-width:calc(286px * 1.04) !important;
    min-width:calc(286px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 28px !important;
    margin:0 auto !important;
    left:auto !important;
    right:auto !important;
    top:calc(50% + 175px) !important;
    transform:none !important;
    text-align:center !important;
    box-sizing:border-box !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:340px !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:1rem !important;
    line-height:1.6 !important;
    letter-spacing:.035em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:50% !important;
    right:auto !important;
    bottom:40px !important;
    transform:translateX(-50%) scale(1.3) !important;
    transform-origin:center bottom !important;
  }
  
    .pos-stats{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:.6rem !important;
}

.stat{
  flex:1 1 0 !important;
  min-width:0 !important;
}

.stat-n{
  font-size:3.2rem !important;
}

.stat-l{
  font-size:.7rem !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;

}

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:2.5rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:1.5rem !important;
  }

  .footer-logo-svg{
    height:20px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:.76rem !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.4rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:.56rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   05. iPhone Pro landscape — 874 × 402
────────────────────────────────────────────────────────────── */

@media (orientation:landscape) and (min-width:870px) and (max-width:900px) and (max-height:430px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  #hero{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  .svc-roulette-col{
    display:none !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
  }
  
    .svc-eyebrow{
    margin-left:-60px !important;
  }

  .svc-detail-title{
    margin-left:-62px !important;
  }

  .svc-detail-text{
    margin-left:-20px !important;
  }

  #svc-photography .svc-visual{
    width:100% !important;
    max-width:64ch !important;
    margin-left:-20px !important;
    margin-right:0 !important;
    margin-bottom:30px !important;
    font-size:1rem !important;
  }
  
  #svc-photography{
    padding-top:40px !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -14px) !important;
    width:calc(230px * 1.04) !important;
    max-width:calc(230px * 1.04) !important;
    min-width:calc(230px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:absolute !important;
    left:50% !important;
    top:calc(50% + 126px) !important;
    transform:translateX(-50%) !important;
    width:90vw !important;
    max-width:90vw !important;
    text-align:center !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:90vw !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:.85rem !important;
    line-height:1.35 !important;
    letter-spacing:.095em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:auto !important;
    right:1rem !important;
    bottom:10px !important;
    transform:scale(1.3) !important;
    transform-origin:right bottom !important;
  }

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:1.4rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:.8rem !important;
  }

  .footer-logo-svg{
    height:20px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:9px !important;
    letter-spacing:.045em !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.1rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:9px !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   06. iPhone portrait — 393 × 852
────────────────────────────────────────────────────────────── */

@media (orientation:portrait) and (min-width:391px) and (max-width:399px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  html{
    scroll-behavior:auto !important;
  }

  .svc-roulette-col{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    flex:0 0 0 !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
  
    #svc-photography{
    padding-top:10px !important;
  }

  #positioning{
    padding:5rem 1.5rem !important;
  }

  .services-intro-block,
  #positioning,
  #contact{
    width:100% !important;
  }

  .services-intro-block .svc-hd{
    padding:0 1.5rem 2rem !important;
  }

  .svc-grid{
    grid-template-columns:1fr !important;
  }

  .svc-card{
    border-right:none !important;
  }

  .svc-detail{
    padding:77px 1.25rem 0 !important;
    margin-bottom:55px !important;
  }

  .svc-detail-inner{
    width:100% !important;
  }

  .svc-detail-title{
    font-size:clamp(2.4rem,12vw,4rem) !important;
  }

  .svc-detail-text{
    margin-left:20px !important;
  }

  .svc-gallery{
    grid-template-columns:1fr !important;
  }

  .svc-visual{
    width:100% !important;
    margin-top:22px !important;
  }

  .svc-visual-portfolio{
    width:100% !important;
  }

  .svc-visual-secondary{
    width:78% !important;
  }

  #svc-indesign .svc-visual-secondary,
  #svc-indesign .svc-visual-secondary img{
    width:100% !important;
    max-width:100% !important;
  }

  #contact{
    padding:5rem 1.5rem !important;
  }

  .cf-row{
    grid-template-columns:1fr !important;
  }

  .svc-detail .service-highlight{
    --highlight-duration:4.4s !important;
  }

  .svc-detail .service-highlight.highlight-run::before,
  .svc-detail .service-highlight.highlight-run .service-highlight-white{
    animation-name:highlightSelectMobileSection !important;
    animation-duration:4.4s !important;
    animation-timing-function:cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode:forwards !important;
    animation-delay:var(--highlight-start-delay,.5s) !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -34px) !important;
    width:calc(286px * 1.04) !important;
    max-width:calc(286px * 1.04) !important;
    min-width:calc(286px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 28px !important;
    margin:0 auto !important;
    left:auto !important;
    right:auto !important;
    top:calc(50% + 175px) !important;
    transform:none !important;
    text-align:center !important;
    box-sizing:border-box !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:340px !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:.9rem !important;
    line-height:1.6 !important;
    letter-spacing:.035em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:50% !important;
    right:auto !important;
    bottom:40px !important;
    transform:translateX(-50%) scale(1.3) !important;
    transform-origin:center bottom !important;
  }
  
    .pos-stats{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:.6rem !important;
}

.stat{
  flex:1 1 0 !important;
  min-width:0 !important;
}

.stat-n{
  font-size:2.5rem !important;
}

.stat-l{
  font-size:.7rem !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;

}

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:2.5rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:1.5rem !important;
  }

  .footer-logo-svg{
    height:20px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:.76rem !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.4rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:.56rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   07. iPhone landscape — 852 × 393
────────────────────────────────────────────────────────────── */

@media (orientation:landscape) and (min-width:800px) and (max-width:869px) and (max-height:420px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  #hero{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  .svc-roulette-col{
    display:none !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
  }
    .svc-eyebrow{
    margin-left:-60px !important;
  }

  .svc-detail-title{
    margin-left:-62px !important;
  }

  .svc-detail-text{
    margin-left:-20px !important;
  }

  #svc-photography .svc-visual{
    width:100% !important;
    max-width:64ch !important;
    margin-left:-20px !important;
    margin-right:0 !important;
    margin-bottom:30px !important;
    font-size:1rem !important;
  }

    #svc-photography{
    padding-top:40px !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -14px) !important;
    width:calc(240px * 1.04) !important;
    max-width:calc(240px * 1.04) !important;
    min-width:calc(240px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:absolute !important;
    left:50% !important;
    top:calc(50% + 126px) !important;
    transform:translateX(-50%) !important;
    width:90vw !important;
    max-width:90vw !important;
    text-align:center !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:90vw !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:.85rem !important;
    line-height:1.35 !important;
    letter-spacing:.095em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:auto !important;
    right:1rem !important;
    bottom:10px !important;
    transform:scale(1.3) !important;
    transform-origin:right bottom !important;
  }

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:1.4rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:.8rem !important;
  }

  .footer-logo-svg{
    height:20px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:9px !important;
    letter-spacing:.045em !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.1rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:9px !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   08. iPhone SE portrait — 375 × 667
────────────────────────────────────────────────────────────── */

@media (orientation:portrait) and (max-width:390px) and (max-height:700px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  html{
    scroll-behavior:auto !important;
  }

  .svc-roulette-col{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    flex:0 0 0 !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
  
    #svc-photography{
    padding-top:10px !important;
  }

  #positioning{
    padding:5rem 1.5rem !important;
  }

  .services-intro-block,
  #positioning,
  #contact{
    width:100% !important;
  }

  .services-intro-block .svc-hd{
    padding:0 1.5rem 2rem !important;
  }

  .svc-grid{
    grid-template-columns:1fr !important;
  }

  .svc-card{
    border-right:none !important;
  }

  .svc-detail{
    padding:77px 1.25rem 0 !important;
    margin-bottom:55px !important;
  }

  .svc-detail-inner{
    width:100% !important;
  }

  .svc-detail-title{
    font-size:clamp(2.4rem,12vw,4rem) !important;
  }

  .svc-detail-text{
    margin-left:20px !important;
  }

  .svc-gallery{
    grid-template-columns:1fr !important;
  }

  .svc-visual{
    width:100% !important;
    margin-top:22px !important;
  }

  .svc-visual-portfolio{
    width:100% !important;
  }

  .svc-visual-secondary{
    width:78% !important;
  }

  #svc-indesign .svc-visual-secondary,
  #svc-indesign .svc-visual-secondary img{
    width:100% !important;
    max-width:100% !important;
  }

  #contact{
    padding:5rem 1.5rem !important;
  }

  .cf-row{
    grid-template-columns:1fr !important;
  }

  .svc-detail .service-highlight{
    --highlight-duration:4.4s !important;
  }

  .svc-detail .service-highlight.highlight-run::before,
  .svc-detail .service-highlight.highlight-run .service-highlight-white{
    animation-name:highlightSelectMobileSection !important;
    animation-duration:4.4s !important;
    animation-timing-function:cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode:forwards !important;
    animation-delay:var(--highlight-start-delay,.5s) !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -46px) !important;
    width:calc(260px * 1.04) !important;
    max-width:calc(260px * 1.04) !important;
    min-width:calc(260px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 0 !important;
    margin:0 auto !important;
    left:auto !important;
    right:auto !important;
    top:calc(50% + 112px) !important;
    transform:none !important;
    text-align:center !important;
    box-sizing:border-box !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:88vw !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:.8rem !important;
    line-height:1.32 !important;
    letter-spacing:.09em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:50% !important;
    right:auto !important;
    bottom:20px !important;
    transform:translateX(-50%) scale(1) !important;
    transform-origin:center bottom !important;
  }

  .mobile-service-menu button{
    font-size:1.0rem !important;
    line-height:1.5 !important;
    padding:.48rem .56rem !important;
  }

  .mobile-menu-label{
    display:none !important;
  }
  
  .pos-stats{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:.6rem !important;
}

.stat{
  flex:1 1 0 !important;
  min-width:0 !important;
}

.stat-n{
  font-size:3rem !important;
}

.stat-l{
  font-size:.7rem !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;

}

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:2.5rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:1.5rem !important;
  }

  .footer-logo-svg{
    height:18px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:.70rem !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.4rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:.52rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   09. iPhone SE landscape — 667 × 375
────────────────────────────────────────────────────────────── */

@media (orientation:landscape) and (max-width:700px) and (max-height:430px){


  /* NAVIGATION / MOBILE MENU — edit here for this device only */
  nav#nav,
  nav#nav.scrolled{
    padding:1rem 1rem !important;
    align-items:center !important;
    z-index:2147483600 !important;
    isolation:isolate !important;
  }

  .nav-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:.55rem !important;
    line-height:0 !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .nav-links{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    list-style:none !important;
  }

  .nav-links li{
    display:flex !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }

  .nav-links li:not(:last-child){
    display:none !important;
  }

  .nav-lang,
  .mobile-menu-box{
    box-sizing:border-box !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:#fff !important;
    line-height:1 !important;
    transform:none !important;
    position:relative !important;
    top:0 !important;
  }

  .nav-lang{
    width:80px !important;
    font-family:'DM Mono',monospace !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#818181 !important;
    white-space:nowrap !important;
  }

  .mobile-menu-box{
    width:68px !important;
    top:-2px !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-toggle{
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:var(--ink) !important;
    position:relative !important;
    z-index:2147483601 !important;
  }

  .mobile-menu-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .mobile-menu-icon{
    width:28px !important;
    height:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    background:currentColor !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{
    position:relative !important;
    display:block !important;
    height:18px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span{
    position:absolute !important;
    left:0 !important;
    top:8px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1){
    transform:rotate(45deg) !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2){
    opacity:0 !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3){
    transform:rotate(-45deg) !important;
  }

  .mobile-service-menu{
    position:absolute !important;
    top:calc(100% + .45rem) !important;
    right:0 !important;
    z-index:2147483647 !important;
    display:flex;
    flex-direction:column;
    width:250px !important;
    max-width:250px !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    border:none !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
    padding:.35rem !important;
    opacity:1 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  .mobile-service-menu[hidden]{
    display:none !important;
  }

  .mobile-service-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(29,29,27,.08) !important;
    background:#fff !important;
    color:var(--ink) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    padding:.58rem .64rem !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    font-size:1.11rem !important;
    line-height:1.08 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .mobile-service-menu button:last-child{
    border-bottom:0 !important;
  }

  /* PAGE LAYOUT — edit here for this device only */
  #hero{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  .svc-roulette-col{
    display:none !important;
  }

  .svc-details-wrap{
    display:block !important;
  }

  .svc-details-content{
    width:100% !important;
    max-width:100% !important;
  }
  
    .svc-eyebrow{
    margin-left:-60px !important;
  }

  .svc-detail-title{
    margin-left:-62px !important;
  }

  .svc-detail-text{
    margin-left:-20px !important;
  }

  #svc-photography .svc-visual{
    width:100% !important;
    max-width:64ch !important;
    margin-left:-20px !important;
    margin-right:0 !important;
    margin-bottom:30px !important;
    font-size:1rem !important;
  }
  
    #svc-photography{
    padding-top:40px !important;
  }

  /* HERO — edit here for this device only */
  .hero-hype-wrapper{
    left:50% !important;
    top:calc(50% + -14px) !important;
    width:calc(190px * 1.04) !important;
    max-width:calc(190px * 1.04) !important;
    min-width:calc(190px * 1.04) !important;
    transform:
      translate(-50%,-50%)
      translateY(0px)
      scale(var(--hero-logo-initial-scale));
    transform-origin:center center !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  body.hero-ready .hero-hype-wrapper{
    animation:heroHypeWrapperScale 2s linear forwards,
              heroHypeLayerDown 2s linear forwards !important;
  }

  .hero-agency-tagline{
    position:absolute !important;
    left:50% !important;
    top:calc(50% + 94px) !important;
    transform:translateX(-50%) !important;
    width:90vw !important;
    max-width:90vw !important;
    text-align:center !important;
    z-index:1 !important;
  }

  .hero-agency-tagline span{
    display:block !important;
    max-width:90vw !important;
    margin:0 auto !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    font-size:.75rem !important;
    line-height:1.35 !important;
    letter-spacing:.095em !important;
  }

  .hero-scroll,
  .hero-scroll-static{
    left:auto !important;
    right:1rem !important;
    bottom:10px !important;
    transform:scale(1) !important;
    transform-origin:right bottom !important;
  }

  /* FOOTER — edit here for this device only */
  footer#foot{
    padding:1.4rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:.8rem !important;
  }

  .footer-logo-svg{
    height:18px !important;
  }

  .foot-copy{
    margin-top:12px !important;
    font-size:8.5px !important;
    letter-spacing:.045em !important;
  }

  .foot-copy p + p{
    margin-top:3px !important;
  }

  .foot-links{
    gap:1.1rem !important;
    flex-wrap:wrap !important;
  }

  .foot-link-disabled,
  .foot-links a,
  .foot-links-disabled,
  .foot-links-disabled a{
    font-size:8.5px !important;
  }

}

/* ──────────────────────────────────────────────────────────────
   DESKTOP NARROW / TABLET — below 981 px
────────────────────────────────────────────────────────────── */

@media (max-width:980px) and (min-height:501px){
  .hero-hype-wrapper{
    width:calc(400px * 0.75 * 1.04) !important;
    max-width:calc(400px * 0.75 * 1.04) !important;
    min-width:calc(400px * 0.75 * 1.04) !important;
  }
  .hero-agency-tagline{
    top:calc(50% + 140px) !important;
    width:80vw !important;
    max-width:80vw !important;
  }
  .hero-agency-tagline span{
    font-size:.75rem !important;
    line-height:1.45 !important;
    letter-spacing:.08em !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  14. REDUCED MOTION                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHOTOGRAPHY PORTFOLIO IMAGE — FINAL WIDTH CONTROL
   Target: image below “Open the photography portfolio”
   - Desktop and mobile landscape: same width/alignment as section body text
   - Mobile portrait: full screen width
═══════════════════════════════════════════════════════════════ */

/* Desktop and mobile landscape/default:
   same visual column as .svc-detail-text */
#svc-photography .svc-visual-portfolio{
  width:100% !important;
  max-width:64ch !important;
  margin:0 0 30px 40px !important;
}

#svc-photography .svc-visual-portfolio a,
#svc-photography .svc-visual-portfolio img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

/* Desktop wide: keep the portfolio image synced with the enlarged body text */
@media (min-width:1200px){
  #svc-photography .svc-visual-portfolio{
    font-size:calc(1rem * (1 + ((100vw - 1200px) / 200))) !important;
  }
}

@media (min-width:1400px){
  #svc-photography .svc-visual-portfolio{
    font-size:1.25rem !important;
  }
}

/* All mobile portrait versions:
   make the portfolio image full screen width, ignoring the section side padding */
@media (orientation:portrait) and (max-width:900px){
  #svc-photography .svc-visual-portfolio{
    width:calc(100% + 2.5rem) !important;
    max-width:calc(100% + 2.5rem) !important;
    margin-left:-1.25rem !important;
    margin-right:-1.25rem !important;
    margin-bottom:30px !important;
    font-size:1rem !important;
  }
}

/* Mobile landscape:
   align with the body text used in the landscape device blocks */
@media (orientation:landscape) and (max-width:980px) and (max-height:500px){
  #svc-photography .svc-visual-portfolio{
    width:100% !important;
    max-width:64ch !important;
    margin-left:-20px !important;
    margin-right:0 !important;
    font-size:1rem !important;
  }
}