:root{
  --bg:#f5f4f1;
  --ink:#272320;
  --muted:#625c55;
  --gold:#c28514;
  --gold2:#e1b45b;
  --line:#e5ded3;
  --shadow:0 16px 44px rgba(81,62,34,.11);
  --max:1484px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(circle at 78% 10%,rgba(225,180,91,.12),transparent 30%),
    linear-gradient(180deg,#f8f7f4 0%,#efede8 100%);
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 20px));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:10px;background:#111;color:#fff;padding:8px 12px;border-radius:8px;z-index:100}
.skip-link:focus{left:10px}

/* Pure image-built header; invisible link zones keep the site usable without duplicating visible nav text */
.site-header{padding:10px 0 0;position:relative;z-index:30}
.header-art{position:relative}
.header-art img{width:100%;height:auto}
.header-hotspots a{
  position:absolute;top:0;height:100%;
  display:block;text-indent:-9999px;overflow:hidden;
}
.header-hotspots a:focus{outline:3px solid rgba(194,133,20,.55);outline-offset:-12px;border-radius:20px}
.hot-home{left:33.5%;width:7%}
.hot-portfolio{left:41%;width:9%}
.hot-press{left:51%;width:8.5%}
.hot-partners{left:61%;width:9.5%}
.hot-compliance{left:72%;width:10.5%}
.hot-contact{left:84%;width:7.5%}
.hot-inquiries{right:1.5%;width:13%}

/* Hero is a custom asset made specifically for the layout */
.hero-section{padding:0}
.hero-art{position:relative;margin-top:-2px}
.hero-art img{width:100%;height:auto;border-radius:0}
.hero-actions-overlay a{
  position:absolute;left:5.6%;bottom:10.2%;width:13.3%;height:7.8%;
  display:block;text-indent:-9999px;border-radius:18px;
}
.hero-actions-overlay a:focus{outline:3px solid rgba(194,133,20,.55)}

