/* =========================================================
   TINK HOME — DESIGN V2
   Final visual layer loaded after all existing page styles.
   Keeps the original structure while making the site feel
   more cinematic, polished and consistent.
   ========================================================= */

:root{
  --font-display:"Manrope",sans-serif;
  --blue-deep:#045f96;
  --blue-soft:#bfe8fb;
  --surface:#f6f8f8;
  --surface-2:#eaf0f2;
  --ink-soft:#172127;
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:34px;
  --shadow-soft:0 18px 55px rgba(5,24,34,.09);
  --shadow-deep:0 32px 90px rgba(5,24,34,.16);
}

body{
  background:
    radial-gradient(circle at 15% -10%,rgba(8,123,193,.06),transparent 26rem),
    var(--paper);
}

main{overflow:clip}

/* ---------- Header / navigation ---------- */
.header{
  padding:10px 0 0;
  pointer-events:none;
}
.nav{
  height:66px;
  padding:0 14px 0 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(9,17,22,.16);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 35px rgba(0,0,0,.10);
  pointer-events:auto;
  transition:.35s ease;
}
.header.scrolled{
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  border-radius:0;
}
.header.scrolled .nav{
  background:rgba(245,248,248,.88);
  border-color:rgba(11,17,21,.08);
  box-shadow:0 12px 42px rgba(5,24,34,.10);
}
.brand-logo{width:128px;max-height:46px}
.nav-links{gap:23px}
.nav-links>a:not(.nav-cta){
  position:relative;
  padding:9px 0;
}
.nav-links>a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:4px;
  height:1px;
  background:currentColor;
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links>a:not(.nav-cta):hover::after,
.nav-links>a.active:not(.nav-cta)::after{right:0}
.nav-cta{
  border-radius:999px;
  padding:11px 16px !important;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
}
.header.scrolled .nav-cta{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

/* ---------- Shared hero art direction ---------- */
.hero,
.page-hero,
.about-hero,
.contact-hero,
.product-hero{
  min-height:clamp(700px,94svh,980px);
}
.hero-media img,
.page-hero-bg img,
.about-hero img,
.contact-hero-image img,
.product-hero-media img{
  transform:scale(1.02);
  filter:brightness(.48) saturate(.78) contrast(1.05);
}
.hero-overlay,
.page-hero-overlay,
.product-hero-overlay{
  background:
    linear-gradient(180deg,rgba(2,7,10,.18),transparent 34%),
    radial-gradient(circle at 72% 36%,rgba(16,150,220,.12),transparent 28%),
    linear-gradient(90deg,rgba(2,8,12,.88),rgba(2,8,12,.30) 55%,rgba(2,8,12,.18));
}
.hero-frame{
  inset:96px 18px 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  pointer-events:none;
}
.hero-content,
.page-hero-content,
.contact-hero-inner,
.product-hero-content{
  padding-top:170px;
}
.hero-title,
.page-hero h1,
.contact-hero h1,
.product-hero h1{
  text-wrap:balance;
  text-shadow:0 15px 45px rgba(0,0,0,.14);
}
.hero-title em,
.product-hero h1 em{
  color:#8fd7f8;
}
.hero-copy,
.page-hero-content>p:last-child,
.contact-hero .hero-intro,
.product-hero-copy{
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.85;
}
.hero-bottom{
  bottom:34px;
  padding:0 22px;
}

/* ---------- Buttons / links ---------- */
.btn,
.form-submit,
.service-view-btn,
.whatsapp-large{
  border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,background .35s ease,color .35s ease;
}
.btn-primary,
.form-submit{
  box-shadow:0 14px 32px rgba(8,123,193,.22);
}
.btn:hover,
.form-submit:hover,
.service-view-btn:hover,
.whatsapp-large:hover{transform:translateY(-3px)}
.btn-primary:hover,
.form-submit:hover{box-shadow:0 20px 42px rgba(8,123,193,.30)}
.text-link{
  position:relative;
  overflow:hidden;
}
.text-link::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:0;
  height:1px;
  background:var(--blue);
  transition:right .35s ease;
}
.text-link:hover::after{right:0}

/* ---------- Section rhythm ---------- */
.section,
.product-section,
.projects,
.contact-section,
.audience-section{
  padding-top:clamp(92px,9vw,138px);
  padding-bottom:clamp(92px,9vw,138px);
}
.section-heading,
.needs-intro,
.product-intro,
.about-intro-grid,
.service-intro-grid{
  position:relative;
}
.section-heading::before,
.needs-intro::before,
.product-intro::before{
  content:"";
  position:absolute;
  left:0;top:-28px;
  width:72px;height:2px;
  background:linear-gradient(90deg,var(--blue),transparent);
}
.section-heading h2,
.needs-intro h2,
.product-intro h2,
.service-detail-content h2,
.about-story-content h2{
  text-wrap:balance;
}

