@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --black:#070707;
  --ink:#111;
  --paper:#f2f0ea;
  --paper-dark:#e9e7e0;
  --white:#fff;
  --muted:#8f8f8a;
  --muted-light:#aaa9a3;
  --lime:#d8ff3f;
  --lime-dark:#5e6c0e;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.2);
  --darkline:rgba(0,0,0,.12);
  --max:1280px;
  --radius:28px;
  --ease:cubic-bezier(.2,.8,.2,1);
}


/* ------------------------------
   RESET
------------------------------ */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Manrope,Arial,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.lock{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

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

::selection{
  background:var(--lime);
  color:var(--black);
}

.wrap{
  width:min(calc(100% - 48px),var(--max));
  margin:auto;
}


/* ------------------------------
   NAVIGATION
------------------------------ */

.nav{
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  top:0;
  padding:20px 0;
  transition:
    background .35s var(--ease),
    backdrop-filter .35s var(--ease),
    border-color .35s var(--ease),
    padding .35s var(--ease);
}

.nav.is-scrolled{
  background:rgba(7,7,7,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:15px 0;
}

.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}


/* ------------------------------
   LOGO
------------------------------ */

.brand{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}

.brand img{
  display:block !important;
  width:150px !important;
  max-width:150px !important;
  height:auto !important;
  object-fit:contain;
}


/* ------------------------------
   NAV MENU
------------------------------ */

.nav-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:27px;
}

.nav-menu a{
  position:relative;
  font-size:.82rem;
  font-weight:600;
  color:#c8c7c1;
  transition:color .25s var(--ease);
}

.nav-menu a:not(.btn):after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}

.nav-menu a:not(.btn):hover{
  color:var(--white);
}

.nav-menu a:not(.btn):hover:after{
  transform:scaleX(1);
  transform-origin:left;
}

.menu-btn{
  display:none;
  border:0;
  background:none;
  color:var(--white);
  font-size:1.5rem;
  line-height:1;
  padding:8px;
}


/* ------------------------------
   SERVICES DROPDOWN
------------------------------ */

.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
}

.nav-dropdown-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0;
  margin:0;
  border:0;
  outline:0;
  background:transparent;
  color:#c8c7c1;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  line-height:1.55;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:color .25s var(--ease);
}

.nav-dropdown-toggle:hover{
  color:var(--white);
}

.nav-dropdown-toggle:after{
  content:"";
  position:absolute;
  left:0;
  right:20px;
  bottom:-7px;
  height:1px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}

.nav-dropdown-toggle:hover:after,
.nav-dropdown.open .nav-dropdown-toggle:after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav-chevron{
  display:inline-block;
  font-size:.85rem;
  line-height:1;
  color:var(--lime);
  transition:transform .25s var(--ease);
}

.nav-dropdown.open .nav-chevron{
  transform:rotate(180deg);
}


/* ------------------------------
   DROPDOWN PANEL
------------------------------ */

.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  width:620px;
  padding:12px;

  background:rgba(10,10,10,.98);
  border:1px solid var(--line);
  border-radius:22px;

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

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translate(-50%,10px);

  z-index:110;

  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease),
    visibility .25s var(--ease);
}


/* Invisible hover bridge between navigation and panel */

.nav-dropdown::before{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:100%;
  height:14px;
  transform:translateX(-50%);
  background:transparent;
  z-index:109;
}


/* Dropdown open state */

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}


/* ------------------------------
   ALL SERVICES
------------------------------ */

.nav-dropdown-featured{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:18px 20px;

  border:1px solid rgba(216,255,63,.18);
  border-radius:16px;

  background:rgba(216,255,63,.05);

  color:var(--white) !important;

  transition:
    background .25s var(--ease),
    border-color .25s var(--ease);
}

.nav-dropdown-featured:hover{
  background:rgba(216,255,63,.1);
  border-color:rgba(216,255,63,.35);
}

.nav-dropdown-featured:after{
  display:none !important;
}

.nav-dropdown-featured strong{
  display:block;
  font-size:.9rem;
  font-weight:800;
  color:var(--white);
}

.nav-dropdown-featured small{
  display:block;
  margin-top:3px;
  font-size:.7rem;
  font-weight:500;
  color:#888;
}

.nav-dropdown-arrow{
  color:var(--lime);
  font-size:1.1rem;
  line-height:1;
}


/* ------------------------------
   SERVICE GRID
------------------------------ */

.nav-dropdown-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  margin-top:8px;
}

.nav-dropdown-grid a{
  display:flex !important;
  align-items:center;
  gap:13px;
  min-height:48px;
  padding:11px 12px;
  border-radius:11px;

  color:#b9b8b2 !important;
  font-size:.78rem !important;
  font-weight:600 !important;

  transition:
    background .2s var(--ease),
    color .2s var(--ease);
}

.nav-dropdown-grid a:after{
  display:none !important;
}

.nav-dropdown-grid a:hover{
  background:rgba(255,255,255,.055);
  color:var(--white) !important;
}

.nav-dropdown-grid a span{
  display:inline-flex;
  align-items:center;
  min-width:24px;

  font-family:"DM Mono",monospace;
  font-size:.58rem;
  color:#666;
}

.nav-dropdown-grid a:hover span{
  color:var(--lime);
}


/* ------------------------------
   BUTTONS
------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 21px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.84rem;
  font-weight:800;
  white-space:nowrap;

  transition:
    transform .25s var(--ease),
    background .25s var(--ease),
    border-color .25s var(--ease),
    color .25s var(--ease);
}

.btn:hover{
  transform:translateY(-3px);
}

.btn-primary{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--black);
}

.btn-primary:hover{
  background:#e3ff65;
  border-color:#e3ff65;
}

.btn-light{
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
}

.btn-light:hover{
  background:#e9e9e9;
  border-color:#e9e9e9;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}


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

.eyebrow{
  font-family:"DM Mono",monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--lime);
  display:flex;
  gap:9px;
  align-items:center;
}

.eyebrow:before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--lime);
}

.kicker{
  font-family:"DM Mono",monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--lime);
  margin-bottom:17px;
}

.paper .kicker{
  color:var(--lime-dark);
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h2{
  font-size:clamp(2.8rem,6vw,6.4rem);
  line-height:.9;
  letter-spacing:-.075em;
  margin:0;
  max-width:900px;
}

.lead{
  max-width:560px;
  color:#77756f;
}

.dark .lead,
.section-dark .lead{
  color:#999;
}

.paper .lead{
  color:#6e6d68;
}


/* ------------------------------
   HERO
------------------------------ */

.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  position:relative;
  padding:150px 0 80px;
  overflow:hidden;
}

.hero-grid{
  position:absolute;
  inset:0;

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

  background-size:80px 80px;

  mask-image:linear-gradient(to bottom,#000,transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);

  pointer-events:none;
}

.hero-orb{
  position:absolute;
  width:760px;
  height:760px;
  border-radius:50%;
  right:-280px;
  top:5%;

  background:radial-gradient(
    circle,
    rgba(216,255,63,.13),
    transparent 63%
  );

  filter:blur(2px);
  pointer-events:none;
}

.hero h1{
  position:relative;
  z-index:2;

  font-size:clamp(4rem,9vw,9.5rem);
  line-height:.84;
  letter-spacing:-.085em;

  max-width:1100px;
  margin:24px 0 34px;
}

.hero h1 em{
  font-style:normal;
  color:var(--lime);
}

.hero-copy{
  position:relative;
  z-index:2;

  max-width:670px;
  color:var(--muted-light);

  font-size:clamp(1rem,1.6vw,1.25rem);
}


/* ------------------------------
   PAGE HERO
------------------------------ */

.page-hero{
  padding:180px 0 100px;
  border-bottom:1px solid var(--line);
}

.page-hero h1{
  font-size:clamp(4rem,9vw,9rem);
  line-height:.86;
  letter-spacing:-.08em;
  max-width:1050px;
  margin:25px 0;
}

.page-hero p{
  max-width:700px;
  color:#a3a29c;
  font-size:1.15rem;
}


/* ------------------------------
   TICKER
------------------------------ */

.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}

