/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 23 2026 | 22:50:15 */
/* ============================================
   BLOOMARK — Creative & Consulting
   Consolidated stylesheet
   ============================================ */


/* =========================================
   BLOOMARK TEXT LOGO
   ========================================= */

.bloomark-logo-text{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  width:max-content;
}

.bloomark-name{
  font-family:"Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif;
  font-weight:400;
  line-height:.82;
  letter-spacing:-0.055em;
  white-space:nowrap;
}

.bloom{
  color:var(--text-primary) !important;
}

.ark{
  color:var(--accent) !important;
}

.bloomark-tagline{
  font-family:"Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif;
  font-weight:400;
  line-height:1;
  letter-spacing:.17em;
  color:var(--muted-primary) !important;
  white-space:nowrap;
}


/* Footer */
.footer-top .bloom{
  color:var(--text-secondary) !important;
}

.footer-top .bloomark-tagline{
  color:var(--muted-secondary) !important;
}


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

.bloomark-logo-text--compact{
  align-items:flex-start;
}

.bloomark-logo-text--compact .bloomark-name{
  font-size:29px;
	letter-spacing: 1px;
	font-weight: 900;
}

.bloomark-logo-text--compact .bloomark-tagline{
  font-size:16px;
  margin-top:4px;
}


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

.bloomark-logo-text--hero{
  align-items:center;
}

.bloomark-logo-text--hero .bloomark-name{
  font-size:72px;
}

.bloomark-logo-text--hero .bloomark-tagline{
  font-size:25px;
  margin-top:24px;
}

@media (max-width:1024px){

  .bloomark-logo-text--hero .bloomark-name{
    font-size:58px;
  }

  .bloomark-logo-text--hero .bloomark-tagline{
    font-size:20px;
    margin-top:20px;
  }

}

@media (max-width:767px){

  .bloomark-logo-text--hero .bloomark-name{
    font-size:43px;
    letter-spacing:-0.05em;
  }

  .bloomark-logo-text--hero .bloomark-tagline{
    font-size:15px;
    margin-top:15px;
    letter-spacing:.13em;
  }

}

@media (max-width:420px){

  .bloomark-logo-text--hero .bloomark-name{
    font-size:36px;
  }

  .bloomark-logo-text--hero .bloomark-tagline{
    font-size:13px;
    letter-spacing:.10em;
  }

}


/* =========================================
   GLOBAL VARIABLES
   ========================================= */

:root{

  --bg-primary:#f6f5f0;

  --text-primary:#15150f;

  --bg-secondary:#121210;

  --text-secondary:#f6f5f0;

  --muted-primary:#6f6f66;

  --muted-secondary:#a6a69c;

  /*
     UNIFIED BLOOMARK PISTACHIO
  */
  --accent:#a9be3d;

  --accent-text:#181812;

  --card-bg:#ffffff;

  --border-primary:rgba(21,21,15,0.12);

  --border-secondary:rgba(246,245,240,0.16);

  --input-bg:#ffffff;

  --shadow:0 20px 45px -25px rgba(0,0,0,0.35);

  --radius:2px;

  --ff-display:'Cormorant Garamond', Georgia, serif;

  --ff-body:'Jost', Arial, sans-serif;
}


/* =========================================
   DARK MODE
   ========================================= */

html.dark{

  --bg-primary:#0d0d0c;

  --text-primary:#f2f1ea;

  --bg-secondary:#1a1a17;

  --text-secondary:#f2f1ea;

  --muted-primary:#a6a69c;

  --muted-secondary:#83837a;

  /*
     Same pistachio family in dark mode.
     Slightly brighter for contrast.
  */
  --accent:#B8C63E;

  --accent-text:#12120c;

  --card-bg:#1c1c19;

  --border-primary:rgba(242,241,234,0.14);

  --border-secondary:rgba(242,241,234,0.12);

  --input-bg:#17170f14;

  --shadow:0 20px 45px -25px rgba(0,0,0,0.7);
}


/* =========================================
   GLOBAL RESET
   ========================================= */

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

html{
  scroll-behavior:smooth;
}

