/* =========================================================
   NOVAE — HERO : BUREAU MODERNE EN BOIS
   Scène CSS autonome. Les cartes et le dark mode existant
   restent inchangés.
   ========================================================= */

.home-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent !important;
}

/* warm architectural wall */
.office-scene{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:#dfd0bd;
  pointer-events:none;
}

.office-wall{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.32),transparent 32%,rgba(94,68,43,.07) 100%),
    linear-gradient(180deg,#eee3d3 0%,#dfcfb9 62%,#c7aa84 100%);
}

/* vertical oak slats — the visual cue that makes it read as an office */
.wood-panel{
  position:absolute;
  top:0;
  bottom:34%;
  width:18%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,235,202,.22) 0 2px,
      transparent 2px 26px,
      rgba(91,57,28,.08) 26px 29px,
      transparent 29px 52px),
    linear-gradient(100deg,#b98756,#d2aa78 45%,#a97546);
  box-shadow:inset 0 0 35px rgba(77,48,25,.10);
}
.panel-left{left:0}
.panel-right{right:0;width:15%}

/* large window and daylight */
.office-window{
  position:absolute;
  left:18%;
  right:15%;
  top:8%;
  height:46%;
  overflow:hidden;
  border:10px solid rgba(83,64,46,.12);
  background:#dbe5df;
  box-shadow:0 24px 70px rgba(74,55,36,.13);
}
.window-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 26%,rgba(255,255,255,.92),transparent 17%),
    linear-gradient(145deg,#f5f1e8 0%,#dce7e3 45%,#b8c9c4 100%);
}
.window-pane{
  position:absolute;
  z-index:2;
  background:rgba(255,255,255,.65);
}
.pane-a{left:48%;top:0;bottom:0;width:5px}
.pane-b{left:0;right:0;top:52%;height:5px}