.ticker-track{
  display:flex;
  width:max-content;
  gap:45px;
  padding:17px 0;

  font-family:"DM Mono",monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#aaa;

  animation:ticker-scroll 24s linear infinite;
  will-change:transform;
}

.ticker-track span{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}

.ticker-track span:not(:last-child)::after{
  content:"•";
  margin-left:45px;
  color:var(--lime);
}

@keyframes ticker-scroll{

  from{
    transform:translateX(0);
  }

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

}

.ticker:hover .ticker-track{
  animation-play-state:paused;
}

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

  .ticker-track{
    animation:none;
  }

}


/* ------------------------------
   SECTIONS
------------------------------ */

section{
  padding:125px 0;
}

.paper{
  background:var(--paper);
  color:#080808;
}

.dark,
.section-dark{
  background:var(--black);
  color:var(--white);
}

.section-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin-bottom:55px;
}

.section-top > p{
  max-width:560px;
  color:#77756f;
  margin:0;
}

.section-dark .section-top > p{
  color:#999;
}


/* ------------------------------
   CARDS
------------------------------ */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.card{
  position:relative;

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

  padding:30px;
  min-height:350px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  background:linear-gradient(145deg,#131313,#0b0b0b);

  overflow:hidden;

  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    background .35s var(--ease);
}

.card:before{
  content:"";

  position:absolute;

  width:220px;
  height:220px;

  right:-120px;
  top:-120px;

  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(216,255,63,.1),
    transparent 70%
  );

  pointer-events:none;

  transition:transform .5s var(--ease);
}

.card:hover{
  transform:translateY(-7px);
  border-color:rgba(216,255,63,.32);
}

.card:hover:before{
  transform:scale(1.5);
}

.paper .card{
  border-color:var(--darkline);
  background:var(--paper-dark);
}

.paper .card:hover{
  border-color:rgba(0,0,0,.28);
}

.card-num{
  position:relative;
  z-index:2;

  font-family:"DM Mono",monospace;
  font-size:.68rem;
  color:var(--muted);
}

.card h3{
  position:relative;
  z-index:2;

  font-size:2rem;
  line-height:1;
  letter-spacing:-.05em;

  margin:0 0 13px;
}

.card p{
  position:relative;
  z-index:2;

  color:var(--muted);
  margin:0;
}

.paper .card p{
  color:#77756f;
}

.card-arrow{
  position:relative;
  z-index:2;

  font-size:1.4rem;
  color:var(--lime);
}

.paper .card-arrow{
  color:#080808;
}


/* ------------------------------
   CASE STUDIES / WORK
------------------------------ */

.case-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:16px;
}

.case{
  min-height:500px;

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

  position:relative;
  overflow:hidden;

  padding:30px;

  display:flex;
  align-items:flex-end;

  background:#131313;
}

.case.small{
  min-height:500px;
}

.case:before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 72% 25%,
      rgba(216,255,63,.22),
      transparent 30%
    ),
    linear-gradient(135deg,#1d1d1d,#080808);
}

.case:after{
  content:"";

  position:absolute;

  width:65%;
  height:55%;

  right:-12%;
  top:10%;

  border:1px solid rgba(216,255,63,.22);

  transform:rotate(-10deg);

  border-radius:30px;
}

.case-content{
  position:relative;
  z-index:2;
}

.case small{
  font-family:"DM Mono",monospace;
  color:var(--lime);
  font-size:.65rem;
  text-transform:uppercase;
}

.case h3{
  font-size:clamp(2.2rem,5vw,5.3rem);
  line-height:.88;
  letter-spacing:-.07em;
  margin:12px 0;
}


/* ------------------------------
   PROCESS
------------------------------ */

.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--darkline);
}

.step{
  padding:34px 28px;

  border-right:1px solid var(--darkline);
  border-bottom:1px solid var(--darkline);
}

.step:nth-child(3n){
  border-right:0;
}

.step-num{
  font-family:"DM Mono",monospace;
  font-size:.68rem;
}

.step h3{
  font-size:1.6rem;
  margin:45px 0 8px;
  letter-spacing:-.04em;
}

.step p{
  color:#777;
  margin-bottom:0;
}


/* ------------------------------
   SPLIT CONTENT
------------------------------ */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.statement{
  font-size:clamp(2.3rem,4.5vw,5rem);
  line-height:.95;
  letter-spacing:-.065em;
}

.lines{
  border-top:1px solid var(--line);
}

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

  gap:20px;
  padding:21px 0;

  border-bottom:1px solid var(--line);

  font-size:.95rem;

  transition:padding-left .25s var(--ease);
}

.line:hover{
  padding-left:8px;
}

.line span:first-child{
  font-weight:600;
}

.line span:last-child{
  color:var(--muted);

  font-family:"DM Mono",monospace;
  font-size:.72rem;

  text-transform:uppercase;
  letter-spacing:.05em;
}


/* ------------------------------
   QUOTE
------------------------------ */

.quote{
  font-size:clamp(2rem,4vw,4.2rem);
  line-height:1;
  letter-spacing:-.06em;
  max-width:1000px;
}

.quote-mark{
  font-size:4rem;
  line-height:1;
  color:var(--lime);
}


/* ------------------------------
   CTA
------------------------------ */

.cta{
  padding:70px;
  border-radius:34px;

  background:var(--lime);
  color:#080808;
}

.cta h2{
  max-width:900px;
}

.cta p{
  max-width:650px;
  color:#39420f;
  margin-bottom:0;
}


/* ------------------------------
   FORMS
------------------------------ */

.form-wrap{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px;
}

.form{
  max-width:800px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#888;
}

.field input,
.field select,
.field textarea{
  width:100%;

  background:#111;

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

  color:#fff;

  border-radius:14px;

  padding:16px;

  outline:none;

  transition:
    border-color .25s var(--ease),
    background .25s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder{
  color:#626262;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--lime);
  background:#141414;
}

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

.status{
  color:var(--lime);
  margin-top:15px;
}


/* ------------------------------
   FOOTER
------------------------------ */

footer{
  padding:65px 0 30px;
  border-top:1px solid var(--line);
}

.footer-top{
  display:flex;
  justify-content:space-between;
  gap:60px;
  margin-bottom:90px;
}

.footer-top > div:first-child{
  flex:0 1 500px;
}

.footer-top .lead{
  margin-top:24px;
  margin-bottom:0;
  color:#999;
}

.footer-nav{
  display:flex;
  flex-wrap:wrap;

  justify-content:flex-end;
  align-content:flex-start;

  gap:16px 24px;

  max-width:650px;

  color:#999;
  font-size:.82rem;
}

.footer-nav a{
  transition:color .25s var(--ease);
}

.footer-nav a:hover{
  color:var(--lime);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;

  color:#666;
  font-size:.7rem;
}


/* ------------------------------
   REVEAL ANIMATION
------------------------------ */

.reveal{
  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

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


/* ------------------------------
   FOCUS ACCESSIBILITY
------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:4px;
}


/* ------------------------------
   PRICING
------------------------------ */

.pricing-card{
  position:relative;
}

.pricing-card h3{
  font-size:clamp(2.2rem,4vw,3.8rem);
  line-height:.95;
  letter-spacing:-.06em;
}

.pricing-card .price{
  font-size:clamp(2.5rem,5vw,5rem);
  font-weight:800;

  line-height:.9;
  letter-spacing:-.07em;

  margin-bottom:20px;
}

.pricing-card .price-label{
  font-family:"DM Mono",monospace;

  font-size:.68rem;

  text-transform:uppercase;
  letter-spacing:.1em;

  color:var(--muted);
}

.pricing-card .card-arrow{
  text-decoration:none;
  font-weight:700;
}

.pricing-card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,255,63,.4);
}


