/* Fromosa B.V. — website styles */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&display=swap');

:root{
  --bg:#F7F8F9;
  --panel:#EEF1F2;
  --ink:#1E2225;
  --muted:#6b7276;
  --line:rgba(0,0,0,0.08);
  --turq:#02C3C2;
  --turq-deep:#02A9A8;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:"Archivo",sans-serif;font-weight:500;color:var(--ink);margin:0;line-height:1.18;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.narrow{max-width:720px;margin-left:auto;margin-right:auto;}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,248,249,0.92);backdrop-filter:saturate(120%) blur(6px);border-bottom:0.5px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;}
.nav-home{justify-content:center;position:relative;}
.wordmark{font-weight:500;font-size:16px;letter-spacing:0.28em;color:var(--ink);padding-left:0.28em;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-size:12.5px;letter-spacing:0.10em;color:var(--muted);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink);}
.nav-home .menu-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);}
.menu-toggle svg{width:24px;height:24px;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:transparent;color:var(--ink);font-size:11.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:14px 30px;border-radius:2px;border:1px solid var(--turq);cursor:pointer;transition:background .2s,color .2s,transform .1s;}
.btn:hover{background:var(--turq);color:#08302F;}
.btn:active{transform:scale(0.98);}
.link-arrow{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);display:inline-block;}
.link-arrow .a{color:var(--turq-deep);transition:margin .2s;}
.link-arrow:hover .a{margin-left:4px;}

/* ---------- Name hero ---------- */
.hero-name{padding:78px 0 66px;text-align:center;}
.masthead{font-weight:500;font-size:clamp(40px,11vw,78px);letter-spacing:0.26em;color:var(--ink);line-height:1;padding-left:0.26em;}
.tag{color:var(--muted);font-size:clamp(14px,1.7vw,17px);margin:26px auto 30px;max-width:370px;}

/* ---------- Text hero (inner pages headline) ---------- */
.hero-text{padding:90px 0 78px;text-align:center;}
.hero-text h1{font-size:clamp(30px,4.6vw,48px);max-width:640px;margin:0 auto;}
.hero-text p{color:var(--muted);font-size:clamp(15px,1.7vw,18px);margin:22px auto 32px;max-width:440px;}

/* ---------- Photo bands ---------- */
.photo-band{width:100%;height:clamp(300px,56vh,580px);background-size:cover;background-position:center;}
.photo-top{background-image:url('images/hero-top.jpg');background-position:center;}
.photo-containers{background-image:url('images/hero-containers.jpg');}

/* ---------- Sections ---------- */
.section{padding:88px 0;}
.section.tight{padding:64px 0;}
.section.panel{background:var(--panel);}
.eyebrow{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#9aa1a4;margin-bottom:22px;}
.section h2{font-size:clamp(24px,3.2vw,34px);}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.55;max-width:720px;color:#3a4043;}
.section p.body{color:var(--muted);font-size:16px;max-width:640px;}
.center{text-align:center;}
.center .lead,.center .body,.center .eyebrow{margin-left:auto;margin-right:auto;}

/* ---------- Two paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px;}
.path-card{border:0.5px solid var(--line);border-radius:10px;padding:34px 30px;background:var(--bg);}
.path-card .k{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#3a4043;margin-bottom:14px;}
.path-card h3{font-size:21px;margin-bottom:18px;}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:18px;}
.value h3{font-size:13px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:10px;}
.value p{color:var(--muted);font-size:14px;margin:0;line-height:1.55;}

/* ---------- Benefits ---------- */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:14px;}
.benefit h3{font-size:16px;margin-bottom:8px;}
.benefit p{color:var(--muted);font-size:14.5px;margin:0;}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px;}
.step{border-top:2px solid var(--turq);padding-top:18px;}
.step .n{font-size:18px;font-weight:500;color:var(--turq-deep);margin-bottom:8px;}
.step h3{font-size:16px;margin-bottom:6px;}
.step p{color:var(--muted);font-size:14px;margin:0;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-top:16px;}
.faq-item{border-bottom:0.5px solid var(--line);padding:22px 0;}
.faq-item h3{font-size:16px;font-weight:500;margin-bottom:6px;}
.faq-item p{color:var(--muted);font-size:14.5px;margin:0;}

/* ---------- Contact form ---------- */
.form{max-width:560px;margin-top:12px;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.radios{display:flex;gap:14px;}
.radios label{display:inline-flex;align-items:center;gap:8px;border:0.5px solid var(--line);border-radius:2px;padding:12px 18px;cursor:pointer;color:var(--ink);font-size:14px;text-transform:none;letter-spacing:0;}
.input,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#FCFDFD;border:0.5px solid var(--line);border-radius:2px;padding:13px 15px;}
.input:focus,textarea:focus{outline:none;border-color:var(--turq);}
textarea{min-height:130px;resize:vertical;}

/* ---------- Legal ---------- */
.legal{padding:70px 0 90px;}
.legal h1{font-size:clamp(28px,4vw,40px);margin-bottom:10px;}
.legal .meta{color:var(--muted);font-size:13.5px;margin-bottom:40px;}
.legal h2{font-size:21px;margin:36px 0 12px;}
.legal h3{font-size:16px;font-weight:500;margin:22px 0 8px;}
.legal p,.legal li{color:#454b4e;font-size:14.5px;}
.legal ul{padding-left:20px;}

/* ---------- CTA ---------- */
.cta{padding:88px 0;text-align:center;}
.cta h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:12px;}
.cta p{color:var(--muted);margin-bottom:26px;}
.cta .email{display:block;margin-top:16px;font-size:13.5px;color:var(--muted);}

/* ---------- Footer ---------- */
.site-footer{border-top:0.5px solid var(--line);padding:38px 0;}
.footer-row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;}
.footer-legal{font-size:12px;color:var(--muted);line-height:1.7;letter-spacing:0.02em;}
.footer-links{display:flex;gap:20px;font-size:12px;}
.footer-links a{color:var(--muted);}
.footer-links a:hover{color:var(--ink);}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .container{padding:0 22px;}
  .section{padding:58px 0;}
  .cta{padding:58px 0;}
  .paths,.values,.benefits,.steps{grid-template-columns:1fr;gap:20px;}
  .masthead{letter-spacing:0.14em;padding-left:0.14em;font-size:clamp(34px,15vw,60px);}
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg);border-bottom:0.5px solid var(--line);padding:6px 22px 16px;z-index:60;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 0;font-size:15px;width:100%;border-bottom:0.5px solid var(--line);}
  .nav-links a:last-child{border-bottom:0;}
  .menu-toggle{display:block;}
  .photo-band{height:clamp(240px,42vh,420px);}
}