/* unmistakable thick oak desktop */
.wood-desk{
  position:absolute;
  left:6%;
  right:6%;
  bottom:12%;
  height:25%;
  border-radius:8px 8px 2px 2px;
  background:
    repeating-linear-gradient(5deg,
      rgba(255,224,184,.18) 0 2px,
      transparent 2px 17px,
      rgba(86,51,24,.07) 17px 19px,
      transparent 19px 34px),
    linear-gradient(180deg,#c99a65,#ad7645);
  box-shadow:
    0 -15px 35px rgba(71,45,26,.16),
    inset 0 2px 0 rgba(255,240,215,.34),
    inset 0 -15px 25px rgba(72,43,22,.12);
}
.desk-edge{
  position:absolute;
  left:6%;
  right:6%;
  bottom:7%;
  height:7%;
  border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#9b6338,#754628);
  box-shadow:0 18px 35px rgba(55,35,22,.20);
}
.desk-leg{
  position:absolute;
  bottom:-2%;
  width:5%;
  height:15%;
  background:linear-gradient(90deg,#70452b,#a36c42,#674025);
}
.leg-left{left:12%}
.leg-right{right:12%}

/* plant on the desk */
.office-plant{
  position:absolute;
  right:17%;
  bottom:30%;
  width:120px;
  height:145px;
}
.plant-pot{
  position:absolute;
  bottom:0;
  left:33px;
  width:55px;
  height:54px;
  border-radius:7px 7px 17px 17px;
  background:linear-gradient(135deg,#d7c4a9,#9c8466);
  box-shadow:0 8px 18px rgba(55,39,26,.18);
}
.office-plant i{
  position:absolute;
  bottom:42px;
  left:55px;
  width:15px;
  height:78px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(100deg,#55715b,#8ca079);
  transform-origin:bottom;
}
.office-plant i:nth-child(2){transform:rotate(-42deg)}
.office-plant i:nth-child(3){transform:rotate(-24deg);height:92px}
.office-plant i:nth-child(4){transform:rotate(-7deg);height:100px}
.office-plant i:nth-child(5){transform:rotate(17deg);height:91px}
.office-plant i:nth-child(6){transform:rotate(38deg);height:78px}
.office-plant i:nth-child(7){transform:rotate(55deg);height:67px}

/* minimal desk lamp */
.office-lamp{
  position:absolute;
  left:16%;
  bottom:31%;
  width:95px;
  height:125px;
}
.office-lamp span{
  position:absolute;
  left:43px;bottom:0;
  width:5px;height:82px;
  background:#45413b;
  transform:rotate(8deg);
  transform-origin:bottom;
}
.office-lamp b{
  position:absolute;
  left:20px;top:8px;
  width:53px;height:32px;
  border-radius:55px 55px 8px 8px;
  background:#e8dfcf;
  box-shadow:0 7px 20px rgba(255,226,165,.45);
  transform:rotate(-10deg);
}

/* Put hero content on top of the scene and add a subtle readable veil. */
.home-hero .hero-content{
  z-index:3;
}
.home-hero .hero-content:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:min(920px,95vw);
  height:88%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(248,244,237,.92) 0%,rgba(248,244,237,.76) 44%,rgba(248,244,237,0) 76%);
  pointer-events:none;
}

html[data-theme="dark"] .office-scene{
  background:#18201d;
}
html[data-theme="dark"] .office-wall{
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 32%,rgba(0,0,0,.16)),
    linear-gradient(180deg,#27312d 0%,#1d2723 62%,#151c19 100%);
}
html[data-theme="dark"] .wood-panel{
  background:
    repeating-linear-gradient(90deg,
      rgba(231,190,137,.045) 0 2px,
      transparent 2px 26px,
      rgba(0,0,0,.12) 26px 29px,
      transparent 29px 52px),
    linear-gradient(100deg,#5b3d29,#795333 45%,#4b3020);
}
html[data-theme="dark"] .office-window{
  background:#202b28;
  border-color:rgba(255,255,255,.07);
}
html[data-theme="dark"] .window-sky{
  background:
    radial-gradient(circle at 78% 26%,rgba(255,244,213,.15),transparent 17%),
    linear-gradient(145deg,#34413d,#26332f 50%,#1b2522);
}
html[data-theme="dark"] .window-pane{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .wood-desk{
  background:
    repeating-linear-gradient(5deg,
      rgba(231,190,137,.05) 0 2px,
      transparent 2px 17px,
      rgba(0,0,0,.13) 17px 19px,
      transparent 19px 34px),
    linear-gradient(180deg,#6c492e,#4b301f);
}
html[data-theme="dark"] .desk-edge{
  background:linear-gradient(180deg,#3f291b,#261910);
}
html[data-theme="dark"] .desk-leg{background:linear-gradient(90deg,#2a1b13,#523622,#241710)}
html[data-theme="dark"] .office-plant i{background:linear-gradient(100deg,#344c3b,#607b5e)}
html[data-theme="dark"] .plant-pot{background:linear-gradient(135deg,#88745d,#4e4133)}
html[data-theme="dark"] .office-lamp span{background:#77736b}
html[data-theme="dark"] .office-lamp b{background:#b8ad9a;box-shadow:0 7px 20px rgba(255,211,125,.16)}
html[data-theme="dark"] .home-hero .hero-content:before{
  background:radial-gradient(ellipse,rgba(12,18,17,.82) 0%,rgba(12,18,17,.62) 44%,rgba(12,18,17,0) 76%);
}

@media(max-width:700px){
  .office-window{left:8%;right:8%;top:5%;height:38%}
  .wood-panel{display:none}
  .office-plant{right:5%;transform:scale(.78);transform-origin:bottom right}
  .office-lamp{left:5%;transform:scale(.72);transform-origin:bottom left}
  .wood-desk{left:0;right:0;bottom:7%;height:24%}
  .desk-edge{left:0;right:0}
  .desk-leg{display:none}
  .home-hero .hero-content:before{width:115vw}
}

:root{
  --bg:#f7f1e7;
  --surface:#fbf6ee;
  --card:#eee6d9;
  --card-2:#e7dece;
  --text:#171816;
  --muted:#6d6a62;
  --line:#d7cbb9;
  --green:#4f806d;
  --green-bright:#6da88f;
  --cream:#eadbc5;
  --shadow:0 12px 34px rgba(58,47,34,.08);
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080d0d;
  --surface:#0c1212;
  --card:#101917;
  --card-2:#14211e;
  --text:#f2eee6;
  --muted:#a9aaa3;
  --line:#293633;
  --green:#35b38a;
  --green-bright:#54c89d;
  --cream:#15201d;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  transition:background-color .25s ease,color .25s ease;
}
a{text-decoration:none;color:inherit}
button{font:inherit}

.site-header{
  height:78px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7.8%;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,241,231,.92);
  backdrop-filter:blur(16px);
}
html[data-theme="dark"] .site-header{background:rgba(8,13,13,.92)}

.brand{display:flex;gap:12px;align-items:center}
.brand-mark{
  width:40px;height:40px;border:1px solid var(--green);border-radius:9px;
  display:grid;place-items:center;color:var(--green);font-size:16px
}
.brand strong{font-size:18px;font-weight:600;display:block}
.brand i{color:var(--green);font-style:normal}
.brand small{font-size:8px;letter-spacing:2px;color:var(--green);display:block;margin-top:-2px}

nav{display:flex;gap:36px;font-size:13px}
nav a{transition:color .2s}
nav a:hover{color:var(--green)}

.header-actions{display:flex;align-items:center;gap:18px}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--text);cursor:pointer;font-size:20px;
  display:grid;place-items:center;transition:.2s
}
.theme-toggle:hover{border-color:var(--green);color:var(--green)}
.phone-btn,.btn{
  border-radius:7px;padding:12px 20px;font-weight:600;font-size:13px
}
.phone-btn,.primary{background:var(--green);color:#fff}
.phone-btn:hover,.primary:hover{background:var(--green-bright)}
.secondary{border:1px solid var(--line);background:transparent;color:var(--text)}

.hero{
  min-height:525px;
  padding:62px 7.8% 0;
  display:grid;
  grid-template-columns:46% 54%;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-copy{position:relative;z-index:5}
.eyebrow,.kicker{
  font-size:10px;letter-spacing:1.5px;color:var(--green);font-weight:700
}
.eyebrow{
  border:1px solid var(--line);border-radius:20px;padding:7px 13px;display:inline-block;
  background:rgba(255,255,255,.18)
}
.hero h1{
  font:600 clamp(48px,5.1vw,76px)/.94 var(--serif);
  margin:24px 0 20px;letter-spacing:-2px
}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-copy>p{color:var(--muted);font-size:16px}
.hero-buttons{display:flex;gap:12px;margin-top:25px}

.hero-visual{
  position:absolute;right:0;top:0;width:57%;height:100%;overflow:hidden;z-index:1;
  background:#e5d5bd;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)
}
html[data-theme="dark"] .hero-visual{background:#101b19}


.desk-surface{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05),transparent 35%,rgba(255,255,255,.08)),
    linear-gradient(180deg,#c89a68 0%,#b9824d 70%,#98643b 100%);
  box-shadow:inset 0 18px 45px rgba(62,37,19,.08);
}

/* Modern office: warm oak wall / window light behind the desk */
.desk-surface:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      transparent 0 9%,
      rgba(82,55,32,.14) 9% 9.35%,
      transparent 9.35% 28%,
      rgba(82,55,32,.11) 28% 28.35%,
      transparent 28.35% 100%),
    linear-gradient(180deg,
      rgba(255,248,232,.72) 0 48%,
      rgba(188,142,91,.20) 48% 50%,
      rgba(255,255,255,0) 50% 100%);
}

/* Big architectural window / daylight */
.desk-surface .window{
  position:absolute;
  top:0;
  right:0;
  width:48%;
  height:57%;
  border-left:1px solid rgba(62,47,31,.14);
  border-bottom:1px solid rgba(62,47,31,.12);
  background:
    linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.38) 47% 49%,transparent 49% 100%),
    linear-gradient(180deg,transparent 0 47%,rgba(255,255,255,.35) 47% 49%,transparent 49% 100%),
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(224,231,219,.56));
  opacity:.72;
  box-shadow:inset 0 0 80px rgba(255,255,255,.32);
}
.desk-surface .window:after{
  content:"";
  position:absolute;
  inset:-20% -10% 0 10%;
  background:linear-gradient(115deg,transparent 45%,rgba(255,244,214,.25) 46% 58%,transparent 59%);
  transform:skewX(-8deg);
}

/* Thick oak desktop plane */
.desk-surface:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:35%;
  z-index:-1;
  background:
    repeating-linear-gradient(7deg,
      rgba(255,222,177,.11) 0 2px,
      transparent 2px 22px,
      rgba(80,46,23,.055) 22px 24px,
      transparent 24px 42px),
    linear-gradient(180deg,#c99a67,#a97140);
  border-top:1px solid rgba(75,45,24,.18);
  box-shadow:0 -24px 60px rgba(62,39,21,.12);
}

html[data-theme="dark"] .desk-surface{
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 35%,rgba(255,255,255,.04)),
    linear-gradient(180deg,#5b402b 0%,#432d1e 70%,#2c1e15 100%);
}
html[data-theme="dark"] .desk-surface:before{
  background:
    linear-gradient(90deg,
      transparent 0 9%,rgba(220,175,120,.10) 9% 9.35%,
      transparent 9.35% 28%,rgba(220,175,120,.07) 28% 28.35%,
      transparent 28.35% 100%),
    linear-gradient(180deg,rgba(31,42,39,.76) 0 48%,rgba(160,111,65,.13) 48% 50%,transparent 50%);
}
html[data-theme="dark"] .desk-surface .window{
  background:
    linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.09) 47% 49%,transparent 49% 100%),
    linear-gradient(180deg,transparent 0 47%,rgba(255,255,255,.08) 47% 49%,transparent 49% 100%),
    linear-gradient(135deg,#26332f,#1a2522);
  opacity:.82;
}
html[data-theme="dark"] .desk-surface:after{
  background:
    repeating-linear-gradient(7deg,
      rgba(230,180,118,.045) 0 2px,
      transparent 2px 22px,
      rgba(0,0,0,.10) 22px 24px,
      transparent 24px 42px),
    linear-gradient(180deg,#513720,#342317);
  border-top-color:rgba(220,170,110,.10);
}

.window-light{
  position:absolute;right:2%;top:-10%;width:55%;height:72%;
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  filter:blur(1px);
  transform:skewX(-9deg);
}
html[data-theme="dark"] .window-light{opacity:.08}

.macbook{
  position:absolute;
  width:min(520px,62%);
  height:330px;
  left:19%;
  top:104px;
  transform:perspective(900px) rotateY(-4deg) rotateX(1deg) rotate(-1deg);
  filter:drop-shadow(0 30px 22px rgba(0,0,0,.20));
}
.mac-screen{
  position:relative;
  height:252px;
  border:8px solid #242523;
  border-bottom-width:12px;
  border-radius:16px 16px 5px 5px;
  background:linear-gradient(135deg,#f7f2e9,#eee7dc);
  overflow:hidden;
}
.mac-screen:after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.55),transparent 34%);
}
html[data-theme="dark"] .mac-screen{
  border-color:#1e2421;
  background:linear-gradient(135deg,#111715,#202b27);
}
.mac-camera{
  position:absolute;top:4px;left:50%;width:5px;height:5px;
  transform:translateX(-50%);border-radius:50%;background:#111;z-index:2
}
.mac-content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#252722
}
html[data-theme="dark"] .mac-content{color:#eee}
.mac-logo{
  width:58px;height:58px;border:1px solid var(--green);border-radius:12px;
  display:grid;place-items:center;color:var(--green);font-size:26px;margin-bottom:12px
}
.mac-content strong{font-size:21px;font-weight:500}
.mac-content strong b{color:var(--green);font-weight:500}
.mac-content small{font-size:11px;color:#777;margin-top:2px}
html[data-theme="dark"] .mac-content small{color:#a9aaa3}

.mac-base{
  height:78px;margin:0 -5%;position:relative;
  background:linear-gradient(#b9b8b1,#8f8e88);
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);
  border-radius:0 0 13px 13px;
}
html[data-theme="dark"] .mac-base{background:linear-gradient(#555b57,#353a37)}
.keyboard{
  position:absolute;left:17%;right:17%;top:8px;height:38px;border-radius:5px;
  background:
    repeating-linear-gradient(90deg,rgba(25,26,25,.72) 0 18px,transparent 18px 21px),
    repeating-linear-gradient(0deg,rgba(25,26,25,.72) 0 7px,transparent 7px 10px);
  opacity:.7;
}
.trackpad{
  position:absolute;left:41%;bottom:7px;width:18%;height:19px;border:1px solid rgba(70,70,65,.4);
  border-radius:4px
}

.plant{position:absolute;right:8%;top:55px;width:130px;height:225px;z-index:3}
.plant i{
  position:absolute;bottom:48px;left:55px;width:32px;height:125px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,#6f9674,#3f694e);
  transform-origin:bottom center;
}
.plant i:nth-child(1){transform:rotate(-58deg) scale(.85)}
.plant i:nth-child(2){transform:rotate(-40deg)}
.plant i:nth-child(3){transform:rotate(-19deg) scale(.92)}
.plant i:nth-child(4){transform:rotate(2deg) scale(.9)}
.plant i:nth-child(5){transform:rotate(23deg)}
.plant i:nth-child(6){transform:rotate(43deg) scale(.92)}
.plant i:nth-child(7){transform:rotate(59deg) scale(.8)}
.pot{
  position:absolute;left:31px;bottom:0;width:78px;height:62px;
  border-radius:7px 7px 22px 22px;
  background:linear-gradient(90deg,#ad9b7f,#d1bea1,#a79378);
  box-shadow:0 12px 18px rgba(0,0,0,.12)
}
html[data-theme="dark"] .plant i{filter:brightness(.7)}
html[data-theme="dark"] .pot{filter:brightness(.7)}

.mug{
  position:absolute;right:28%;bottom:54px;width:63px;height:72px;z-index:4;
  border-radius:7px 7px 22px 22px;background:#cbb99b;
  box-shadow:0 12px 18px rgba(0,0,0,.12)
}
.mug span{
  position:absolute;right:-19px;top:14px;width:25px;height:35px;
  border:6px solid #cbb99b;border-left:0;border-radius:0 18px 18px 0
}
html[data-theme="dark"] .mug{background:#716b60}
html[data-theme="dark"] .mug span{border-color:#716b60}

.quick-links{
  grid-column:1/-1;display:flex;gap:30px;align-items:center;
  padding:24px 0;font-size:12px;color:var(--muted);position:relative;z-index:6
}
.quick-links span::first-letter{color:var(--green)}

.section{padding:48px 7.8%}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}
.section h2{font:500 31px/1.1 var(--serif);margin:7px 0}
.section-head p{font-size:12px;color:var(--muted);text-align:right}

.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service-grid article{
  border:1px solid var(--line);border-radius:9px;padding:18px 17px 16px;
  min-height:175px;background:var(--card);position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s,background .2s
}
.service-grid article:hover{
  transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green)
}
.service-icon{color:var(--green);font-size:27px;display:block;margin-bottom:5px}
.service-grid small{position:absolute;right:17px;top:17px;color:var(--muted)}
.service-grid h3{font-size:14px;margin:5px 0 8px}
.service-grid p{font-size:11.5px;color:var(--muted);margin:0 0 10px}
.service-grid a,.audience-card a{font-size:12px;color:var(--green);font-weight:600}

.audience{
  display:grid;grid-template-columns:130px 1fr 1fr;gap:16px;padding-top:0
}
.audience-heading{padding-top:12px}
.audience-heading h2{font-size:25px}
.audience-heading>p{grid-column:1/-1}
.audience-grid{display:contents}
.audience-card{
  border:1px solid var(--line);border-radius:9px;padding:20px;
  display:grid;grid-template-columns:45px 1fr;gap:10px;background:var(--card);
  transition:.2s
}
.audience-card:hover{border-color:var(--green);box-shadow:var(--shadow)}
.round-icon{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--green);background:var(--surface)
}
.audience-card h3{margin:0;font:500 22px var(--serif)}
.audience-card p{font-size:11px;color:var(--muted)}
.audience-card .lead{margin:2px 0 8px;color:var(--text);font-size:12px}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:18px 0 12px}
.mini-grid span{border:1px solid var(--line);border-radius:6px;padding:7px;font-size:10px;background:var(--card-2)}
.mini-grid b,.mini-grid small{display:block}
.mini-grid small{font-size:8px;color:var(--muted);margin-top:2px}

.why{padding-top:10px}
.why-grid{display:grid;grid-template-columns:repeat(6,1fr);margin-top:20px}
.why-grid div{text-align:center;padding:0 16px;border-right:1px solid var(--line)}
.why-grid div:last-child{border:0}
.why-grid span{font-size:27px;color:var(--green)}
.why-grid h3{font-size:12px}
.why-grid p{font-size:10px;color:var(--muted)}

.cta{
  margin:10px 7.8% 30px;padding:18px 25px;border:1px solid var(--line);
  border-radius:9px;background:var(--card-2);display:flex;align-items:center;gap:20px
}
.cta-icon{
  width:60px;height:60px;border:1px solid var(--green);border-radius:16px;
  display:grid;place-items:center;color:var(--green);font-size:25px
}
.cta>div:nth-child(2){flex:1}
.cta h2{font-size:21px;margin:0 0 3px}
.cta p{font-size:11px;color:var(--muted);margin:0}
.cta .secondary{margin-left:-8px}

footer{
  border-top:1px solid var(--line);padding:28px 7.8%;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px;font-size:11px
}
footer>div{display:flex;flex-direction:column;gap:5px}
footer b{margin-bottom:6px}
footer p{color:var(--muted);margin:7px 0}
footer small,footer span{color:var(--muted)}
.footer-brand{position:relative}
.footer-brand .brand-mark{position:relative;width:30px;height:30px;font-size:12px}
.footer-brand strong{position:absolute;left:42px;top:3px;font-size:15px}

@media (max-width:1100px){
  .site-header{padding:0 5%}
  .hero,.section,footer{padding-left:5%;padding-right:5%}
  .cta{margin-left:5%;margin-right:5%}
  nav{gap:22px}
  .hero{grid-template-columns:48% 52%}
  .macbook{left:10%;width:66%}
  .plant{right:3%}
}

@media (max-width:850px){
  nav{display:none}
  .hero{grid-template-columns:1fr;min-height:760px;padding-top:45px}
  .hero-visual{top:auto;bottom:0;width:100%;height:355px;clip-path:none}
  .macbook{left:26%;top:65px;width:49%;height:260px}
  .mac-screen{height:198px}
  .mac-base{height:60px}
  .plant{right:7%;top:30px;transform:scale(.82);transform-origin:bottom right}
  .mug{right:24%;bottom:42px;transform:scale(.82)}
  .quick-links{position:absolute;left:5%;right:5%;bottom:345px;flex-wrap:wrap;gap:14px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .audience{display:block}
  .audience-heading{margin-bottom:18px}
  .audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .why-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .why-grid div:nth-child(3){border-right:0}
  footer{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  .site-header{height:70px}
  .header-actions{gap:8px}
  .phone-btn{padding:10px 12px;font-size:11px}
  .hero{min-height:770px}
  .hero h1{font-size:45px}
  .desktop{display:none}
  .hero-buttons{flex-wrap:wrap}
  .quick-links{bottom:350px}
  .macbook{left:14%;width:66%;top:88px}
  .plant{right:1%;transform:scale(.68)}
  .mug{right:16%}
  .service-grid,.audience-grid{grid-template-columns:1fr}
  .section{padding-top:40px;padding-bottom:40px}
  .section-head{display:block}
  .section-head p{text-align:left;margin-top:16px}
  .mini-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .why-grid div:nth-child(3){border-right:1px solid var(--line)}
  .why-grid div:nth-child(even){border-right:0}
  .cta{margin:0 5% 25px;flex-wrap:wrap}
  .cta>div:nth-child(2){min-width:100%}
  .cta .secondary{margin-left:0}
  footer{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}


/* =========================================================
   HERO — MODERN WOOD OFFICE ART
   This is intentionally a full scene, not a wood texture.
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-office-art{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-office-art svg{
  display:block;
  width:100%;
  height:100%;
}
.hero-office-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(247,242,234,.92) 0%,rgba(247,242,234,.62) 31%,rgba(247,242,234,.10) 58%,rgba(247,242,234,.02) 100%),
    linear-gradient(180deg,rgba(247,242,234,.10),rgba(247,242,234,.02) 55%,rgba(247,242,234,.20));
}
html[data-theme="dark"] .hero-office-art:after{
  background:
    linear-gradient(90deg,rgba(8,13,13,.91) 0%,rgba(8,13,13,.68) 31%,rgba(8,13,13,.16) 58%,rgba(8,13,13,.04) 100%),
    linear-gradient(180deg,rgba(8,13,13,.20),rgba(8,13,13,.04) 55%,rgba(8,13,13,.34));
}
html[data-theme="dark"] .hero-office-art svg{
  filter:brightness(.58) saturate(.82);
}
.hero-visual{
  position:absolute;
  right:0;
  top:0;
  width:57%;
  height:100%;
  overflow:hidden;
  z-index:2;
}
@media(max-width:800px){
  .hero-office-art:after{
    background:linear-gradient(180deg,rgba(247,242,234,.90),rgba(247,242,234,.45) 60%,rgba(247,242,234,.16));
  }
  html[data-theme="dark"] .hero-office-art:after{
    background:linear-gradient(180deg,rgba(8,13,13,.91),rgba(8,13,13,.52) 60%,rgba(8,13,13,.22));
  }
}


/* FINAL STACKING FIX: office background visible, content remains clickable */
.hero-office-art{z-index:0!important}
.hero-copy{position:relative;z-index:5}
.hero-visual{z-index:2}
.quick-links{z-index:6}
.hero-office-art svg{position:absolute;inset:0}
\n\n/* =========================================================\n   NOVAE — HERO A-Z FINAL\n   Modern wood office, Mac, plant and daylight.\n   ========================================================= */\n.hero{\n  grid-template-columns:46% 54%;\n  min-height:560px;\n  padding-top:58px;\n  isolation:isolate;\n}\n.hero-copy{max-width:620px;padding-top:18px}\n.hero-visual{\n  position:absolute!important;right:0;top:0;width:61%;height:100%;\n  overflow:hidden;z-index:1;background:transparent!important;clip-path:none!important;\n}\n.hero-visual:before{\n  content:"";position:absolute;inset:0;\n  background:linear-gradient(90deg,var(--bg) 0%,rgba(247,241,231,.58) 18%,rgba(247,241,231,.02) 52%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(119,82,46,.12));\n  z-index:8;pointer-events:none;\n}\nhtml[data-theme="dark"] .hero-visual:before{\n  background:linear-gradient(90deg,var(--bg) 0%,rgba(8,13,13,.72) 18%,rgba(8,13,13,.06) 52%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.20));\n}\n.office-backdrop{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#f2e8d8 0%,#e2d0b8 64%,#b98552 64%,#a56e3e 100%)}\n.office-backdrop:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 26%,rgba(255,255,255,.75),transparent 25%),linear-gradient(90deg,rgba(255,255,255,.24),transparent 45%,rgba(87,55,30,.08));}\n.oak-slats{position:absolute;top:0;bottom:36%;width:18%;background:repeating-linear-gradient(90deg,rgba(255,231,198,.22) 0 2px,transparent 2px 25px,rgba(75,45,25,.12) 25px 29px,transparent 29px 52px),linear-gradient(100deg,#9e673d,#d0a16d 45%,#9b633a);box-shadow:inset 0 0 30px rgba(69,42,24,.12)}\n.oak-left{left:0}.oak-right{right:0;width:14%}\n.office-window{position:absolute;left:16%;right:14%;top:8%;height:51%;border:10px solid rgba(90,70,50,.12);background:#dce8e4;box-shadow:0 25px 60px rgba(75,52,31,.13);overflow:hidden}\n.sky{position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,#fff 0 5%,rgba(255,255,255,.45) 18%,transparent 30%),linear-gradient(135deg,#f8f3e9,#dfe9e4 52%,#baccc6)}\n.window-v{position:absolute;top:0;bottom:0;left:48%;width:6px;background:rgba(255,255,255,.72)}\n.window-h{position:absolute;left:0;right:0;top:52%;height:6px;background:rgba(255,255,255,.72)}\n.window-glow{position:absolute;inset:-20% 20% 0 -10%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);transform:skewX(-8deg)}\n.wood-desk-top{position:absolute;left:4%;right:4%;bottom:17%;height:25%;border-radius:9px 9px 3px 3px;background:repeating-linear-gradient(6deg,rgba(255,226,184,.13) 0 2px,transparent 2px 18px,rgba(72,42,21,.07) 18px 20px,transparent 20px 36px),linear-gradient(180deg,#d0a06b,#ae7543);box-shadow:0 -18px 40px rgba(70,42,23,.15),inset 0 2px rgba(255,240,216,.35)}\n.wood-desk-front{position:absolute;left:4%;right:4%;bottom:10%;height:8%;background:linear-gradient(#9c6339,#754626);box-shadow:0 18px 30px rgba(55,35,21,.18)}\n.desk-leg{position:absolute;bottom:-1%;width:5%;height:15%;background:linear-gradient(90deg,#6d4226,#a56b40,#654024)}.dl{left:11%}.dr{right:11%}\n.desk-lamp{position:absolute;left:12%;bottom:39%;width:100px;height:135px;z-index:4}.desk-lamp span{position:absolute;left:45px;bottom:0;width:5px;height:85px;background:#44423d;transform:rotate(8deg);transform-origin:bottom}.desk-lamp b{position:absolute;left:20px;top:6px;width:55px;height:34px;border-radius:55px 55px 8px 8px;background:#e7dcc9;transform:rotate(-10deg);box-shadow:0 8px 22px rgba(255,222,159,.45)}\n.plant{position:absolute;right:7%;bottom:31%;width:125px;height:220px;z-index:5}.plant i{position:absolute;bottom:45px;left:53px;width:28px;height:125px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#759b77,#3c654c);transform-origin:bottom}.plant i:nth-child(1){transform:rotate(-58deg) scale(.82)}.plant i:nth-child(2){transform:rotate(-40deg)}.plant i:nth-child(3){transform:rotate(-21deg) scale(.92)}.plant i:nth-child(4){transform:rotate(0deg) scale(.9)}.plant i:nth-child(5){transform:rotate(22deg)}.plant i:nth-child(6){transform:rotate(43deg) scale(.9)}.plant i:nth-child(7){transform:rotate(59deg) scale(.78)}.pot{position:absolute;left:28px;bottom:0;width:76px;height:62px;border-radius:7px 7px 21px 21px;background:linear-gradient(90deg,#ad9b7f,#d0bea2,#a28d73);box-shadow:0 12px 20px rgba(0,0,0,.12)}\n.mug{position:absolute;right:26%;bottom:22%;width:57px;height:66px;border-radius:7px 7px 20px 20px;background:#cdbb9f;z-index:5;box-shadow:0 10px 17px rgba(0,0,0,.12)}.mug span{position:absolute;right:-18px;top:13px;width:24px;height:34px;border:6px solid #cdbb9f;border-left:0;border-radius:0 18px 18px 0}\n.macbook{position:absolute;left:21%;top:37%;width:min(500px,58%);height:300px;z-index:6;transform:perspective(900px) rotateY(-4deg) rotateX(1deg) rotate(-1deg);filter:drop-shadow(0 28px 22px rgba(0,0,0,.23))}.mac-screen{position:relative;height:228px;border:8px solid #252624;border-bottom-width:11px;border-radius:16px 16px 5px 5px;background:linear-gradient(135deg,#f8f3eb,#eee7dc);overflow:hidden}.mac-camera{position:absolute;top:4px;left:50%;width:5px;height:5px;transform:translateX(-50%);border-radius:50%;background:#111;z-index:2}.mac-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#262823}.mac-logo{width:56px;height:56px;border:1px solid #4f806d;border-radius:12px;display:grid;place-items:center;color:#4f806d;font-size:24px;margin-bottom:11px}.mac-content strong{font-size:20px;font-weight:500}.mac-content strong b{color:#4f806d;font-weight:500}.mac-content small{font-size:10px;color:#777;margin-top:2px}.mac-base{height:72px;margin:0 -5%;position:relative;background:linear-gradient(#c0bfba,#8f8e89);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);border-radius:0 0 13px 13px}.keyboard{position:absolute;left:17%;right:17%;top:8px;height:35px;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(25,26,25,.72) 0 18px,transparent 18px 21px),repeating-linear-gradient(0deg,rgba(25,26,25,.72) 0 7px,transparent 7px 10px);opacity:.7}.trackpad{position:absolute;left:41%;bottom:7px;width:18%;height:18px;border:1px solid rgba(70,70,65,.4);border-radius:4px}\nhtml[data-theme="dark"] .office-backdrop{background:linear-gradient(180deg,#28322f 0%,#1d2723 64%,#604128 64%,#3c281b 100%)}\nhtml[data-theme="dark"] .oak-slats{background:repeating-linear-gradient(90deg,rgba(231,190,137,.05) 0 2px,transparent 2px 25px,rgba(0,0,0,.13) 25px 29px,transparent 29px 52px),linear-gradient(100deg,#513622,#795333 45%,#422b1c)}\nhtml[data-theme="dark"] .office-window{border-color:rgba(255,255,255,.07);background:#26332f}.dark .sky{}\nhtml[data-theme="dark"] .sky{background:radial-gradient(circle at 78% 22%,rgba(255,244,213,.16),transparent 18%),linear-gradient(135deg,#34423d,#26332f 52%,#1b2522)}\nhtml[data-theme="dark"] .window-v,html[data-theme="dark"] .window-h{background:rgba(255,255,255,.09)}\nhtml[data-theme="dark"] .wood-desk-top{background:repeating-linear-gradient(6deg,rgba(230,180,118,.05) 0 2px,transparent 2px 18px,rgba(0,0,0,.12) 18px 20px,transparent 20px 36px),linear-gradient(#704b2e,#4a301f)}\nhtml[data-theme="dark"] .wood-desk-front{background:linear-gradient(#452b1b,#28190f)}\nhtml[data-theme="dark"] .desk-leg{background:linear-gradient(90deg,#2a1b13,#523622,#241710)}\nhtml[data-theme="dark"] .desk-lamp span{background:#77736b}html[data-theme="dark"] .desk-lamp b{background:#b8ad9a;box-shadow:0 8px 20px rgba(255,211,125,.15)}\nhtml[data-theme="dark"] .plant i{filter:brightness(.68)}html[data-theme="dark"] .pot{filter:brightness(.7)}html[data-theme="dark"] .mug{background:#716b60}html[data-theme="dark"] .mug span{border-color:#716b60}\nhtml[data-theme="dark"] .mac-screen{border-color:#1e2421;background:linear-gradient(135deg,#111715,#202b27)}html[data-theme="dark"] .mac-content{color:#eee}html[data-theme="dark"] .mac-content small{color:#aaa}\n@media(max-width:850px){.hero{grid-template-columns:1fr;min-height:720px;padding-top:50px}.hero-copy{z-index:10}.hero-visual{top:250px;width:100%;height:470px}.hero-visual:before{background:linear-gradient(180deg,var(--bg) 0%,rgba(247,241,231,.45) 25%,rgba(247,241,231,0) 50%)}html[data-theme="dark"] .hero-visual:before{background:linear-gradient(180deg,var(--bg) 0%,rgba(8,13,13,.48) 25%,rgba(8,13,13,0) 50%)}.quick-links{position:absolute;left:7.8%;right:7.8%;bottom:0;flex-wrap:wrap;gap:12px 22px}.macbook{left:17%;top:32%;width:55%}.plant{right:4%;transform:scale(.8);transform-origin:bottom right}.desk-lamp{left:4%;transform:scale(.8);transform-origin:bottom left}}\n@media(max-width:560px){.hero{min-height:690px;padding-left:6%;padding-right:6%}.hero h1{font-size:45px}.hero-copy>p br.desktop{display:none}.hero-buttons{flex-direction:column;align-items:flex-start}.hero-visual{top:260px;height:430px}.office-window{left:8%;right:8%;height:48%}.oak-left,.oak-right{display:none}.wood-desk-top{left:0;right:0}.wood-desk-front{left:0;right:0}.desk-leg{display:none}.macbook{left:10%;width:65%;top:34%}.plant{right:0;transform:scale(.65);bottom:28%}.desk-lamp{left:0;transform:scale(.62);bottom:36%}.mug{right:24%;bottom:18%}.quick-links{left:6%;right:6%;font-size:10px;gap:8px 14px}}\n

/* =========================================================
   NOVAE — DARK MODE FINAL OVERRIDE
   ========================================================= */
html[data-theme="dark"] body{background:#080d0d!important;color:#f2eee6!important}
html[data-theme="dark"] .site-header{background:rgba(8,13,13,.94)!important;border-bottom-color:#293633!important}
html[data-theme="dark"] .hero{background:#080d0d!important;border-bottom-color:#293633!important}
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-copy h2,
html[data-theme="dark"] .hero-copy strong,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .why-card h3,
html[data-theme="dark"] .why-mini strong,
html[data-theme="dark"] .category-main h3,
html[data-theme="dark"] .category-side h3{color:#f2eee6!important}
html[data-theme="dark"] p,
html[data-theme="dark"] .hero-copy>p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .why-card p,
html[data-theme="dark"] .why-mini p,
html[data-theme="dark"] .category-main>p,
html[data-theme="dark"] .category-side>p{color:#a9aaa3!important}
html[data-theme="dark"] .section-alt{background:#0c1212!important;border-color:#293633!important}
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .why-mini,
html[data-theme="dark"] .category-main,
html[data-theme="dark"] .category-side,
html[data-theme="dark"] .mini-card{
  background:linear-gradient(145deg,#101917,#0c1413)!important;
  border-color:#293b36!important;
  box-shadow:0 18px 45px rgba(0,0,0,.25)!important;
}
html[data-theme="dark"] .home-card:hover,
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .why-mini:hover{
  border-color:rgba(84,200,157,.55)!important;
}
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .theme-toggle{
  background:#101917!important;
  color:#f2eee6!important;
  border-color:#33453f!important;
}
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer{background:#050909!important;border-top-color:#293633!important}
html[data-theme="dark"] .footer-col h4{color:#f2eee6!important}
html[data-theme="dark"] .footer-col p,
html[data-theme="dark"] .footer-col a{color:#8f9b96!important}
html[data-theme="dark"] .cta-final{
  background:radial-gradient(circle at 50% 100%,rgba(53,179,138,.12),transparent 55%),#0b1211!important;
  border-color:#293633!important;
}
html[data-theme="dark"] .hero-tags span{background:rgba(255,255,255,.035)!important;color:#a9aaa3!important;border-color:#293633!important}
html[data-theme="dark"] .home-card-icon,
html[data-theme="dark"] .hero-symbol{background:rgba(53,179,138,.08)!important;border-color:rgba(84,200,157,.30)!important}
html[data-theme="dark"] .hero-visual:before{background:linear-gradient(90deg,#080d0d 0%,rgba(8,13,13,.86) 30%,rgba(8,13,13,.15) 70%,rgba(8,13,13,0) 100%)!important}
html[data-theme="dark"] .home-hero .hero-content:before{background:radial-gradient(ellipse,rgba(8,13,13,.90) 0%,rgba(8,13,13,.62) 44%,rgba(8,13,13,0) 76%)!important}
html[data-theme="light"] .hero-visual:before{background:linear-gradient(90deg,#f7f1e7 0%,rgba(247,241,231,.84) 30%,rgba(247,241,231,.12) 70%,rgba(247,241,231,0) 100%)!important}
html[data-theme="light"]{color-scheme:light}