/* ---------- Homepage service cards ---------- */
.service-grid{gap:18px}
.service-card{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(11,17,21,.08);
  box-shadow:0 8px 24px rgba(5,24,34,.04);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(8,123,193,.18);
}
.service-image{overflow:hidden}
.service-image::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.14));
  pointer-events:none;
}
.service-image img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.service-card:hover .service-image img{transform:scale(1.045);filter:saturate(.92) contrast(1.02)}
.service-info{padding:23px 24px 25px}
.service-arrow{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  transition:.35s ease;
}
.service-card:hover .service-arrow{background:var(--blue);transform:rotate(10deg)}
.image-label{
  border-radius:999px;
  min-width:38px;
  padding:7px 10px;
  background:rgba(9,17,22,.42);
  backdrop-filter:blur(8px);
}

/* ---------- About strip / needs ---------- */
.about-strip{
  margin:0 18px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.about-image{min-height:620px}
.about-content{
  background:linear-gradient(145deg,#fff,#f4f7f8);
  padding-top:clamp(70px,8vw,115px);
  padding-bottom:clamp(70px,8vw,115px);
}
.needs-section{background:linear-gradient(180deg,var(--paper),#eaf0f2)}
.need-card{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 12px 34px rgba(5,24,34,.07);
}
.need-card img{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.need-card:hover img{transform:scale(1.055);filter:saturate(.92)}
.need-content{padding:28px}

/* ---------- Service page ---------- */
.service-detail{
  margin:18px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:680px;
  box-shadow:var(--shadow-soft);
}
.service-detail-content{background:linear-gradient(145deg,#fff,#f7f9f9)}
.service-detail-image img{filter:saturate(.86) contrast(1.02)}
.service-points li{font-size:12px}
.process-grid,.approach-grid,.spec-grid{gap:16px}
.process-card,.approach-card,.spec-card{
  border-radius:var(--radius-sm);
  border-color:rgba(11,17,21,.08);
  box-shadow:0 7px 22px rgba(5,24,34,.035);
}
.process-card:hover,.approach-card:hover,.spec-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-soft);
}
.service-feature,
.about-location,
.product-cta{
  margin:18px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-deep);
}

/* ---------- About page ---------- */
.about-story{
  margin:18px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.about-story-content{background:linear-gradient(145deg,#fff,#f5f8f8)}
.approach-section{background:linear-gradient(180deg,#eaf0f2,#f5f7f7)}
.audience-card{
  border-radius:var(--radius-md);
  border-color:rgba(11,17,21,.08);
  box-shadow:0 8px 26px rgba(5,24,34,.04);
}
.audience-card:hover{box-shadow:var(--shadow-soft)}

/* ---------- Realisations ---------- */
.projects{background:linear-gradient(180deg,#f4f7f7,#eef3f4)}
.project-grid{gap:18px}
.project-card{
  border-radius:var(--radius-md);
  border-color:rgba(11,17,21,.08);
  box-shadow:0 9px 28px rgba(5,24,34,.05);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.project-image::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.12));
  pointer-events:none;
}
.project-info{padding:24px 25px 27px}
.project-statement{
  border-radius:var(--radius-lg);
  margin:18px;
  overflow:hidden;
}

/* ---------- Product / gallery pages ---------- */
.product-section{background:var(--surface)}
.product-section:nth-of-type(even){background:#eef3f4}
.gallery-grid{gap:16px}
.gallery-item{
  border-radius:var(--radius-md);
  border:0;
  box-shadow:0 12px 34px rgba(5,24,34,.09);
}
.gallery-item img{filter:saturate(.9) contrast(1.02)}
.gallery-item::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.12));
  pointer-events:none;
}
.gallery-number{
  border-radius:999px;
  width:38px;height:38px;
  background:rgba(7,15,19,.38);
}

/* Desktop editorial pattern for galleries with more than four images */
@media(min-width:951px){
  .gallery-item:nth-child(5){grid-column:span 8;min-height:500px}
  .gallery-item:nth-child(6){grid-column:span 4;min-height:500px}
  .gallery-item:nth-child(7){grid-column:span 4;min-height:430px}
  .gallery-item:nth-child(8){grid-column:span 8;min-height:430px}
  .gallery-item:nth-child(9){grid-column:span 6;min-height:460px}
  .gallery-item:nth-child(10){grid-column:span 6;min-height:460px}
  .gallery-item:nth-child(11){grid-column:span 12;min-height:600px}
}
.video-layout{gap:54px}
.video-frame{
  min-height:560px;
  border:0;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-deep);
}
.video-frame video{min-height:560px;object-fit:cover}
.video-frame::after{
  content:"";
  position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  border-radius:inherit;
  pointer-events:none;
}
.video-placeholder{display:none !important}
.spec-section{background:#fff !important}

/* ---------- Contact ---------- */
.contact-section{background:linear-gradient(180deg,#f1f4f4,#e8eef0)}
.contact-layout{gap:70px}
.contact-image{
  height:280px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}
.contact-form{
  border-radius:var(--radius-md);
  border:1px solid rgba(11,17,21,.07);
  box-shadow:var(--shadow-soft);
}
.contact-list>a,.contact-list>div{transition:padding-left .3s ease}
.contact-list>a:hover{padding-left:8px}
.whatsapp-large{background:var(--ink)}

/* ---------- Footer / floating actions ---------- */
.footer{
  background:
    radial-gradient(circle at 85% 15%,rgba(8,123,193,.10),transparent 25rem),
    #081015;
}
.footer-main{padding-top:78px;padding-bottom:60px}
.whatsapp{
  border-radius:999px;
  box-shadow:0 14px 35px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}
.back-top{
  border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.13);
}

/* ---------- Motion refinements ---------- */
.reveal{
  transform:translateY(28px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
}

/* ---------- Tablet ---------- */
@media(max-width:950px){
  .header{padding:8px 12px 0}
  .nav{padding:0 15px;height:64px}
  .hero-frame{inset:86px 12px 12px}
  .service-detail,.about-story,.service-feature,.about-location,.product-cta,.project-statement{margin:12px}
  .about-strip{margin:0 12px}
  .service-detail{min-height:auto}
  .video-frame,.video-frame video{min-height:470px}
  .project-card-large,.project-card-wide{grid-column:auto}
}

/* ---------- Mobile ---------- */
@media(max-width:600px){
  .header{padding:7px 8px 0}
  .nav{height:60px;border-radius:15px;padding:0 13px}
  .brand-logo{width:138px;max-height:48px}
  .nav-links{
    top:72px;
    left:8px;
    right:8px;
    border-radius:20px;
    overflow:hidden;
    background:rgba(245,248,248,.97);
    box-shadow:0 24px 70px rgba(5,24,34,.20);
  }
  .hero,.page-hero,.about-hero,.contact-hero,.product-hero{min-height:82svh}
  .hero-frame{inset:76px 8px 8px;border-radius:20px}
  .hero-content,.page-hero-content,.contact-hero-inner,.product-hero-content{padding-top:125px}
  .hero-title,.page-hero h1,.contact-hero h1,.product-hero h1{font-size:clamp(49px,15vw,66px)}
  .hero-copy,.page-hero-content>p:last-child,.contact-hero .hero-intro,.product-hero-copy{font-size:13px;line-height:1.75}
  .service-grid,.project-grid,.needs-grid,.audience-grid{gap:12px}
  .service-card,.need-card,.project-card,.audience-card{border-radius:18px}
  .about-strip,.service-detail,.about-story,.service-feature,.about-location,.product-cta,.project-statement{margin:8px;border-radius:22px}
  .about-image{min-height:390px}
  .service-detail-content{padding:64px 24px}
  .section,.product-section,.projects,.contact-section,.audience-section{padding-top:78px;padding-bottom:78px}
  .gallery-grid{gap:10px}
  .gallery-item{border-radius:18px;box-shadow:0 8px 24px rgba(5,24,34,.08)}
  .gallery-item:nth-child(n){grid-column:1;min-height:340px}
  .gallery-item:nth-child(1){min-height:420px}
  .video-frame,.video-frame video{min-height:360px;border-radius:22px}
  .contact-form{padding:32px 22px;border-radius:20px}
  .contact-image{height:230px;border-radius:18px}
}

/* === NEW TINK HOME SERVICE EXPANSION === */
.service-card-new-6,.service-card-new-9{grid-column:span 5}
.service-card-new-7,.service-card-new-8{grid-column:span 7}
.service-card-new-10{grid-column:span 12}
.service-card-new-7 .service-image,.service-card-new-8 .service-image{height:330px}
.service-card-new-10 .service-image{height:390px}
.gallery-item-single{grid-column:1 / -1 !important;min-height:min(76vh,820px) !important}
.gallery-item-single img{object-position:center}
@media(max-width:950px){
  .service-card-new-6,.service-card-new-7,.service-card-new-8,.service-card-new-9{grid-column:span 6}
  .service-card-new-10{grid-column:span 12}
}
@media(max-width:600px){
  .service-card-new-6,.service-card-new-7,.service-card-new-8,.service-card-new-9,.service-card-new-10{grid-column:span 1}
  .service-card-new-6 .service-image,.service-card-new-7 .service-image,.service-card-new-8 .service-image,.service-card-new-9 .service-image,.service-card-new-10 .service-image{height:285px}
  .gallery-item-single{min-height:500px !important}
}

/* =========================================================
   CINEMATIC MOBILE / TABLET NAVIGATION
   One consistent menu from phones through tablets.
   ========================================================= */
@media (max-width:950px){
  body.menu-open{overflow:hidden}

  .header{
    z-index:3000;
    padding:10px 14px 0;
  }

  .nav{
    position:relative;
    z-index:3002;
    height:66px;
    padding:0 14px 0 18px;
    border-radius:20px;
    background:rgba(239,244,245,.90);
    border:1px solid rgba(255,255,255,.60);
    box-shadow:0 14px 45px rgba(2,10,15,.16);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
  }

  .header.scrolled .nav{
    background:rgba(239,244,245,.94);
  }

  .brand-logo{
    width:132px;
    max-height:46px;
  }

  .menu-toggle{
    display:grid;
    place-items:center;
    position:relative;
    z-index:3004;
    width:46px;
    height:46px;
    padding:0;
    margin-left:auto;
    border:1px solid rgba(5,95,150,.16);
    border-radius:14px;
    background:rgba(255,255,255,.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  }

  .menu-toggle span{
    position:absolute;
    width:22px;
    height:1.5px;
    margin:0;
    background:#14303f !important;
    border-radius:20px;
    transition:transform .4s cubic-bezier(.22,.8,.24,1), top .35s ease, opacity .25s ease;
  }
  .menu-toggle span:first-child{top:19px}
  .menu-toggle span:last-child{top:26px}
  .menu-toggle[aria-expanded="true"] span:first-child{
    top:22.5px;
    transform:rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child{
    top:22.5px;
    transform:rotate(-45deg);
  }

  .nav-links{
    position:fixed !important;
    inset:0 !important;
    z-index:3001 !important;
    width:100vw;
    height:100dvh;
    padding:clamp(130px,18vh,175px) clamp(26px,7vw,74px) 34px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:0 !important;
    overflow-y:auto !important;
    border-radius:0 !important;
    background:
      radial-gradient(circle at 84% 15%,rgba(68,181,235,.18),transparent 24rem),
      linear-gradient(145deg,rgba(5,15,21,.98),rgba(9,28,39,.97) 58%,rgba(4,15,21,.99)) !important;
    -webkit-backdrop-filter:blur(22px) saturate(120%);
    backdrop-filter:blur(22px) saturate(120%);
    box-shadow:none !important;
    transform:translateY(-104%) !important;
    opacity:0;
    visibility:hidden;
    transition:
      transform .62s cubic-bezier(.2,.78,.2,1),
      opacity .36s ease,
      visibility 0s linear .62s;
  }

  .nav-links::before{
    content:"TINK HOME";
    position:absolute;
    left:clamp(26px,7vw,74px);
    top:112px;
    font:700 10px/1 Manrope,sans-serif;
    letter-spacing:.28em;
    color:rgba(255,255,255,.38);
  }

  .nav-links::after{
    content:"AGADIR · MAROC";
    position:absolute;
    left:clamp(26px,7vw,74px);
    bottom:30px;
    font:600 9px/1 Manrope,sans-serif;
    letter-spacing:.22em;
    color:rgba(255,255,255,.28);
  }

  .nav-links.open{
    transform:translateY(0) !important;
    opacity:1;
    visibility:visible;
    transition:
      transform .62s cubic-bezier(.2,.78,.2,1),
      opacity .36s ease,
      visibility 0s;
  }

  .nav-links > a{
    position:relative;
    width:100% !important;
    padding:clamp(13px,2.2vh,21px) 0 !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff !important;
    opacity:0;
    transform:translateY(22px);
    font-family:Manrope,sans-serif;
    font-size:clamp(27px,5.8vw,52px) !important;
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.045em !important;
    transition:
      opacity .4s ease,
      transform .5s cubic-bezier(.2,.75,.2,1),
      color .25s ease,
      padding-left .3s ease;
  }

  .nav-links.open > a{
    opacity:1;
    transform:translateY(0);
  }
  .nav-links.open > a:nth-child(1){transition-delay:.16s}
  .nav-links.open > a:nth-child(2){transition-delay:.21s}
  .nav-links.open > a:nth-child(3){transition-delay:.26s}
  .nav-links.open > a:nth-child(4){transition-delay:.31s}
  .nav-links.open > a:nth-child(5){transition-delay:.36s}

  .nav-links > a:not(.nav-cta)::after{
    content:"↗" !important;
    position:absolute !important;
    left:auto !important;
    right:3px !important;
    top:50% !important;
    bottom:auto !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    color:var(--blue-light) !important;
    font-size:.52em;
    transform:translateY(-50%) !important;
    opacity:.48;
  }

  .nav-links > a:hover,
  .nav-links > a.active{
    color:#bfe8fb !important;
    padding-left:10px !important;
  }

  .nav-links .nav-cta{
    margin-top:22px !important;
    width:auto !important;
    min-width:min(100%,310px);
    padding:16px 20px !important;
    border:1px solid rgba(191,232,251,.32) !important;
    border-radius:999px !important;
    background:rgba(104,196,239,.10) !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.02em !important;
  }
  .nav-links .nav-cta:hover{
    padding-left:22px !important;
    background:rgba(104,196,239,.18) !important;
  }
  .nav-links .nav-cta span{color:#8bdcff}
}

@media (max-width:600px){
  .header{padding:8px 8px 0}
  .nav{height:60px;border-radius:17px;padding:0 10px 0 14px}
  .brand-logo{width:126px;max-height:43px}
  .menu-toggle{width:42px;height:42px;border-radius:12px}
  .menu-toggle span:first-child{top:17px}
  .menu-toggle span:last-child{top:24px}
  .menu-toggle[aria-expanded="true"] span:first-child,
  .menu-toggle[aria-expanded="true"] span:last-child{top:20.5px}
  .nav-links{
    padding:120px 22px 30px !important;
    justify-content:flex-start !important;
  }
  .nav-links::before{left:22px;top:96px}
  .nav-links::after{left:22px;bottom:22px}
  .nav-links > a{font-size:clamp(29px,10vw,44px) !important}
}

/* === Séparations & claustras === */
.service-card-new-11{grid-column:span 12}
.service-card-new-11 .service-image{height:410px}
@media(max-width:950px){.service-card-new-11{grid-column:span 12}}
@media(max-width:600px){.service-card-new-11{grid-column:span 1}.service-card-new-11 .service-image{height:300px}}

/* === Bureaux & coiffeuses === */
.service-card-new-12{grid-column:span 12}
.service-card-new-12 .service-image{height:390px}

.office-placeholder{
  position:relative;
  width:100%;
  height:100%;
  min-height:320px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(116,202,241,.22),transparent 28%),
    linear-gradient(135deg,#071017 0%,#0d1b23 48%,#172a34 100%);
  color:#fff;
}
.office-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.035) 9% 9.2%,transparent 9.2% 100%),
    linear-gradient(0deg,transparent 0 16%,rgba(255,255,255,.025) 16% 16.2%,transparent 16.2% 100%);
  background-size:120px 120px,120px 120px;
  opacity:.8;
}
.office-placeholder::after{
  content:"";
  position:absolute;
  width:min(46vw,520px);
  height:min(46vw,520px);
  border:1px solid rgba(137,218,255,.16);
  border-radius:50%;
  right:-8%;
  top:-35%;
}
.placeholder-mark{
  position:absolute;
  z-index:2;
  left:clamp(26px,4vw,60px);
  bottom:clamp(28px,4vw,58px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.placeholder-mark span{
  font-size:12px;
  letter-spacing:.18em;
  color:#84d7fb;
}
.placeholder-mark strong{
  font-family:Manrope,sans-serif;
  font-size:clamp(34px,5vw,74px);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:500;
}
.placeholder-mark small{
  padding-top:5px;
  font-size:10px;
  letter-spacing:.17em;
  opacity:.52;
}
.service-detail-placeholder{min-height:620px}
.product-hero-placeholder{min-height:100vh}
.gallery-placeholder{min-height:680px!important}
.gallery-placeholder .office-placeholder{min-height:680px}
.office-placeholder-cta{min-height:520px}

@media(max-width:950px){
  .service-card-new-12{grid-column:span 12}
  .service-detail-placeholder{min-height:500px}
}
@media(max-width:600px){
  .service-card-new-12{grid-column:span 1}
  .service-card-new-12 .service-image{height:300px}
  .service-detail-placeholder{min-height:380px}
  .product-hero-placeholder{min-height:100vh}
  .gallery-placeholder,.gallery-placeholder .office-placeholder{min-height:500px!important}
  .placeholder-mark strong{font-size:clamp(32px,11vw,48px)}
}