.site-header{
  height:0px !important;
  padding:0px !important;
  min-height:0px !important;
}

body{
  font-family:var(--ff-body);
  background:var(--bg-primary) !important;
  color:var(--text-primary) !important;
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}

img,
svg{
  display:block;
  max-width:100%;
}

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

ul{
  list-style:none;
}

button{
  font-family:inherit;
  cursor:pointer;
  background:none;
  border:none;
  color:inherit;
}

input,
textarea{
  font-family:inherit;
}


/* ============================================
   BLOOM-SCOPE HARDENING
   ============================================ */

.bloom-scope{
  display:block;
  font-family:var(--ff-body);
  background:var(--bg-primary) !important;
  color:var(--text-primary) !important;
}

.bloom-fullbleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.bloom-scope,
.bloom-scope *,
.bloom-scope *::before,
.bloom-scope *::after{
  box-sizing:border-box !important;
}

.bloom-scope h1,
.bloom-scope h2,
.bloom-scope h3,
.bloom-scope h4,
.bloom-scope p,
.bloom-scope span,
.bloom-scope li,
.bloom-scope label{

  font-family:inherit;

  background:none !important;

  -webkit-text-fill-color:currentColor !important;

  text-shadow:none !important;

  float:none !important;
}

.bloom-scope a{

  font-family:inherit;

  -webkit-text-fill-color:currentColor !important;

  text-shadow:none !important;

  float:none !important;
}

.bloom-scope ul,
.bloom-scope ol{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.bloom-scope img,
.bloom-scope svg{
  display:block;
  max-width:100%;
}

:where(.bloom-scope) a{
  color:inherit;
  text-decoration:none !important;
  border-bottom:none !important;
}

.bloom-scope button{
  font-family:inherit;
  cursor:pointer;
}

.bloom-scope input,
.bloom-scope textarea{
  font-family:inherit;
}

.bloom-scope section{
  width:100%;
}

.bloom-scope [hidden]{
  display:none !important;
}


/* =========================================
   GENERAL
   ========================================= */

.eyebrow{
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent) !important;
  font-weight:600;
  margin-bottom:.6rem;
}

h1,
h2,
h3{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:1.05;
}


/* =========================================
   BUTTONS
   ========================================= */

.btn{

  display:inline-flex;

  align-items:center;

  gap:.6rem;

  padding:.9rem 1.6rem;

  font-size:.78rem;

  letter-spacing:.08em;

  text-transform:uppercase;

  font-weight:500;

  border-radius:var(--radius);

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    border-color .25s ease;

  white-space:nowrap;
}

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

.btn-primary{
  background:var(--accent) !important;
  color:var(--accent-text) !important;
}

.btn-outline{
  border:1px solid var(--border-primary);
  color:var(--text-primary) !important;
}

.btn-outline:hover{
  border-color:var(--accent) !important;
}

.btn-outline-light{
  border:1px solid var(--border-secondary);
  color:var(--text-secondary) !important;
}

.btn-outline-light:hover{
  border-color:var(--accent) !important;
  color:var(--accent) !important;
}


section{
  padding:6.5rem 6vw;
}


/* =========================================
   HEADER
   ========================================= */

