
:root{--green:#0f6b42;--dark:#0b2b20;--mint:#e9f8ef;--lime:#b6efc9;--text:#17332a;--muted:#5f746c;--line:#d8eadf;--white:#fff;--shadow:0 18px 50px rgba(11,43,32,.12)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);line-height:1.6;background:#fbfffc}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}.container{width:min(1120px,92%);margin:auto}.narrow{max-width:860px}.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;gap:12px;align-items:center;color:var(--dark)}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--green),#20a464);color:white;font-weight:800}.brand small{display:block;color:var(--muted);font-size:12px}.main-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.main-nav a{font-size:14px;color:var(--text);font-weight:600}.main-nav a.active,.main-nav a:hover{color:var(--green)}.menu-toggle{display:none}.hero{padding:86px 0;background:radial-gradient(circle at top right,#c8f6d7,transparent 30%),linear-gradient(135deg,#f7fff9,#e9f8ef)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--green);font-size:13px}h1{font-size:clamp(38px,5vw,64px);line-height:1.04;margin:10px 0 20px;color:var(--dark)}h2{font-size:clamp(28px,3vw,42px);line-height:1.15;color:var(--dark)}h3{color:var(--dark)}.lead{font-size:20px;color:#35564a}.hero-actions,.split{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 21px;font-weight:800;border:2px solid transparent;cursor:pointer}.btn.primary{background:var(--green);color:white}.btn.secondary{border-color:var(--green);color:var(--green);background:white}.btn.light{background:white;color:var(--green)}.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.trust-row span{background:white;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}.image-card{background:linear-gradient(135deg,#fff,#f2fff6);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:28px}.dashboard-mock{height:360px;border-radius:24px;background:white;border:1px solid var(--line);padding:20px}.mock-top{height:38px;border-radius:14px;background:linear-gradient(90deg,var(--green),#7edb9b);margin-bottom:22px}.mock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mock-grid span{height:54px;border-radius:14px;background:var(--mint);border:1px solid var(--line)}.mock-chart{height:120px;margin-top:22px;border-radius:18px;background:linear-gradient(135deg,#dff7e7,#a8ecc0)}.section{padding:72px 0}.section.soft{background:var(--mint)}.section-intro{max-width:780px;color:var(--muted);font-size:18px}.cards{display:grid;gap:22px}.cards.three{grid-template-columns:repeat(3,1fr)}.card,.price-card,.contact-form,.contact-panel{background:white;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 10px 28px rgba(11,43,32,.06)}.card.case span{font-weight:800;color:var(--green)}.green-band{background:linear-gradient(135deg,var(--green),#168a55);color:white}.green-band h2{color:white}.green-band p{color:#eafff0}.split{justify-content:space-between}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-list div{background:var(--mint);border:1px solid var(--line);border-radius:18px;padding:20px}.feature-list span{display:block;color:var(--muted)}.page-hero{padding:76px 0;background:linear-gradient(135deg,#f7fff9,#e9f8ef)}.two-col,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:start}.tick-list{padding-left:0;list-style:none}.tick-list li{margin:10px 0;padding-left:28px;position:relative}.tick-list li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.side-visual{min-height:300px}.spreadsheet-illustration{height:250px;border-radius:22px;background:linear-gradient(135deg,#ffffff,#dff7e7),repeating-linear-gradient(0deg,transparent,transparent 27px,#d8eadf 28px),repeating-linear-gradient(90deg,transparent,transparent 79px,#d8eadf 80px)}.price-card .price{font-size:34px;font-weight:900;color:var(--green)}.price-card.featured{border:2px solid var(--green);transform:translateY(-8px)}.article{max-width:820px;font-size:18px}.contact-form label{display:block;font-weight:800;margin-bottom:16px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:14px;padding:13px;font:inherit}.form-note{font-size:13px;color:var(--muted)}.site-footer{background:var(--dark);color:#eafff0;padding:48px 0}.site-footer h3{color:white}.site-footer a{color:#b6efc9}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media(max-width:850px){.menu-toggle{display:block;background:var(--green);color:white;border:0;border-radius:10px;padding:10px}.main-nav{display:none;position:absolute;left:4%;right:4%;top:72px;background:white;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}.main-nav.open{display:flex}.hero-grid,.two-col,.contact-grid,.footer-grid{grid-template-columns:1fr}.cards.three,.feature-list{grid-template-columns:1fr}h1{font-size:40px}.hero{padding:56px 0}.section{padding:52px 0}}

.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Compact consultancy navigation */
.header-inner{gap:18px}
.main-nav{gap:10px;flex-wrap:nowrap}
.main-nav a,.nav-dropbtn{font-size:13px;white-space:nowrap}
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropbtn{border:0;background:transparent;color:var(--text);font-weight:700;cursor:pointer;padding:8px 0;font-family:inherit}
.nav-dropbtn.active,.nav-dropbtn:hover{color:var(--green)}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:245px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px;z-index:30}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:grid;gap:2px}
.nav-dropdown-menu a{display:block;padding:10px 12px;border-radius:12px;color:var(--text)}
.nav-dropdown-menu a:hover{background:var(--mint);text-decoration:none;color:var(--green)}
.nav-cta{background:var(--green);color:#fff!important;border-radius:999px;padding:10px 14px!important;font-weight:800}
.nav-cta:hover{text-decoration:none;background:#168a55}

/* Bigger homepage spreadsheet visual */
.hero-wide{padding:78px 0 88px}
.hero-grid-wide{grid-template-columns:.92fr 1.08fr;gap:44px}
.spreadsheet-photo-card{background:#ffffff;border:1px solid var(--line);border-radius:30px;box-shadow:0 24px 70px rgba(11,43,32,.18);overflow:hidden;transform:none;min-height:500px}
.spreadsheet-toolbar{height:52px;background:linear-gradient(90deg,#0f6b42,#1fa463);display:flex;align-items:center;gap:9px;padding:0 18px;color:#fff}
.spreadsheet-toolbar span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.72)}
.spreadsheet-toolbar strong{margin-left:8px;font-size:14px}
.spreadsheet-formula{font-family:Consolas,monospace;background:#f7fbf8;border-bottom:1px solid var(--line);padding:12px 18px;color:#315549;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spreadsheet-table{width:100%;border-collapse:collapse;font-size:15px}
.spreadsheet-table th{background:#e9f8ef;color:#0b2b20;text-align:left;padding:13px 12px;border:1px solid #d8eadf}
.spreadsheet-table td{padding:12px;border:1px solid #e3eee7;color:#17332a}
.spreadsheet-table tr:nth-child(even) td{background:#fbfffc}
.spreadsheet-table td:nth-child(2),.spreadsheet-table td:nth-child(3),.spreadsheet-table td:nth-child(4){font-weight:700}
.spreadsheet-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;background:#f7fff9}
.spreadsheet-summary div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.spreadsheet-summary small{display:block;color:var(--muted);font-weight:700}
.spreadsheet-summary strong{font-size:20px;color:var(--green)}

@media(max-width:1050px){
  .main-nav{gap:8px}
  .brand small{display:none}
  .main-nav a,.nav-dropbtn{font-size:12px}
  .nav-cta{padding:9px 11px!important}
}
@media(max-width:850px){
  .main-nav{flex-wrap:wrap}
  .nav-dropdown{display:block;width:100%}
  .nav-dropbtn{padding:10px 0}
  .nav-dropdown-menu{position:static;display:grid;box-shadow:none;border:0;padding:0 0 0 12px;background:transparent}
  .nav-cta{display:inline-flex;margin-top:8px}
  .hero-grid-wide{grid-template-columns:1fr}
  .spreadsheet-photo-card{transform:none;min-height:auto}
  .spreadsheet-table{font-size:13px}
  .spreadsheet-summary{grid-template-columns:1fr}
}

.header-phone{font-weight:800;color:var(--green)!important;white-space:nowrap;font-size:13px}
.header-phone:hover{text-decoration:underline}
.hero-contact{margin-top:16px;font-weight:800;color:var(--dark)}
.hero-contact a{color:var(--green)}
@media(max-width:1050px){.header-phone{font-size:12px}}
@media(max-width:850px){.header-phone{display:block;padding:8px 0}}

.responsive-visual{display:block;width:100%;height:auto;border-radius:22px}

/* AI training menu adjustment */
.main-nav{gap:14px; flex-wrap:wrap;}
.main-nav a{white-space:nowrap;}
.responsive-visual{max-width:100%;height:auto;display:block;}

.responsive-visual{display:block;width:100%;height:auto;border-radius:22px}
.side-visual{display:flex;align-items:center;justify-content:center;min-height:300px}
.spreadsheet-illustration{width:100%;min-height:280px;border-radius:22px;background-image:url("assets/excel-ai-visual.png");background-size:contain;background-position:center;background-repeat:no-repeat}

/* Final image sizing fix: make the homepage/training illustrations fill the white card neatly */
.image-card.side-visual{
  min-height: 460px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.image-card.side-visual img,
.responsive-visual{
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: 18px;
}
.hero .image-card.side-visual img,
.hero .responsive-visual{
  width: 108%;
}
.two-col .image-card.side-visual{
  min-height: 420px;
}
.two-col .image-card.side-visual img,
.two-col .responsive-visual{
  width: 108%;
}
@media (max-width: 900px){
  .image-card.side-visual{min-height: 280px;padding: 10px;}
  .hero .image-card.side-visual img,
  .hero .responsive-visual,
  .two-col .image-card.side-visual img,
  .two-col .responsive-visual{width: 100%;}
}

/* Corrected visual card fit: keep infographic at its natural 16:9 shape so it fills the box without big empty space */
.image-card.side-visual{
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border-radius: 30px;
}
.image-card.side-visual img,
.image-card.side-visual .responsive-visual,
.two-col .image-card.side-visual img,
.two-col .responsive-visual,
.hero .image-card.side-visual img,
.hero .responsive-visual{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}
@media (max-width: 900px){
  .image-card.side-visual{
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
  }
}

/* FINAL VISUAL FIX: source images are 3:2, so the card must match 3:2. No cropping. */
.image-card.side-visual{
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.image-card.side-visual img,
.image-card.side-visual .responsive-visual,
.two-col .image-card.side-visual img,
.two-col .responsive-visual,
.hero .image-card.side-visual img,
.hero .responsive-visual{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 30px !important;
}
@media (max-width: 900px){
  .image-card.side-visual{aspect-ratio: 3 / 2 !important;}
}

/* HARD RESET FOR HERO/TRAINING IMAGES - no crop, no forced height, no zoom */
.image-card.side-visual,
.hero .image-card.side-visual,
.two-col .image-card.side-visual {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px !important;
  overflow: visible !important;
  display: block !important;
  background: #ffffff !important;
  border-radius: 30px !important;
}

.image-card.side-visual img,
.image-card.side-visual .responsive-visual,
.hero .image-card.side-visual img,
.hero .responsive-visual,
.two-col .image-card.side-visual img,
.two-col .responsive-visual {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 20px !important;
  transform: none !important;
}

/* give the image column enough room on desktop */
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 0.95fr 1.05fr !important; gap: 56px !important; }
  .two-col { grid-template-columns: 0.95fr 1.05fr !important; }
}

@media (max-width: 900px) {
  .image-card.side-visual,
  .hero .image-card.side-visual,
  .two-col .image-card.side-visual { padding: 12px !important; }
}