/* ------------------------------
   PROJECT DETAILS
------------------------------ */

.lines .line{
  transition:padding-left .25s var(--ease);
}

.lines .line:hover{
  padding-left:8px;
}

.lines .line span:first-child{
  font-weight:600;
}

.lines .line span:last-child{
  font-family:"DM Mono",monospace;

  font-size:.72rem;

  text-transform:uppercase;
  letter-spacing:.05em;
}


/* ------------------------------
   COMING SOON
------------------------------ */

.coming-soon{
  position:relative;
  overflow:hidden;
}

.coming-soon::after{
  content:"COMING SOON";

  position:absolute;

  right:-45px;
  top:45px;

  font-family:"DM Mono",monospace;

  font-size:.65rem;

  letter-spacing:.15em;

  transform:rotate(90deg);

  color:rgba(0,0,0,.35);
}


/* ------------------------------
   SERVICES PAGE
------------------------------ */

.services-intro{
  max-width:760px;
}

.services-intro p{
  color:#999;
  font-size:1.08rem;
  max-width:700px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.service-card{
  position:relative;

  min-height:390px;

  padding:30px;

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

  background:linear-gradient(145deg,#131313,#0b0b0b);

  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease);
}

.service-card::before{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  right:-150px;
  top:-150px;

  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(216,255,63,.12),
    transparent 70%
  );

  pointer-events:none;

  transition:transform .5s var(--ease);
}

.service-card:hover{
  transform:translateY(-7px);
  border-color:rgba(216,255,63,.35);
}

.service-card:hover::before{
  transform:scale(1.35);
}

.service-card-top{
  position:relative;
  z-index:2;

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

  gap:20px;
}

.service-number{
  font-family:"DM Mono",monospace;
  font-size:.65rem;
  color:#666;
}

.service-label{
  font-family:"DM Mono",monospace;

  font-size:.62rem;

  text-transform:uppercase;
  letter-spacing:.1em;

  color:var(--lime);
}

.service-card-content{
  position:relative;
  z-index:2;
}

.service-card h3{
  font-size:clamp(2rem,3vw,3rem);

  line-height:.95;
  letter-spacing:-.06em;

  margin:0 0 16px;
}

.service-card p{
  color:#858580;
  max-width:360px;
  margin:0;
}

.service-card-link{
  position:relative;
  z-index:2;

  display:inline-flex;
  align-items:center;

  gap:10px;

  color:var(--lime);

  font-family:"DM Mono",monospace;

  font-size:.68rem;

  text-transform:uppercase;
  letter-spacing:.08em;

  transition:gap .25s var(--ease);
}

.service-card:hover .service-card-link{
  gap:16px;
}


/* ------------------------------
   SERVICES STATEMENT
------------------------------ */

.services-statement{
  max-width:1050px;

  font-size:clamp(2.8rem,6vw,6.5rem);

  line-height:.9;

  letter-spacing:-.075em;
}

.services-statement em{
  font-style:normal;
  color:var(--lime);
}


/* ------------------------------
   RESPONSIVE
------------------------------ */

@media(max-width:1050px){

  .nav-menu{
    gap:18px;
  }

  .nav-menu a,
  .nav-dropdown-toggle{
    font-size:.76rem;
  }

  .nav-menu .btn{
    padding:12px 16px;
  }

  .footer-top{
    gap:40px;
  }

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

}


/* =======================================================
   MOBILE
   ======================================================= */