.site-header-bloom{

  position:sticky;

  top:0;

  z-index:1000;

  display:flex;

  align-items:center;

  justify-content:space-between;

  min-height:74px;

  padding:1.3rem 6vw;

  background:var(--bg-primary) !important;

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


/* LOGO */

.logo{

  display:flex;

  flex-direction:column;

  line-height:1;

  align-items:center;

  font-family:'Arial Display', var(--ff-display) !important;

  font-size:1.5rem;

  font-weight:800;

  letter-spacing:.01em;
}

.logo-bloom{
  color:var(--text-primary) !important;
}

.logo-ark{
  color:var(--accent) !important;
}

.logo small{

  font-family:var(--ff-display);

  font-size:.68rem;

  font-weight:500;

  letter-spacing:.01em;

  text-transform:none;

  color:var(--muted-primary) !important;

  margin-top:.3rem;
}

.logo small em{
  font-style:italic;
  font-weight:600;
}


/* =========================================
   DESKTOP NAV
   ========================================= */

.main-nav{

  display:flex;

  gap:2.2rem;

  font-size:.85rem;

  letter-spacing:.04em;
}

.main-nav a{

  position:relative;

  padding-bottom:.4rem;

  color:var(--text-primary) !important;

  transition:color .2s;
}

.main-nav a:hover{
  color:var(--accent) !important;
}

.main-nav a.active{
  color:var(--accent) !important;
}

.main-nav a.active::after{

  content:"";

  position:absolute;

  left:50%;

  bottom:0;

  width:4px;

  height:4px;

  background:var(--accent) !important;

  border-radius:50%;

  transform:translateX(-50%);
}


/* =========================================
   HEADER CONTROLS
   ========================================= */

.header-controls{

  display:flex;

  align-items:center;

  gap:1.1rem;
}


/* =========================================
   LANGUAGE
   ========================================= */

.lang-toggle{

  display:flex;

  align-items:center;

  gap:.4rem;

  font-size:.8rem;

  letter-spacing:.05em;
}

.lang-toggle button{

  color:#494904 !important;
	font-size: 15px;

  font-weight:500;

  padding:.2rem;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.lang-toggle button:hover{
  background-color:var(--accent) !important;
	color: black;
}

.lang-toggle button.active{
  background-color:var(--accent) !important;
	color: black;
}

.lang-toggle .sep{
  color:var(--border-primary) !important;
}


/* =========================================
   LIGHT / DARK TOGGLE
   ========================================= */

.theme-toggle{

  all:unset;

  display:inline-flex !important;

  cursor:pointer;

  flex-shrink:0;

  border-radius:999px !important;

  -webkit-tap-highlight-color:transparent;
}

.theme-toggle:focus-visible{

  outline:2px solid var(--accent) !important;

  outline-offset:2px !important;
}

.toggle-track{

  position:relative;

  display:flex !important;

  align-items:center;

  justify-content:space-between;

  width:52px !important;

  height:28px !important;

  padding:0 6px !important;

  border-radius:999px !important;

  background:var(--border-primary) !important;

  border:1px solid var(--border-primary) !important;

  transition:
    background .3s ease,
    border-color .3s ease;
}

html.dark .toggle-track{
  background:rgba(255,255,255,0.1) !important;
}

.toggle-track svg{

  width:14px !important;

  height:14px !important;

  position:relative;

  z-index:1;

  color:var(--text-primary) !important;

  stroke:currentColor !important;

  fill:none !important;

  flex-shrink:0;
}

.toggle-knob{

  position:absolute !important;

  top:2px !important;

  left:2px !important;

  width:22px !important;

  height:22px !important;

  border-radius:50% !important;

  background:var(--accent) !important;

  box-shadow:0 2px 6px rgba(0,0,0,.35);

  transition:
    transform .32s cubic-bezier(.65,0,.35,1),
    background .3s ease;

  transform:translateX(0);
}

html.dark .toggle-knob{
  transform:translateX(24px);
}


/*
   IMPORTANT:
   Hover/active accent is now pistachio,
   not orange/yellow.
*/

.theme-toggle:hover .toggle-track{
	background-color:var(--accent) !important;
  border-color:var(--accent) !important;
}

.theme-toggle:active .toggle-track{
  border-color:var(--accent) !important;
	background-color:var(--accent) !important;
}


/* =========================================
   BURGER
   ========================================= */

/*
   Hidden on desktop exactly as before.
   It becomes visible only under 860px.
*/

.hamburger{

  display:none;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:5px;

  width:38px;

  height:38px;

  padding:0;

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

  border-radius:50%;

  background:transparent;

  color:var(--text-primary);

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

.hamburger span{

  display:block;

  width:15px;

  height:1.5px;

  background:currentColor !important;

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

.hamburger:hover{

  background:var(--accent) !important;

  border-color:var(--accent) !important;

  color:var(--accent-text) !important;
}


/*
   Burger becomes X when active.
*/

.hamburger.active span:nth-child(1){

  transform:
    translateY(6.5px)
    rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){

  transform:
    translateY(-6.5px)
    rotate(-45deg);
}


.header-cta{
  flex-shrink:0;
}


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

.hero{

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:2rem;

  padding-top:4.5rem;

  padding-bottom:4.5rem;

  background:var(--bg-primary) !important;

  position:relative;
}

.hero-text h1{

  font-size:clamp(2.8rem,4.6vw,4.4rem);

  letter-spacing:.01em;

  color:var(--text-primary) !important;
}

.hero-text h1 span{
  color:var(--text-primary) !important;
}

.hero-text .rule{

  display:block;

  width:60px;

  height:2px;

  background:var(--accent) !important;

  margin:1.6rem 0;
}

.hero-sub{

  max-width:340px;

  color:var(--muted-primary) !important;

  font-size:1rem;

  line-height:1.6;

  margin-bottom:2.2rem;
}

.hero-actions{

  display:flex;

  gap:1rem;

  margin-bottom:3rem;

  flex-wrap:wrap;
}

.hero-stats{

  display:flex;

  gap:2.6rem;

  flex-wrap:wrap;
}

.hero-stats .stat strong{

  display:block;

  font-family:var(--ff-display);

  font-size:1.9rem;

  color:var(--accent) !important;

  font-weight:600;
}

.hero-stats .stat span{

  font-size:.68rem;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--muted-primary) !important;
}


/* HERO VISUAL */

.hero-visual{

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:480px;
}

.hero-graphic{

  position:relative;

  width:100%;

  max-width:420px;

  height:480px;

  size:1.8;
}

.big-letter{

  position:absolute;

  inset:0;

  color:var(--accent) !important;

  opacity:.9;

  z-index:1;
}

.big-letter text{

  font-family:var(--ff-display);

  font-weight:700;

  fill:currentColor;
}

.hero-portrait{

  position:absolute;

  right:6%;

  bottom:0;

  width:62%;

  z-index:2;

  filter:drop-shadow(var(--shadow));
}

.hero-leaf{

  position:absolute;

  left:0;

  top:14%;

  width:52%;

  z-index:3;

  filter:drop-shadow(
    0 15px 25px rgba(0,0,0,.25)
  );
}

.hero-badge{

  display:none !important;

  position:absolute;

  top:-1rem;

  right:-1rem;

  width:96px;

  height:96px;

  z-index:4;

  animation:spin 18s linear infinite;
}

.hero-badge svg text{

  fill:var(--muted-primary);

  font-family:var(--ff-body);
}

.badge-center{

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  font-family:var(--ff-display);

  font-size:1.1rem;

  font-weight:700;

  color:var(--accent) !important;

  animation:spin-rev 18s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes spin-rev{
  to{
    transform:rotate(-360deg);
  }
}

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

  .hero-badge,
  .badge-center{
    animation:none;
  }

}


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

.services{

  background:var(--bg-secondary) !important;

  color:var(--text-secondary) !important;
}

.services-head{

  display:flex;

  justify-content:space-between;

  gap:3rem;

  align-items:flex-end;

  margin-bottom:3.5rem;

  flex-wrap:wrap;
}

.services h2{

  font-size:clamp(2rem,3vw,2.6rem);

  color:var(--text-secondary) !important;
}

.services-intro{

  max-width:420px;

  color:var(--muted-secondary) !important;

  font-size:.9rem;

  line-height:1.7;
}

.services-grid{

  display:grid;

  grid-template-columns:repeat(6,1fr);

  gap:2rem;
}

.service{

  border-top:1px solid var(--border-secondary);

  padding-top:1.6rem;
}

.service .num{

  font-family:var(--ff-display);

  font-size:1.7rem;

  color:var(--accent) !important;

  font-weight:600;
}

.service svg{

  width:40px;

  height:40px;

  margin:1rem 0 1.1rem;

  color:var(--accent) !important;
}

.service h3{

  font-size:1.05rem;

  font-family:var(--ff-body);

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.03em;

  margin-bottom:.6rem;

  line-height:1.3;

  color:var(--text-secondary) !important;
}

.service p{

  font-size:.95rem;

  color:var(--muted-secondary) !important;

  line-height:1.55;
}


/* =========================================
   WORK
   ========================================= */

.work{
  background:var(--bg-primary) !important;
}

.work-head{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  margin-bottom:3rem;

  flex-wrap:wrap;

  gap:1rem;
}

.work-head h2{

  font-size:clamp(2rem,3vw,2.6rem);

  color:var(--text-primary) !important;
}

.view-all{

  font-size:.9rem;

  letter-spacing:.05em;

  color:var(--muted-primary) !important;

  border-bottom:1px solid transparent;

  transition:
    color .2s,
    border-color .2s;
}

.view-all:hover{

  color:var(--accent) !important;

  border-color:var(--accent) !important;
}

.work-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:2rem;
}

.project-thumb{

  aspect-ratio:4/3.1;

  border-radius:var(--radius);

  background:
    linear-gradient(
      155deg,
      var(--card-bg),
      var(--bg-secondary)
    );

  position:relative;

  overflow:hidden;

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

  transition:transform .4s ease;
}

.project:hover .project-thumb{
  transform:translateY(-6px);
}

.project-thumb::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 30% 30%,
      color-mix(
        in srgb,
        var(--accent) 55%,
        transparent
      ),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--accent) 18%,
        transparent
      ),
      transparent 70%
    );
}