/* Portfolio frame: image is the frame; cards are placed into the clean inner window */
.portfolio-section{padding:0;margin-top:-18px}
.portfolio-frame{
  position:relative;
  aspect-ratio:2244/701;
  max-width:var(--max);
  margin-inline:auto;
}
.portfolio-frame > .frame-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;
}
.portfolio-track{
  position:absolute;
  left:6.2%;
  right:6.2%;
  top:23.4%;
  height:60.8%;
  display:flex;
  gap:1.15%;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:0;
}
.portfolio-track::-webkit-scrollbar{display:none}
.portfolio-card{
  flex:0 0 calc((100% - 4.6%) / 5);
  min-width:0;
  background:linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
  border:1px solid rgba(202,163,86,.22);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(50,36,18,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.portfolio-thumb{
  width:100%;
  height:39%;
  background:#f4f2ef;
  overflow:hidden;
}
.portfolio-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.portfolio-body{
  flex:1;
  text-align:center;
  padding:9px 13px 10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.portfolio-body h3{
  font-family:var(--serif);
  font-size:clamp(15px,1.55vw,22px);
  line-height:1.05;
  font-weight:500;
  letter-spacing:-.035em;
  margin:2px 0 5px;
  white-space:nowrap;
}
.portfolio-body .type{
  font-size:clamp(8px,.75vw,12px);
  font-weight:850;
  letter-spacing:.105em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
  white-space:nowrap;
}
.portfolio-body p{
  margin:0 auto;
  color:#3f3a35;
  font-size:clamp(10px,.86vw,13px);
  line-height:1.42;
  max-width:96%;
}

/* Invisible controls only; the frame artwork supplies the visible arrows, so no duplicate arrows appear */
.frame-control{
  position:absolute;top:38%;height:30%;width:5%;
  border:0;background:transparent;color:transparent;cursor:pointer;z-index:5;
}
.frame-control.prev{left:0}
.frame-control.next{right:0}
.frame-control:focus{outline:3px solid rgba(194,133,20,.40);border-radius:50%}

/* Lower feature cards built to match preview without using oversized raster panels */
.feature-section{padding:8px 0 10px}
.feature-grid{
  width:min(calc(var(--max) - 92px),calc(100% - 72px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.feature-card{
  min-height:132px;
  background:linear-gradient(180deg,#fff 0%,#faf8f5 100%);
  border:1px solid rgba(202,163,86,.18);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(50,36,18,.07);
  padding:15px 18px 13px;
  display:grid;
  grid-template-columns:66px 1fr;
  gap:12px;
}
.feature-icon{
  color:var(--gold);
  font-size:48px;
  line-height:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}
.feature-card h4{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.feature-card p{
  margin:0 0 8px;
  color:#4f4942;
  font-size:13px;
  line-height:1.45;
}
.feature-card a{
  color:var(--gold);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12px;
}

/* Footer image */
.site-footer{padding:0 0 13px}
.footer-art{position:relative}
.footer-art img{width:100%;height:auto}
.footer-hotspots a{position:absolute;top:0;height:100%;display:block;text-indent:-9999px;overflow:hidden}
.footer-hotspots a:focus{outline:3px solid rgba(194,133,20,.45);outline-offset:-14px}
.foot-linkedin{right:12.4%;width:3.5%}
.foot-x{right:7.7%;width:3.5%}
.foot-email{right:2.8%;width:3.5%}

/* Subpages */
.subpage-main{min-height:58vh}
.subpage-hero{padding:42px 7% 24px}
.subpage-hero h1{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.04em;
  font-size:clamp(42px,5vw,72px);
}
.subpage-hero p{font-size:18px;line-height:1.58;color:var(--muted);max-width:850px;margin:0}
.content-wrap{padding:0 7% 42px}
.content-card{
  background:linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
  border:1px solid rgba(202,163,86,.20);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:18px;
}
.content-card h2{font-family:var(--serif);font-weight:500;font-size:34px;margin:0 0 12px}
.content-card p,.content-card li{color:#4f4942;line-height:1.65}
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.site-shot{height:210px;border-radius:14px;overflow:hidden;margin-bottom:12px;background:#f6f2ea}
.site-shot img{width:100%;height:100%;object-fit:cover;object-position:center top}
.form-grid{display:grid;gap:13px}
label{font-weight:800;color:#403a34}
input,textarea{width:100%;font:inherit;border:1px solid #ddd3c4;border-radius:14px;padding:13px;background:#fff;color:#272320}
textarea{min-height:150px}
button.submit{border:0;border-radius:14px;padding:14px 18px;background:linear-gradient(180deg,#e5b850,#c58d22);color:#fff;font-weight:850;cursor:pointer}

@media(max-width:980px){
  .container{width:min(100% - 14px,var(--max))}
  .portfolio-section{margin-top:-8px}
  .portfolio-frame{aspect-ratio:auto;height:450px;background:linear-gradient(180deg,#fff,#f7f4ef);border:2px solid rgba(194,133,20,.35);border-radius:24px;box-shadow:var(--shadow);padding-top:74px}
  .portfolio-frame > .frame-bg{display:none}
  .portfolio-frame::before{content:"OUR PORTFOLIO";position:absolute;top:22px;left:50%;transform:translateX(-50%);color:var(--gold);font-weight:900;letter-spacing:.12em}
  .portfolio-track{left:18px;right:18px;top:74px;bottom:20px;height:auto;gap:14px}
  .portfolio-card{flex:0 0 245px}
  .portfolio-thumb{height:130px}
  .portfolio-body h3{font-size:20px}
  .portfolio-body .type{font-size:10px}
  .portfolio-body p{font-size:12px}
  .feature-grid{grid-template-columns:1fr 1fr;width:min(100% - 28px,var(--max))}
  .feature-card{grid-template-columns:50px 1fr}.feature-icon{font-size:38px}
}
@media(max-width:640px){
  .header-hotspots,.footer-hotspots{display:none}
  .hero-actions-overlay{display:none}
  .feature-grid{grid-template-columns:1fr}
  .portfolio-frame{height:430px}
  .portfolio-card{flex:0 0 82vw}
  .content-grid{grid-template-columns:1fr}
}