@media(max-width:850px){

  .ticker-track{
    gap:30px;
    animation-duration:20s;
  }

  .ticker-track span:not(:last-child)::after{
    margin-left:30px;
  }

  .pricing-card .price{
    font-size:3rem;
  }

  .lines .line{
    align-items:flex-start;
  }

  .lines .line span:last-child{
    text-align:right;
  }

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


  /* =======================================================
     MOBILE HAMBURGER
     ======================================================= */

  .menu-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    position:relative;
    z-index:1001;
  }

  .nav-menu{
    position:fixed !important;

    top:73px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:calc(100svh - 73px) !important;

    display:none !important;

    padding:25px 24px 35px !important;
    margin:0 !important;

    background:rgba(7,7,7,.98) !important;
    border-top:1px solid var(--line);

    overflow-x:hidden !important;
    overflow-y:auto !important;

    box-sizing:border-box !important;

    z-index:1000 !important;
  }

  .nav-menu.open{
    display:block !important;
  }


  /* Main navigation links */

  .nav-menu > a{
    display:flex !important;
    align-items:center;

    width:100% !important;
    min-height:54px;

    margin:0 !important;
    padding:10px 0 !important;

    box-sizing:border-box;

    font-size:1.15rem;
    color:#d5d4cf !important;
  }

  .nav-menu > a:not(.btn)::after{
    display:none !important;
  }


  /* =======================================================
     SERVICES MOBILE DROPDOWN
     ======================================================= */

  .nav-menu .nav-dropdown{
    position:relative !important;

    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .nav-menu .nav-dropdown::before{
    display:none !important;
  }


  /* Services button */

  .nav-menu .nav-dropdown-toggle{
    position:relative !important;

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

    width:100% !important;
    min-height:54px !important;

    margin:0 !important;
    padding:10px 0 !important;

    box-sizing:border-box !important;

    font-size:1.15rem !important;
    color:#d5d4cf !important;

    background:transparent !important;
    border:0 !important;
  }

  .nav-menu .nav-dropdown-toggle::after{
    display:none !important;
  }


  /* =======================================================
     SERVICES PANEL
     
     IMPORTANT:
     This completely overrides the desktop absolute
     positioning and desktop transform.
     ======================================================= */

  .nav-menu .nav-dropdown-menu,
  .nav-menu .nav-dropdown:hover .nav-dropdown-menu,
  .nav-menu .nav-dropdown.open .nav-dropdown-menu,
  .nav-menu .nav-dropdown.open:hover .nav-dropdown-menu{

    position:static !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 0 10px !important;

    box-sizing:border-box !important;

    transform:none !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    z-index:auto !important;
  }


  /* CLOSED — no dropdown visible */

  .nav-menu .nav-dropdown:not(.open) .nav-dropdown-menu,
  .nav-menu .nav-dropdown:hover:not(.open) .nav-dropdown-menu{
    display:none !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;

    transform:none !important;
  }


  /* OPEN — dropdown becomes normal page content */

  .nav-menu .nav-dropdown.open > .nav-dropdown-menu,
  .nav-menu .nav-dropdown.open:hover > .nav-dropdown-menu{

    display:block !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    transform:none !important;
  }


  /* =======================================================
     ALL SERVICES
     ======================================================= */

  .nav-menu .nav-dropdown-featured{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    max-width:100% !important;

    min-height:0 !important;

    margin:0 !important;
    padding:15px 16px !important;

    box-sizing:border-box !important;

    border-radius:14px !important;
  }


  /* =======================================================
     SERVICE LINKS
     ONE VERTICAL COLUMN
     ======================================================= */

  .nav-menu .nav-dropdown-grid{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    margin:6px 0 0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
  }

  .nav-menu .nav-dropdown-grid > a{

    display:flex !important;
    align-items:center !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:44px !important;

    margin:0 !important;
    padding:9px 12px !important;

    box-sizing:border-box !important;

    font-size:.9rem !important;
  }


  /* =======================================================
     MAIN NAV LINKS AFTER SERVICES
     ======================================================= */

  .nav-menu > a:not(.btn){
    display:flex !important;

    width:100% !important;
    min-height:54px !important;

    margin:0 !important;
    padding:10px 0 !important;

    box-sizing:border-box !important;

    position:static !important;

    color:#d5d4cf !important;
    -webkit-text-fill-color:#d5d4cf !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  .nav-menu > a:not(.btn):hover,
  .nav-menu > a:not(.btn):focus-visible{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }


  /* =======================================================
     START A PROJECT
     ======================================================= */

  .nav-menu > a.btn.btn-primary{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin:22px 0 0 !important;
    padding:14px 21px !important;

    box-sizing:border-box !important;

    color:#070707 !important;
    -webkit-text-fill-color:#070707 !important;

    opacity:1 !important;
  }


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

  .hero{
    min-height:100svh;
    padding:135px 0 70px;
  }

  .hero h1{
    font-size:clamp(3.5rem,16vw,6rem);
  }

  .hero-orb{
    width:600px;
    height:600px;
    right:-400px;
    top:10%;
  }


  /* =======================================================
     SECTIONS
     ======================================================= */

  section{
    padding:90px 0;
  }

  .section-top{
    display:block;
    margin-bottom:40px;
  }

  .section-top > p{
    margin-top:25px;
  }


  /* =======================================================
     GRIDS
     ======================================================= */

  .cards,
  .case-grid,
  .split,
  .form-wrap{
    grid-template-columns:1fr;
  }

  .case,
  .case.small{
    min-height:430px;
  }

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

  .step{
    border-right:0;
  }

  .step:last-child{
    border-bottom:1px solid var(--darkline);
  }


  /* =======================================================
     PAGE HERO
     ======================================================= */

  .page-hero{
    padding:145px 0 80px;
  }

  .page-hero h1{
    font-size:clamp(3.5rem,15vw,6.5rem);
  }


  /* =======================================================
     SERVICES
     ======================================================= */

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

  .service-card{
    min-height:340px;
  }


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

  .cta{
    padding:40px 26px;
    border-radius:26px;
  }


  /* =======================================================
     FORMS
     ======================================================= */

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

  .field.full{
    grid-column:auto;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .footer-top{
    display:block;
    margin-bottom:60px;
  }

  .footer-nav{
    margin-top:30px;
    justify-content:flex-start;
    max-width:none;
  }

  .footer-bottom{
    display:block;
  }

  .footer-bottom span{
    display:block;
    margin-top:14px;
  }

}


/* =======================================================
   SMALL MOBILE
   ======================================================= */

@media(max-width:520px){

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

  .nav{
    padding:17px 0;
  }

  .nav.is-scrolled{
    padding:13px 0;
  }

  .brand img{
    width:120px !important;
    max-width:120px !important;
    height:auto !important;
  }

  .hero{
    padding-top:125px;
  }

  .hero h1{
    font-size:clamp(3.2rem,17vw,5.5rem);
    margin-top:20px;
  }

  .hero-copy{
    font-size:1rem;
  }

  .page-hero{
    padding-top:130px;
    padding-bottom:70px;
  }

  .page-hero h1{
    font-size:clamp(3.2rem,16vw,5.5rem);
  }

  .page-hero p{
    font-size:1rem;
  }

  h2{
    font-size:clamp(2.7rem,13vw,4.5rem);
  }

  .statement{
    font-size:clamp(2.2rem,11vw,4rem);
  }

  .card{
    min-height:300px;
    padding:25px;
  }

  .card h3{
    font-size:1.8rem;
  }

  .case,
  .case.small{
    min-height:360px;
    padding:25px;
  }

  .service-card{
    min-height:310px;
    padding:25px;
  }

  .cta{
    padding:34px 22px;
  }

  .btn{
    width:auto;
  }

  .actions{
    align-items:flex-start;
  }

  .ticker-track{
    animation-duration:24s;
  }

}


/* ------------------------------
   REDUCED MOTION
------------------------------ */

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

  html{
    scroll-behavior:auto;
  }

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

  .ticker-track{
    animation:none;
  }

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

}


/* =========================================================
   FIX — SERVICES TICKER HEIGHT
   ========================================================= */

section.ticker{
  height:82px !important;
  min-height:82px !important;
  padding:0 !important;
  margin:0 !important;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.ticker-window{
  width:100%;
  height:82px;
  overflow:hidden;
}

.ticker-track{
  height:82px;
  min-height:82px;
  padding:0 40px !important;
  display:flex;
  align-items:center;
}


/* =========================================================
   WEBEEA — START A PROJECT TEXT COLOUR
   ========================================================= */

.nav .nav-menu a.btn.btn-primary,
.nav .nav-menu > a.btn.btn-primary,
.nav .nav-menu a.btn.btn-primary:visited,
.nav .nav-menu a.btn.btn-primary:hover,
.nav .nav-menu > a.btn.btn-primary:hover{
  color:#070707 !important;
  -webkit-text-fill-color:#070707 !important;
  text-shadow:none !important;
  opacity:1 !important;
}


/* =========================================================
   DESKTOP — ORIGINAL NAVIGATION BEHAVIOUR
   ========================================================= */

@media (min-width:851px){

  .menu-btn{
    display:none !important;
  }

  .nav-menu{
    display:flex !important;
    position:static !important;
  }

}
/* =========================================================
   WEBEEA — MOBILE SERVICES CONTENT ALIGNMENT
   ========================================================= */

@media screen and (max-width:850px) {

    .nav-menu .nav-dropdown-menu {
        overflow: visible !important;
    }

    .nav-menu .nav-dropdown-featured {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        position: relative !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 15px 16px !important;
        margin: 0 !important;

        transform: none !important;
        translate: none !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .nav-menu .nav-dropdown-featured > span:first-child {
        display: block !important;

        position: relative !important;
        left: 0 !important;

        width: auto !important;
        max-width: calc(100% - 45px) !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;
    }

    .nav-menu .nav-dropdown-featured strong {
        display: block !important;
        position: static !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #fff !important;
        opacity: 1 !important;
    }

    .nav-menu .nav-dropdown-featured small {
        display: block !important;
        position: static !important;

        margin: 3px 0 0 !important;
        padding: 0 !important;

        color: #888 !important;
        opacity: 1 !important;
    }

    .nav-menu .nav-dropdown-arrow {
        position: static !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    .nav-menu .nav-dropdown-grid {
        overflow: visible !important;
    }

    .nav-menu .nav-dropdown-grid a {
        position: relative !important;
        left: 0 !important;

        transform: none !important;
        translate: none !important;

        margin-left: 0 !important;
        padding-left: 12px !important;
    }

}
/* =========================================================
   WEBEEA — FINAL MOBILE SERVICES MENU
   ========================================================= */

@media screen and (max-width: 850px) {

    /* Services container */
    .nav-menu .nav-dropdown {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Services dropdown panel */
    .nav-menu .nav-dropdown > .nav-dropdown-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 0 10px !important;

        box-sizing: border-box !important;

        transform: none !important;
        translate: none !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;
    }

    /* OPEN */
    .nav-menu .nav-dropdown.open > .nav-dropdown-menu {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        transform: none !important;
        translate: none !important;
    }

    /* All Services box */
    .nav-menu .nav-dropdown-featured {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 15px 16px !important;

        transform: none !important;
        translate: none !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

    /* Service links */
    .nav-menu .nav-dropdown-grid {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 6px 0 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        transform: none !important;
    }

    .nav-menu .nav-dropdown-grid > a {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 9px 12px !important;

        transform: none !important;
    }

}
/* =========================================================
   WEBEEA MAIN WEBSITE FOOTER
========================================================= */

.site-footer{
  margin-top:80px;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.10);
  color:#fff;
}

.site-footer .wrap{
  padding-top:70px;
  padding-bottom:0;
}

/* MAIN FOOTER GRID */

.footer-main{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:55px;
  padding-bottom:60px;
}

/* BRAND */

.footer-brand{
  max-width:330px;
}

.footer-brand .brand{
  display:inline-flex;
  align-items:center;
}

.footer-brand .brand img{
  display:block;
  width:150px;
  max-width:150px;
  height:auto;
}

.footer-brand p{
  margin:24px 0 0;
  max-width:310px;
  color:rgba(255,255,255,.62);
  font-size:.95rem;
  line-height:1.7;
}

/* FOOTER LINKS */

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-heading{
  margin-bottom:20px;
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.footer-links a{
  display:inline-block;
  margin:0 0 11px;
  color:rgba(255,255,255,.62);
  text-decoration:none;
  font-size:.9rem;
  line-height:1.5;
  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-links a:hover{
  color:var(--lime);
  transform:translateX(3px);
}

/* LET'S TALK */

.footer-talk p{
  margin:0 0 18px;
  max-width:260px;
  color:rgba(255,255,255,.62);
  font-size:.9rem;
  line-height:1.7;
}

.footer-talk a[href="contact.html"]{
  color:var(--lime);
  font-weight:700;
}

.footer-talk a[href="contact.html"]:hover{
  color:#fff;
}

.footer-talk a[href="portal/login.php"]{
  margin-top:3px;
}

/* FOOTER BOTTOM */

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.42);
  font-size:.78rem;
  line-height:1.5;
}

.footer-legal{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.footer-legal a{
  color:rgba(255,255,255,.52);
  text-decoration:none;
  transition:color .2s ease;
}

.footer-legal a:hover{
  color:var(--lime);
}

.footer-legal span{
  color:rgba(255,255,255,.20);
}

/* =========================================================
   MOBILE FOOTER
========================================================= */

@media (max-width:850px){

  .site-footer{
    margin-top:60px;
  }

  .site-footer .wrap{
    padding-top:50px;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:45px 30px;
    padding-bottom:45px;
  }

  .footer-brand{
    grid-column:1 / -1;
    max-width:100%;
  }

  .footer-brand p{
    max-width:420px;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
  }

  .footer-legal{
    justify-content:flex-start;
  }

}

@media (max-width:520px){

  .footer-main{
    grid-template-columns:1fr;
    gap:35px;
  }

  .footer-brand{
    grid-column:auto;
  }

  .footer-brand .brand img{
    width:140px;
    max-width:140px;
  }

  .footer-bottom{
    font-size:.75rem;
  }

  .footer-legal{
    gap:8px;
  }

}
/* =========================================================
   WEBEEA — LUXURY INTRO
========================================================= */

.luxury-intro{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:#070707;
}

.luxury-intro-top,
.luxury-why-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:70px;
}

.luxury-intro-number,
.luxury-why-number{
    font-size:.72rem;
    letter-spacing:.16em;
    color:rgba(255,255,255,.35);
}

.luxury-intro-heading{
    max-width:900px;
}

.luxury-intro-heading h2{
    margin:0;
    font-size:clamp(3rem,6vw,6.5rem);
    line-height:.95;
    letter-spacing:-.055em;
    font-weight:500;
}

.luxury-intro-heading h2 em{
    color:var(--lime);
    font-style:normal;
}

.luxury-intro-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    margin-top:90px;
    align-items:start;
}

.luxury-intro-statement{
    display:flex;
    gap:25px;
    align-items:flex-start;
}

.luxury-line{
    width:45px;
    height:1px;
    margin-top:13px;
    flex-shrink:0;
    background:var(--lime);
}

.luxury-intro-statement p{
    max-width:300px;
    margin:0;
    font-size:1.5rem;
    line-height:1.35;
}

.luxury-intro-statement strong{
    color:var(--lime);
}

.luxury-intro-copy{
    max-width:550px;
}

.luxury-intro-copy p{
    color:rgba(255,255,255,.62);
    line-height:1.8;
}

.luxury-intro-copy .lead{
    color:#fff;
    font-size:1.15rem;
    line-height:1.7;
}

.luxury-text-link{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:20px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.25);
    color:#fff;
    text-decoration:none;
    transition:.25s ease;
}

.luxury-text-link span{
    color:var(--lime);
    transition:.25s ease;
}

.luxury-text-link:hover{
    border-color:var(--lime);
}

.luxury-text-link:hover span{
    transform:translate(3px,-3px);
}

.luxury-intro-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:100px;
    border-top:1px solid rgba(255,255,255,.12);
}

.luxury-feature{
    position:relative;
    padding:25px 25px 10px 0;
    border-right:1px solid rgba(255,255,255,.12);
}

.luxury-feature:not(:first-child){
    padding-left:25px;
}

.luxury-feature:last-child{
    border-right:0;
}

.luxury-feature span{
    display:block;
    margin-bottom:35px;
    color:var(--lime);
    font-size:.7rem;
    letter-spacing:.12em;
}

.luxury-feature strong{
    display:block;
    font-size:1.05rem;
    font-weight:600;
}

.luxury-feature small{
    display:block;
    margin-top:6px;
    color:rgba(255,255,255,.42);
}



/* =========================================================
   WEBEEA — LUXURY WHY
========================================================= */

.luxury-why{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:#f2f1ed;
    color:#080808;
}

.luxury-why .eyebrow{
    color:#080808;
}

.luxury-why-top{
    border-bottom:1px solid rgba(0,0,0,.15);
    padding-bottom:25px;
}

.luxury-why-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:100px;
    align-items:start;
}