.thumb-1::after{

  content:"";

  position:absolute;

  left:38%;

  top:18%;

  width:24%;

  height:60%;

  background:
    color-mix(
      in srgb,
      var(--accent) 70%,
      #000 10%
    );

  border-radius:
    40% 40% 20% 20%;
}

.thumb-2::after{

  content:"";

  position:absolute;

  left:28%;

  top:32%;

  width:44%;

  height:34%;

  background:var(--accent) !important;

  border-radius:4px;

  transform:rotate(-4deg);
}

.thumb-3::after{

  content:"";

  position:absolute;

  left:20%;

  bottom:14%;

  width:26%;

  height:46%;

  background:
    color-mix(
      in srgb,
      var(--accent) 60%,
      #000 15%
    );

  border-radius:
    6px 6px 2px 2px;
}

.thumb-4::after{

  content:"";

  position:absolute;

  left:35%;

  top:10%;

  width:30%;

  height:78%;

  background:
    color-mix(
      in srgb,
      var(--accent) 65%,
      #000 5%
    );

  border-radius:
    30% 30% 6px 6px;
}

.thumb-5::after{

  content:"";

  position:absolute;

  left:32%;

  top:26%;

  width:36%;

  height:48%;

  background:var(--accent) !important;

  border-radius:8px;
}

