/* Ambergrade LLP: shared styles for all pages */
:root{
  --shadow:#0d2327;
  --deep:#143a40;
  --rule-d:#2a565c;
  --fog:#eef2f1;
  --paper:#ffffff;
  --ink:#122123;
  --muted:#4c5f61;
  --muted-d:#a9c2c4;
  --amber:#e9a93a;
  --amber-ink:#8a5a00;
  --maroon:#9d2235;
  --maroon-deep:#7a1727;
  --maroon-tint:#f7eaec;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--ink);background:var(--fog);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.sec{padding:clamp(60px,8vw,108px) 0}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.02em}

/* Header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(13,35,39,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-d)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:21px;color:#fff;letter-spacing:-.01em}
.brand-mark{width:20px;height:20px;border-radius:50%;background:linear-gradient(90deg,var(--deep) 50%,var(--amber) 50%);box-shadow:0 0 0 1.5px var(--amber)}
.brand span{font-weight:500;color:var(--muted-d)}
.site-nav{display:flex;align-items:center;gap:30px;font-family:var(--display);font-weight:500;font-size:15px}
.site-nav a{color:var(--muted-d);transition:color .2s}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff}
.site-nav a[aria-current="page"]:not(.nav-cta){box-shadow:0 2px 0 var(--amber);padding-bottom:4px}
.site-nav .nav-cta{color:var(--shadow);background:var(--amber);padding:8px 18px;border-radius:999px;font-weight:600}
.site-nav .nav-cta:hover{color:var(--shadow);background:#f3bb55}
.site-nav a{white-space:nowrap}
@media(max-width:700px){.site-nav{gap:16px;font-size:14px}.brand{font-size:18px}.site-nav .nav-cta{padding:7px 14px}}
@media(max-width:520px){
  .site-nav{gap:14px;font-size:13.5px}
  .site-nav a:not(.nav-cta):not([href="valodo.html"]){display:none}
  .site-head .brand > span:not(.brand-mark){display:none}
  .site-nav .nav-cta{padding:7px 13px}
}

/* Buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-amber{background:var(--amber);color:var(--shadow)}
.btn-amber:hover{background:#f3bb55}
.btn-line{border-color:var(--rule-d);color:#fff}
.btn-line:hover{border-color:var(--amber);color:var(--amber)}
.btn-ink{border-color:var(--ink);color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:#fff}
.btn-maroon{background:var(--maroon);color:#fff}
.btn-maroon:hover{background:var(--maroon-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* Titles and page headers */
.sec-title{font-weight:800;font-size:clamp(30px,4vw,48px);max-width:16em;margin-bottom:clamp(28px,4vw,48px)}
.pg{padding:clamp(52px,8vw,104px) 0 clamp(40px,6vw,72px)}
.pg h1{font-weight:800;font-size:clamp(38px,5.4vw,72px);max-width:13em;margin-bottom:20px}
.pg p{max-width:34em;font-size:clamp(18px,1.7vw,21px)}
.pg--fog{background:var(--fog)}
.pg--fog p{color:var(--muted)}
.pg--paper{background:var(--paper)}
.pg--paper p{color:var(--muted)}
.pg--dark{background:var(--shadow);color:#fff}
.pg--dark p{color:var(--muted-d)}

/* Badge */
.v-status{display:inline-block;font-family:var(--display);font-weight:600;font-size:14px;background:var(--maroon-tint);color:var(--maroon);padding:5px 14px;border-radius:999px}

/* Service rows (home + services overview) */
.svc-list{list-style:none;border-top:1.5px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:5fr 7fr;gap:24px;padding:28px 0;border-bottom:1px solid #c9d3d2;transition:padding-left .25s,background .25s}
.svc-row:hover{padding-left:14px;background:rgba(233,169,58,.1)}
.svc-row h3{font-weight:700;font-size:clamp(24px,2.6vw,34px)}
.svc-row p{color:var(--muted);max-width:34em}
@media(max-width:760px){.svc-row{grid-template-columns:1fr;gap:8px}}

/* Call to action band */
.cta{background:var(--deep);color:#fff}
.cta h2{font-weight:800;font-size:clamp(30px,4.4vw,56px);margin-bottom:24px;max-width:13em}
.cta p{color:var(--muted-d);margin-bottom:22px;max-width:32em}
.cta-mail{display:inline-block;font-family:var(--display);font-weight:700;font-size:clamp(24px,3.6vw,44px);letter-spacing:-.02em;color:var(--amber);border-bottom:3px solid var(--amber);line-height:1.2;word-break:break-word}
.cta-mail:hover{color:#f6c46f;border-color:#f6c46f}
.cta--maroon{background:var(--maroon-deep)}
.cta--maroon p{color:#f0cdd3}
.cta--maroon .cta-mail{color:#fff;border-color:#fff}
.cta--maroon .cta-mail:hover{color:#f7eaec;border-color:#f7eaec}

/* Footer */
.foot{background:var(--shadow);color:var(--muted-d);padding:40px 0;font-family:var(--display);font-size:14px;line-height:1.7}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:start}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot .brand{font-size:18px;margin-bottom:10px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-weight:500;font-size:15px}
.foot-nav a{color:#fff}
.foot-nav a:hover{color:var(--amber)}
.foot-legal{grid-column:1/-1;border-top:1px solid var(--rule-d);padding-top:20px}