.luxury-why-heading h2{
    margin:0;
    max-width:700px;
    font-size:clamp(3rem,5.5vw,6rem);
    line-height:.95;
    letter-spacing:-.055em;
    font-weight:500;
}

.luxury-why-heading h2 em{
    font-style:normal;
    color:#666;
}

.luxury-why-copy{
    max-width:500px;
    padding-top:10px;
}

.luxury-why-copy p{
    color:rgba(0,0,0,.62);
    line-height:1.8;
}

.luxury-why-copy .lead{
    color:#080808;
    font-size:1.15rem;
    line-height:1.7;
}

.luxury-why-panels{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:100px;
    border-top:1px solid rgba(0,0,0,.15);
    border-bottom:1px solid rgba(0,0,0,.15);
}

.luxury-panel{
    position:relative;
    min-height:250px;
    padding:30px;
    border-right:1px solid rgba(0,0,0,.15);
    transition:
        background .3s ease,
        transform .3s ease;
}

.luxury-panel:last-child{
    border-right:0;
}

.luxury-panel:hover{
    background:#080808;
    color:#fff;
    transform:translateY(-8px);
}

.luxury-panel-number{
    color:#777;
    font-size:.7rem;
    letter-spacing:.12em;
}

.luxury-panel:hover .luxury-panel-number{
    color:var(--lime);
}

.luxury-panel-content{
    position:absolute;
    left:30px;
    right:30px;
    bottom:30px;
}

.luxury-panel-content h3{
    margin:0 0 10px;
    font-size:1.5rem;
    font-weight:500;
}

.luxury-panel-content p{
    max-width:280px;
    margin:0;
    color:rgba(0,0,0,.55);
    line-height:1.6;
}

.luxury-panel:hover .luxury-panel-content p{
    color:rgba(255,255,255,.58);
}

.luxury-panel-arrow{
    position:absolute;
    top:30px;
    right:30px;
    font-size:1.1rem;
    color:#777;
    transition:.25s ease;
}

.luxury-panel:hover .luxury-panel-arrow{
    color:var(--lime);
    transform:translate(3px,-3px);
}

.luxury-why-footer{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:35px;
    color:rgba(0,0,0,.42);
    font-size:.65rem;
    letter-spacing:.14em;
}

.luxury-why-line{
    flex:1;
    height:1px;
    background:rgba(0,0,0,.15);
}



/* =========================================================
   LUXURY SECTIONS — MOBILE
========================================================= */