.thumb-6::after{

  content:"";

  position:absolute;

  left:22%;

  top:30%;

  width:56%;

  height:34%;

  background:
    color-mix(
      in srgb,
      var(--accent) 70%,
      #000 8%
    );

  border-radius:4px;

  transform:rotate(-6deg);
}

.project-meta{

  display:flex;

  gap:1rem;

  align-items:baseline;

  margin-top:1.1rem;
}

.project-meta .num{

  font-family:var(--ff-display);

  color:var(--accent) !important;

  font-weight:600;

  font-size:1.15rem;
}

.project-meta h3{

  font-size:.95rem;

  font-family:var(--ff-body);

  text-transform:uppercase;

  font-weight:600;

  letter-spacing:.03em;

  color:var(--text-primary) !important;
}

.project-meta p{

  font-size:.78rem;

  color:var(--muted-primary) !important;

  margin-top:.2rem;
}


/* =========================================
   ABOUT
   ========================================= */

.about{

  display:grid;

  grid-template-columns:1fr 1.1fr .55fr;

  background:var(--bg-secondary) !important;

  color:var(--text-secondary) !important;

  padding:0;
}

.about-left{

  padding:5rem 4vw;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.about-left h2{

  font-size:clamp(1.8rem,2.6vw,2.3rem);

  margin:.3rem 0 1.4rem;

  color:var(--text-secondary) !important;
}

.about-left h2 span{
  color:var(--text-secondary) !important;
}

.about-text{

  color:var(--muted-secondary) !important;

  font-size:.9rem;

  line-height:1.75;

  max-width:400px;

  margin-bottom:2rem;
}

.about-image{
  min-height:420px;
}

.about-image svg{

  width:100%;

  height:100%;

  object-fit:cover;
}

.about-panel{

  background:var(--accent) !important;

  color:var(--accent-text) !important;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:1.7rem;

  padding:3rem 2.2rem;
}

.panel-item{

  display:flex;

  align-items:center;

  gap:.9rem;

  padding-bottom:1.5rem;

  border-bottom:1px solid rgba(0,0,0,.15);
}

.panel-item:last-child{

  border-bottom:none;

  padding-bottom:0;
}

.panel-item svg{

  width:22px;

  height:22px;

  flex-shrink:0;
}

.panel-item span{

  font-size:.9rem;

  letter-spacing:.04em;

  text-transform:uppercase;

  font-weight:600;
}


/* =========================================
   CONTACT
   ========================================= */

.contact-left{
  max-width:460px;
}

.contact-left h2{

  font-size:clamp(1.9rem,2.8vw,2.4rem);

  margin-bottom:.8rem;

  color:var(--text-primary) !important;
}

.contact-sub{

  color:var(--muted-primary) !important;

  font-size:.9rem;

  max-width:320px;

  line-height:1.7;

  margin-bottom:2.2rem;
}

.contact-info{

  display:flex;

  flex-direction:column;

  gap:1.4rem;
}

.info-item{

  display:flex;

  align-items:center;

  gap:.9rem;
}

.info-item svg{

  width:20px;

  height:20px;

  color:var(--accent) !important;

  flex-shrink:0;
}

.info-item .label{

  display:block;

  font-size:.9rem;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--muted-primary) !important;
}

.info-item strong{

  font-size:.95rem;

  font-weight:500;
}

.bloom-scope-contact{

  display:block;

  font-family:var(--ff-body);
}

.fluentform #fluentform_3 .ff-el-input--label label{

  color:var(--accent) !important;
}


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

.site-footer{

  background:var(--bg-secondary) !important;

  color:var(--text-secondary) !important;

  padding:4rem 6vw 1.6rem;
}

.footer-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:2rem;

  padding-bottom:2.4rem;

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

.footer-nav{

  display:flex;

  gap:1.8rem;

  font-size:.95rem;
}

.footer-nav a{
  color:var(--text-secondary) !important;
}

.footer-nav a:hover{
  color:var(--accent) !important;
}

.footer-social{

  display:none;

  text-align:right;

  font-size:.95rem;

  color:var(--muted-secondary) !important;
}

.social-icons{

  display:flex;

  gap:.8rem;

  margin-top:.6rem;

  justify-content:flex-end;
}

.social-icons a{

  width:32px;

  height:32px;

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

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:.2s;

  color:var(--text-secondary) !important;
}

.social-icons svg{

  width:15px;

  height:15px;
}

.social-icons a:hover{

  border-color:var(--accent) !important;

  color:var(--accent) !important;
}

.footer-bottom{

  display:flex;

  justify-content:space-between;

  padding-top:1.6rem;

  font-size:.78rem;

  color:var(--muted-secondary) !important;

  flex-wrap:wrap;

  gap:.8rem;
}

.footer-legal{

  display:flex;

  gap:1.4rem;
}

.footer-legal a{

  color:var(--muted-secondary) !important;
}

.footer-legal a:hover{

  color:var(--accent) !important;
}


/* =========================================
   WHATSAPP
   ========================================= */

.whatsapp-fab{

  position:fixed;

  bottom:1.6rem;

  right:1.6rem;

  width:52px;

  height:52px;

  border-radius:50%;

  background:#25d366 !important;

  color:#fff !important;

  display:flex;

  align-items:center;

  justify-content:center;

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

  z-index:200;

  transition:transform .2s;
}

.whatsapp-fab:hover{
  transform:scale(1.08);
}