@media (max-width:850px){

    .luxury-intro,
    .luxury-why{
        padding:80px 0;
    }

    .luxury-intro-top,
    .luxury-why-top{
        margin-bottom:45px;
    }

    .luxury-intro-heading h2,
    .luxury-why-heading h2{
        font-size:clamp(2.7rem,11vw,4.5rem);
    }

    .luxury-intro-content,
    .luxury-why-grid{
        grid-template-columns:1fr;
        gap:45px;
        margin-top:60px;
    }

    .luxury-intro-features{
        grid-template-columns:1fr 1fr;
        margin-top:65px;
    }

    .luxury-feature{
        padding:20px 15px 25px 0;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

    .luxury-feature:nth-child(2n){
        padding-left:15px;
        border-right:0;
    }

    .luxury-feature span{
        margin-bottom:20px;
    }

    .luxury-why-panels{
        grid-template-columns:1fr;
        margin-top:65px;
    }

    .luxury-panel{
        min-height:210px;
        border-right:0;
        border-bottom:1px solid rgba(0,0,0,.15);
    }

    .luxury-panel:last-child{
        border-bottom:0;
    }

    .luxury-why-footer{
        flex-wrap:wrap;
        line-height:1.7;
    }

}

@media (max-width:520px){

    .luxury-intro,
    .luxury-why{
        padding:65px 0;
    }

    .luxury-intro-content,
    .luxury-why-grid{
        margin-top:45px;
    }

    .luxury-intro-features{
        grid-template-columns:1fr;
    }

    .luxury-feature,
    .luxury-feature:not(:first-child),
    .luxury-feature:nth-child(2n){
        padding-left:0;
        padding-right:0;
        border-right:0;
    }

    .luxury-feature:last-child{
        border-bottom:0;
    }

    .luxury-why-footer{
        display:none;
    }

}
/* =========================================================
   WEBEEA — MOBILE WHY SECTION REFINEMENT
========================================================= */

@media (max-width:850px){

    /* Keep mobile body copy refined */
    .home-why-copy p{
        font-size:16px !important;
        line-height:1.65 !important;
    }

    .home-why-copy .home-lead{
        font-size:18px !important;
        line-height:1.55 !important;
    }

    /* Make the cards more compact */
    .home-why-card{
        min-height:210px !important;
        padding:25px 28px 30px !important;
    }

    .home-card-content h3{
        font-size:30px !important;
        line-height:1.1 !important;
        margin-bottom:14px !important;
    }

    .home-card-content p{
        font-size:17px !important;
        line-height:1.55 !important;
    }

    /* Make the card arrow simple and premium */
    .home-card-arrow{
        font-family:Arial, sans-serif !important;
        font-size:20px !important;
        font-weight:400 !important;
        color:#777 !important;
    }

    .home-why-card:hover .home-card-arrow{
        color:var(--lime) !important;
    }

}/* =========================================================
   WEBEEA HOMEPAGE — REFINED INTRO
========================================================= */

.home-intro{
    background:#070707;
    color:#fff;
    padding:105px 0 95px;
    position:relative;
    overflow:hidden;
}

.home-intro-header,
.home-why-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:24px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.home-section-number{
    color:rgba(255,255,255,.32);
    font-size:.68rem;
    letter-spacing:.16em;
}

.home-intro-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:90px;
    align-items:start;
    padding:75px 0 80px;
}

.home-intro-heading h2{
    margin:0;
    max-width:720px;
    font-size:clamp(3.2rem,5.6vw,6rem);
    line-height:.96;
    letter-spacing:-.055em;
    font-weight:500;
}

.home-intro-heading h2 em{
    color:var(--lime);
    font-style:normal;
}

.home-intro-copy{
    max-width:510px;
    padding-top:8px;
}

.home-intro-copy p{
    color:rgba(255,255,255,.58);
    line-height:1.75;
    margin:0 0 22px;
}

.home-intro-copy .home-lead{
    color:#fff;
    font-size:1.08rem;
    line-height:1.7;
}

.home-link{
    display:inline-flex;
    align-items:center;
    gap:13px;
    margin-top:8px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.3);
    color:#fff;
    text-decoration:none;
    font-size:.9rem;
    transition:.25s ease;
}

.home-link span{
    color:var(--lime);
    transition:.25s ease;
}

.home-link:hover{
    border-color:var(--lime);
}

.home-link:hover span{
    transform:translate(3px,-3px);
}

.home-intro-process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.12);
}

.home-process-item{
    min-height:115px;
    padding:20px 22px 15px 0;
    border-right:1px solid rgba(255,255,255,.12);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.home-process-item:not(:first-child){
    padding-left:22px;
}

.home-process-item:last-child{
    border-right:0;
}

.home-process-item > span{
    color:var(--lime);
    font-size:.67rem;
    letter-spacing:.12em;
}

.home-process-item strong{
    display:block;
    font-size:.98rem;
    font-weight:600;
}

.home-process-item small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.4);
    font-size:.76rem;
}



/* =========================================================
   WEBEEA HOMEPAGE — WHY
========================================================= */

.home-why{
    background:#f1f0ec;
    color:#080808;
    padding:105px 0 90px;
    position:relative;
    overflow:hidden;
}

.home-why-header{
    border-color:rgba(0,0,0,.14);
}

.home-why .home-section-number{
    color:rgba(0,0,0,.3);
}

.home-why-intro{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:90px;
    padding:75px 0 70px;
    align-items:start;
}

.home-why-intro h2{
    margin:0;
    max-width:720px;
    font-size:clamp(3rem,5.2vw,5.7rem);
    line-height:.97;
    letter-spacing:-.055em;
    font-weight:500;
}

.home-why-intro h2 em{
    color:#707070;
    font-style:normal;
}

.home-why-copy{
    max-width:500px;
    padding-top:8px;
}

.home-why-copy p{
    color:rgba(0,0,0,.58);
    line-height:1.75;
    margin:0 0 22px;
}

.home-why-copy .home-lead{
    color:#080808;
    font-size:1.08rem;
    line-height:1.7;
}

.home-why-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(0,0,0,.16);
    border-bottom:1px solid rgba(0,0,0,.16);
}

.home-why-card{
    min-height:290px;
    padding:25px 28px 28px;
    border-right:1px solid rgba(0,0,0,.16);
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.home-why-card:last-child{
    border-right:0;
}

.home-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#777;
    font-size:.68rem;
    letter-spacing:.12em;
}

.home-card-arrow{
    font-size:1rem;
    transition:.25s ease;
}

.home-card-content h3{
    margin:0 0 12px;
    font-size:1.55rem;
    font-weight:500;
}

.home-card-content p{
    max-width:290px;
    margin:0;
    color:rgba(0,0,0,.55);
    line-height:1.65;
    transition:color .3s ease;
}

.home-why-card:hover{
    background:#080808;
    color:#fff;
    transform:translateY(-6px);
}

.home-why-card:hover .home-card-top{
    color:var(--lime);
}

.home-why-card:hover .home-card-arrow{
    transform:translate(4px,-4px);
    color:var(--lime);
}

.home-why-card:hover .home-card-content p{
    color:rgba(255,255,255,.58);
}

.home-why-footer{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:27px;
    color:rgba(0,0,0,.38);
    font-size:.61rem;
    letter-spacing:.15em;
}

.home-why-footer i{
    height:1px;
    flex:1;
    background:rgba(0,0,0,.15);
}



/* =========================================================
   HOMEPAGE — MOBILE
========================================================= */

@media (max-width:850px){

    .home-intro,
    .home-why{
        padding:75px 0;
    }

    .home-intro-grid,
    .home-why-intro{
        grid-template-columns:1fr;
        gap:45px;
        padding:55px 0;
    }

    .home-intro-heading h2,
    .home-why-intro h2{
        font-size:clamp(2.8rem,10vw,4.5rem);
    }

    .home-intro-process{
        grid-template-columns:1fr 1fr;
    }

    .home-process-item{
        min-height:105px;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

    .home-process-item:nth-child(2){
        border-right:0;
    }

    .home-process-item:nth-child(3){
        padding-left:0;
    }

    .home-process-item:nth-child(3),
    .home-process-item:nth-child(4){
        border-bottom:0;
    }

    .home-why-cards{
        grid-template-columns:1fr;
    }

    .home-why-card{
        min-height:220px;
        border-right:0;
        border-bottom:1px solid rgba(0,0,0,.16);
    }

    .home-why-card:last-child{
        border-bottom:0;
    }

}


@media (max-width:520px){

    .home-intro,
    .home-why{
        padding:60px 0;
    }

    .home-intro-grid,
    .home-why-intro{
        padding:45px 0;
    }

    .home-intro-process{
        grid-template-columns:1fr;
    }

    .home-process-item,
    .home-process-item:not(:first-child),
    .home-process-item:nth-child(3){
        padding-left:0;
        padding-right:0;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

    .home-process-item:last-child{
        border-bottom:0;
    }

    .home-why-footer{
        display:none;
    }

}
/* =========================================================
   WEBEEA — WHY CARDS MOBILE ARROW FIX
========================================================= */

.home-why-card{
    position:relative !important;
}

.home-card-top{
    position:relative !important;
    display:block !important;
}

.home-card-top > span:first-child{
    display:block !important;
}

.home-card-arrow{
    position:absolute !important;
    top:0 !important;
    right:0 !important;

    display:block !important;

    width:24px !important;
    height:24px !important;

    font-family:Arial, Helvetica, sans-serif !important;
    font-size:18px !important;
    line-height:22px !important;
    text-align:center !important;

    color:#777 !important;

    transform:rotate(-45deg) !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

.home-why-card:hover .home-card-arrow{
    color:var(--lime) !important;
    transform:rotate(-45deg) translate(3px,-3px) !important;
}


@media (max-width:850px){

    .home-why-card{
        min-height:210px !important;
        padding:25px 28px 30px !important;
    }

    .home-card-top{
        min-height:24px !important;
    }

    .home-card-content{
        margin-top:auto !important;
        padding-top:35px !important;
    }

    .home-card-content h3{
        font-size:30px !important;
        line-height:1.1 !important;
        margin:0 0 14px !important;
    }

    .home-card-content p{
        font-size:17px !important;
        line-height:1.55 !important;
        margin:0 !important;
    }

}
/* =========================================================
   WEBEEA — MOBILE INTRO REFINEMENT
========================================================= */

@media (max-width:850px){

    /* Keep the intro heading aligned and premium */
    .home-intro-grid{
        display:block !important;
        padding:55px 0 55px !important;
    }

    .home-intro-heading{
        margin-bottom:55px !important;
    }

    .home-intro-heading h2{
        font-size:clamp(3rem, 10vw, 4.2rem) !important;
        line-height:.98 !important;
        letter-spacing:-.055em !important;
        text-align:left !important;
    }

    /* Intro body copy */
    .home-intro-copy{
        max-width:none !important;
        padding-top:0 !important;
    }

    .home-intro-copy p{
        font-size:17px !important;
        line-height:1.65 !important;
        margin-bottom:24px !important;
    }

    .home-intro-copy .home-lead{
        font-size:21px !important;
        line-height:1.5 !important;
        margin-bottom:30px !important;
    }

    /* Clean Webeea link */
    .home-link{
        display:inline-flex !important;
        align-items:center !important;
        gap:12px !important;
        font-size:16px !important;
        margin-top:8px !important;
    }

    .home-link span{
        display:inline-block !important;
        font-family:Arial, Helvetica, sans-serif !important;
        font-size:19px !important;
        line-height:1 !important;
        color:var(--lime) !important;
        transform:none !important;
    }

    .home-link:hover span{
        transform:translate(3px,-3px) !important;
    }

    /* Reduce the huge gap before the process */
    .home-intro-process{
        margin-top:0 !important;
    }

}
/* =========================================================
   WEBEEA — MOBILE LUXURY INTRO REFINEMENT
========================================================= */

@media (max-width:850px){

    /* -----------------------------------------
       INTRO SECTION
    ----------------------------------------- */

    .luxury-intro{
        padding:70px 0 60px !important;
    }


    /* Top label */

    .luxury-intro-top{
        padding-bottom:20px !important;
    }


    /* Main heading */

    .luxury-intro-heading{
        margin-top:50px !important;
        margin-bottom:55px !important;
    }

    .luxury-intro-heading h2{
        font-size:clamp(3rem,10vw,4.4rem) !important;
        line-height:.98 !important;
        letter-spacing:-.055em !important;
    }


    /* -----------------------------------------
       INTRO CONTENT
    ----------------------------------------- */

    .luxury-intro-content{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:45px !important;
    }


    /* Statement */

    .luxury-intro-statement{
        display:flex !important;
        align-items:flex-start !important;
        gap:20px !important;
    }

    .luxury-intro-statement .luxury-line{
        flex:0 0 55px !important;
        width:55px !important;
        margin-top:16px !important;
    }

    .luxury-intro-statement p{
        margin:0 !important;
        max-width:320px !important;
        font-size:30px !important;
        line-height:1.12 !important;
        letter-spacing:-.025em !important;
    }


    /* -----------------------------------------
       INTRO COPY
    ----------------------------------------- */

    .luxury-intro-copy{
        max-width:none !important;
    }

    .luxury-intro-copy p{
        font-size:16px !important;
        line-height:1.65 !important;
        margin-bottom:22px !important;
    }

    .luxury-intro-copy p.lead{
        font-size:20px !important;
        line-height:1.5 !important;
        margin-bottom:28px !important;
    }


    /* -----------------------------------------
       DISCOVER LINK
    ----------------------------------------- */

    .luxury-intro-copy .home-link{
        display:inline-flex !important;
        align-items:center !important;
        gap:12px !important;
        margin-top:8px !important;
        font-size:16px !important;
        line-height:1.4 !important;
    }

    .luxury-intro-copy .home-link span{
        display:inline-block !important;
        font-family:Arial, Helvetica, sans-serif !important;
        font-size:19px !important;
        line-height:1 !important;
        color:var(--lime) !important;
        transform:none !important;
    }

    .luxury-intro-copy .home-link:hover span{
        transform:translate(3px,-3px) !important;
    }


    /* -----------------------------------------
       PROCESS / FEATURES
    ----------------------------------------- */

    .luxury-intro-features{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        margin-top:55px !important;
    }

    .luxury-feature{
        min-height:115px !important;
        padding:18px 18px 18px 0 !important;
    }

    .luxury-feature:nth-child(2n){
        padding-left:18px !important;
    }

    .luxury-feature:nth-child(1),
    .luxury-feature:nth-child(2){
        border-bottom:1px solid rgba(255,255,255,.12) !important;
    }

    .luxury-feature:nth-child(2),
    .luxury-feature:nth-child(4){
        border-right:0 !important;
    }

    .luxury-feature strong{
        font-size:16px !important;
    }

    .luxury-feature small{
        font-size:12px !important;
    }

}


@media (max-width:520px){

    .luxury-intro{
        padding:60px 0 50px !important;
    }

    .luxury-intro-heading{
        margin-top:42px !important;
        margin-bottom:45px !important;
    }

    .luxury-intro-heading h2{
        font-size:clamp(2.8rem,11vw,3.8rem) !important;
    }

    .luxury-intro-content{
        gap:38px !important;
    }

    .luxury-intro-statement{
        gap:15px !important;
    }

    .luxury-intro-statement .luxury-line{
        flex-basis:40px !important;
        width:40px !important;
    }

    .luxury-intro-statement p{
        font-size:27px !important;
    }

    .luxury-intro-copy p.lead{
        font-size:19px !important;
    }

    .luxury-intro-copy p{
        font-size:16px !important;
        line-height:1.6 !important;
    }

    .luxury-intro-features{
        grid-template-columns:1fr !important;
        margin-top:45px !important;
    }

    .luxury-feature,
    .luxury-feature:nth-child(2n){
        min-height:90px !important;
        padding:16px 0 !important;
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.12) !important;
    }

    .luxury-feature:last-child{
        border-bottom:0 !important;
    }

}

/* WEBEEA COOKIE BANNER POSITIONING FIX */

#webeea-cookie-banner {
    position: fixed !important;
    z-index: 999990 !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 24px !important;
    top: auto !important;
    width: auto !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #101010 !important;
    color: #f7f7f7 !important;
    border: 1px solid #303030 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 16px 60px rgba(0,0,0,.38) !important;
    display: none;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

#webeea-cookie-banner.is-visible {
    display: flex !important;
}

#webeea-cookie-banner .cookie-banner-content {
    flex: 1;
    min-width: 0;
}