.whatsapp-fab svg{

  width:26px;

  height:26px;

  color:#fff !important;

  fill:#fff !important;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width:1080px){

  .services-grid{
    grid-template-columns:repeat(3,1fr);
    row-gap:2.6rem;
  }

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

  .about-panel{

    grid-column:1/-1;

    flex-direction:row;

    flex-wrap:wrap;

    justify-content:space-around;
  }

  .panel-item{

    border-bottom:none;

    padding-bottom:0;

    flex-direction:column;

    text-align:center;

    gap:.5rem;
  }

}


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

@media (max-width:860px){

  /*
     Navigation remains hidden until burger opens it.
  */

  .main-nav{
    display:none;
  }


  /*
     BURGER VISIBLE ON MOBILE
  */

  .hamburger{

    display:flex !important;

    flex-shrink:0;

    width:38px !important;

    height:38px !important;
  }


  /*
     Keep header controls together.
  */

  .header-controls{

    display:flex !important;

    align-items:center !important;

    gap:.7rem !important;
  }


  /*
     MOBILE LANGUAGE ONLY
     Smaller than desktop.
  */

  .lang-toggle{

    font-size:12px !important;

    gap:.25rem !important;

    letter-spacing:.04em !important;
  }

  .lang-toggle button{

    font-size:12px !important;

    padding:.1rem !important;
  }

  .lang-toggle .sep{

    font-size:10px !important;
  }


  /*
     Keep your theme toggle.
     Just make it slightly compact on mobile.
  */

  .theme-toggle{
    flex-shrink:0 !important;
  }

  .toggle-track{

    width:50px !important;

    height:27px !important;
  }

  .toggle-knob{

    width:21px !important;

    height:21px !important;
  }

  html.dark .toggle-knob{
    transform:translateX(23px);
  }


  /*
     Burger hover/active uses the same
     pistachio accent.
  */

  .hamburger:hover,
  .hamburger.active{

    background:var(--accent) !important;

    border-color:var(--accent) !important;

    color:var(--accent-text) !important;
  }


  /*
     MOBILE NAV DROPDOWN
  */

  .main-nav.open{

    display:flex;

    flex-direction:column;

    position:absolute;

    top:100%;

    left:0;

    right:0;

    background:var(--bg-primary) !important;

    padding:1.5rem 6vw;

    gap:1.2rem;

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

    box-shadow:
      0 15px 30px rgba(0,0,0,.08);

    z-index:999;
  }

  .main-nav.open a{

    width:max-content;

    padding-bottom:.25rem;

    color:var(--text-primary) !important;
  }

  .main-nav.open a:hover{

    color:var(--accent) !important;
  }

  .main-nav.open a.active{

    color:var(--accent) !important;
  }


  /*
     Existing mobile layout
  */

  .hero{

    grid-template-columns:1fr;

    text-align:left;
  }

  .hero-visual{

    order:-1;

    min-height:340px;
  }

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

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

  .about-image{
    min-height:280px;
  }

  .header-cta{
    display:none;
  }

}


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

@media (max-width:560px){

  section{
    padding:4rem 6vw;
  }

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

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

  .footer-social{
    text-align:left;
  }

  .social-icons{
    justify-content:flex-start;
  }

  .footer-bottom{
    flex-direction:column;
  }

}


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

@media (max-width:420px){

  .site-header-bloom{

    padding-left:5vw;

    padding-right:5vw;
  }

  .bloomark-logo-text--compact .bloomark-name{
    font-size:26px;
  }

  .bloomark-logo-text--compact .bloomark-tagline{
    font-size:13px;
  }

  .header-controls{
    gap:.5rem !important;
  }

  .lang-toggle button{
    font-size:12px !important;
  }

  .lang-toggle .sep{
    font-size:10px !important;
  }

  .toggle-track{

    width:46px !important;

    height:25px !important;
  }

  .toggle-knob{

    width:19px !important;

    height:19px !important;
  }

  html.dark .toggle-knob{
    transform:translateX(21px);
  }

  .hamburger{

    width:35px !important;

    height:35px !important;
  }

}


/* =========================================
   FOCUS
   ========================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{

  outline:2px solid var(--accent);

  outline-offset:2px;
}