#webeea-cookie-banner .cookie-eyebrow {
    color: #c5f36b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    margin-bottom: 9px !important;
}

#webeea-cookie-banner h2 {
    color: #fff !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin: 0 0 9px !important;
}

#webeea-cookie-banner p {
    color: #b9b9b9 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

#webeea-cookie-banner a {
    color: #c5f36b !important;
    text-decoration: underline !important;
}

#webeea-cookie-banner .cookie-banner-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    flex-shrink: 0 !important;
}

#webeea-cookie-banner .cookie-btn {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    padding: 12px 15px !important;
    min-height: 44px !important;
    cursor: pointer !important;
}

#webeea-cookie-banner .cookie-btn-primary {
    background: #c5f36b !important;
    color: #101010 !important;
    border: 1px solid #c5f36b !important;
}

#webeea-cookie-banner .cookie-btn-secondary {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #454545 !important;
}

@media (max-width: 700px) {
    #webeea-cookie-banner {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        padding: 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
    }

    #webeea-cookie-banner .cookie-banner-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    #webeea-cookie-banner .cookie-btn {
        width: 100% !important;
    }
}

/* WEBEEA COOKIE PREFERENCES — DISPLAY FIX */

#webeea-cookie-preferences {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000001 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, .78) !important;
    overflow-y: auto !important;
}

#webeea-cookie-preferences.is-visible {
    display: flex !important;
}

#webeea-cookie-preferences > * {
    box-sizing: border-box;
}

#webeea-cookie-preferences .cookie-preferences-content {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px;
    background: #101010;
    color: #fff;
    border: 1px solid #303030;
    border-radius: 18px;
    box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

#webeea-cookie-preferences h2,
#webeea-cookie-preferences h3 {
    color: #fff;
    line-height: 1.3;
}

#webeea-cookie-preferences p,
#webeea-cookie-preferences label {
    color: #c8c8c8;
    line-height: 1.7;
}

#webeea-cookie-preferences input[type="checkbox"] {
    accent-color: var(--lime);
}

#webeea-cookie-preferences button {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    padding: 11px 15px;
}

#webeea-cookie-settings-link {
    position: fixed !important;
    left: 18px !important;
    bottom: 18px !important;
    z-index: 999980 !important;
    padding: 10px 15px !important;
    border: 1px solid #383838 !important;
    border-radius: 999px !important;
    background: #101010 !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 12px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,.3) !important;
}

#webeea-cookie-settings-link:hover {
    border-color: var(--lime) !important;
    color: var(--lime) !important;
}

/* Use the actual Webeea lime */
#webeea-cookie-banner .cookie-eyebrow,
#webeea-cookie-banner a {
    color: var(--lime) !important;
}

#webeea-cookie-banner .cookie-btn-primary {
    background: var(--lime) !important;
    border-color: var(--lime) !important;
    color: #070707 !important;
}

@media (max-width: 600px) {
    #webeea-cookie-preferences {
        padding: 12px !important;
    }

    #webeea-cookie-preferences .cookie-preferences-content {
        padding: 22px;
    }
}

/* WEBEEA COOKIE PREFERENCES — CORRECTED FIX */

/* Keep the preferences panel hidden until opened */
#webeea-cookie-preferences[hidden] {
    display: none !important;
}

/* Full-screen overlay when preferences are opened */
#webeea-cookie-preferences:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    background: rgba(0, 0, 0, .82) !important;
}

/* The actual dialog created by your JavaScript */
#webeea-cookie-preferences .webeea-cookie-dialog {
    width: 100% !important;
    max-width: 560px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 30px !important;
    background: #101010 !important;
    color: #fff !important;
    border: 1px solid #303030 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 80px rgba(0, 0, 0, .5) !important;
}

#webeea-cookie-preferences .webeea-cookie-dialog h2,
#webeea-cookie-preferences .webeea-cookie-dialog strong {
    color: #fff !important;
}

#webeea-cookie-preferences .webeea-cookie-dialog p,
#webeea-cookie-preferences .webeea-cookie-dialog small {
    color: #c8c8c8 !important;
    line-height: 1.7 !important;
}

#webeea-cookie-preferences .webeea-cookie-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #303030 !important;
}

#webeea-cookie-preferences .webeea-cookie-option small {
    display: block !important;
    margin-top: 5px !important;
}

#webeea-cookie-preferences input[type="checkbox"] {
    flex-shrink: 0 !important;
    accent-color: var(--lime) !important;
}

#webeea-cookie-preferences .webeea-cookie-dialog-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

#webeea-cookie-preferences .webeea-cookie-btn {
    min-height: 44px !important;
    padding: 11px 15px !important;
    border: 1px solid #454545 !important;
    border-radius: 8px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    font: inherit !important;
    cursor: pointer !important;
}

#webeea-cookie-preferences .webeea-cookie-btn-primary {
    background: var(--lime) !important;
    border-color: var(--lime) !important;
    color: #070707 !important;
}

#webeea-cookie-settings-link {
    position: fixed !important;
    left: 20px !important;
    bottom: 16px !important;
    z-index: 999980 !important;
    padding: 10px 15px !important;
    border: 1px solid var(--lime) !important;
    border-radius: 999px !important;
    background: #070707 !important;
    color: var(--lime) !important;
    font: inherit !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

#webeea-cookie-banner .webeea-cookie-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}

#webeea-cookie-banner .webeea-cookie-btn {
    min-height: 44px !important;
    padding: 12px 15px !important;
    border: 1px solid #454545 !important;
    border-radius: 8px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#webeea-cookie-banner .webeea-cookie-btn-primary {
    background: var(--lime) !important;
    border-color: var(--lime) !important;
    color: #070707 !important;
}

#webeea-cookie-banner[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    #webeea-cookie-preferences:not([hidden]) {
        padding: 12px !important;
    }

    #webeea-cookie-preferences .webeea-cookie-dialog {
        padding: 22px !important;
        max-height: calc(100vh - 24px) !important;
    }

    #webeea-cookie-banner .webeea-cookie-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    #webeea-cookie-banner .webeea-cookie-btn {
        width: 100% !important;
    }
}

/* WEBEEA — COOKIE DIALOG FINAL POLISH */

#webeea-cookie-preferences .webeea-cookie-dialog {
    width: min(100%, 560px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    padding: 30px !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

#webeea-cookie-preferences .webeea-cookie-dialog h2 {
    font-size: clamp(26px, 4vw, 34px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 16px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

#webeea-cookie-preferences .webeea-cookie-dialog p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 0 18px !important;
}

#webeea-cookie-preferences .webeea-cookie-option {
    padding: 15px 0 !important;
}

#webeea-cookie-preferences .webeea-cookie-dialog-actions {
    margin-top: 20px !important;
    gap: 10px !important;
}

#webeea-cookie-preferences .webeea-cookie-btn {
    font-size: 13px !important;
    white-space: normal !important;
}

@media (max-width: 600px) {
    #webeea-cookie-preferences:not([hidden]) {
        padding: 12px !important;
    }

    #webeea-cookie-preferences .webeea-cookie-dialog {
        padding: 22px !important;
        max-height: calc(100vh - 24px) !important;
    }

    #webeea-cookie-preferences .webeea-cookie-dialog h2 {
        font-size: 28px !important;
    }

    #webeea-cookie-preferences .webeea-cookie-dialog-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    #webeea-cookie-preferences .webeea-cookie-btn-primary {
        grid-column: 1 / -1;
    }
}