/* Public storefront home — marketing layout, driven by --brand / --accent. */
.sf { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #4a4a4a; }

/* Public marketing header: sticky, aligned to the 1100px content column, refined
   nav. The horizontal padding equals the gutter that centers the content, so the
   brand lines up with the hero and sections while the white bar stays full width. */
.topbar-light { position: sticky; top: 0; z-index: 50; border-bottom: 0;
  padding: .8rem max(1.25rem, calc((100% - 1100px) / 2)); box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.topbar-light .brand { font-family: Montserrat, sans-serif; font-weight: 900; letter-spacing: .01em; font-size: 1.15rem; }
.topbar-light nav { gap: 1.9rem; }
.topbar-light nav a { font-family: Montserrat, sans-serif; font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.topbar-light nav a:hover { color: #1b1f24; text-decoration: none; }
@media (max-width: 768px) { .topbar-light { padding: .7rem 1.1rem; } }
.sf h1, .sf h2, .sf h3, .sf h4, .sf .sf-eyebrow, .sf .sf-btn { font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sf section { padding: 4rem 1rem; }
.sf .sf-inner { max-width: 1100px; margin: 0 auto; }

/* Hero */
.sf-hero { position: relative; background: var(--brand); color: #fff; overflow: hidden; min-height: 60vh; display: flex; align-items: center; border-bottom: 6px solid var(--accent); }
.sf-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .25; }
.sf-hero .sf-inner { position: relative; z-index: 1; width: 100%; }
/* White panel behind the hero logo so a dark/navy logo reads on the brand background. */
.sf-hero .herologo { display: inline-block; height: 84px; background: #fff; padding: .9rem 1.3rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.22); margin-bottom: 1.25rem; }
.sf-eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; margin: 0 0 .75rem; }
.sf-hero h1 { font-weight: 900; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 .85rem; color: #fff; max-width: 20ch; }
.sf-tagline { font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: #e3e6eb; margin: 0 0 2rem; max-width: 42ch; }
.sf-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.sf-btn { display: inline-block; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 2px; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease; }
.sf-btn:hover { transform: translateY(-2px); text-decoration: none; }
.sf-btn-accent { background: var(--accent); color: var(--brand); }
.sf-btn-accent:hover { background: #fff; color: var(--brand); }
.sf-btn-ghost { border: 2px solid rgba(255,255,255,.8); color: #fff; }
.sf-btn-ghost:hover { background: #fff; color: var(--brand); }

/* Pillars */
.sf-pillars { background: #fff; border-bottom: 1px solid #f0f0f0; }
.sf-pillars .sf-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.sf-pillar { display: flex; gap: .9rem; align-items: flex-start; }
.sf-pillar-mark { flex-shrink: 0; width: 14px; height: 14px; margin-top: .35rem; background: var(--accent); transform: rotate(45deg); }
.sf-pillar h4 { color: var(--brand); font-size: 1.05rem; margin: 0 0 .25rem; }
.sf-pillar p { margin: 0; font-size: .92rem; }

/* Services */
.sf-services { background: #f9f9f9; }
.sf-section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.sf-section-head h2 { color: var(--brand); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; margin: 0 0 1rem; }
.sf-rule { width: 64px; height: 4px; background: var(--accent); margin: 0 auto 1rem; }
.sf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.75rem; }
.sf-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 2rem; display: flex; flex-direction: column; transition: box-shadow .25s ease; }
.sf-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.sf-card h3 { color: var(--brand); font-size: 1.35rem; margin: 0 0 .75rem; }
.sf-card p { margin: 0 0 1.25rem; line-height: 1.65; flex: 1; }
.sf-card a { font-family: Montserrat, sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .05em; color: var(--brand); text-decoration: none; }
.sf-card a:hover { color: var(--accent); }

/* Testimonials */
.sf-quotecard .stars { color: var(--accent); font-size: 1.1rem; letter-spacing: .15em; margin: 0 0 .5rem; }
.sf-quotecard p { font-style: italic; }
.sf-quotename { font-family: Montserrat, sans-serif; font-style: normal !important; font-weight: 700; color: var(--brand); margin-top: auto; }

/* Mission (blueprint band) */
.sf-mission { background-color: var(--brand); color: #fff; text-align: center;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 20px 20px; }
.sf-mission blockquote { font-family: Montserrat, sans-serif; font-weight: 700; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.5; color: #f1f3f6; max-width: 820px; margin: 1rem auto 2rem; }
.sf-mission .sf-rule { background: var(--accent); opacity: .6; width: 48px; height: 2px; }

/* Detail facts strip */
.sf-facts { background: #fff; }
.sf-facts .sf-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.sf-fact h4 { color: var(--brand); margin: 0 0 .35rem; font-size: 1rem; }
.sf-fact p, .sf-fact dl { margin: 0; font-size: .95rem; }
.sf-fact dt { font-weight: 600; color: var(--brand); }
.sf-fact dd { margin: 0 0 .4rem; }

/* CTA band */
.sf-ctaband { background: #fff; text-align: center; border-top: 1px solid #f0f0f0; }
.sf-ctaband h2 { color: var(--brand); font-weight: 900; font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 .75rem; }
.sf-ctaband p { max-width: 640px; margin: 0 auto 2rem; }
.sf-checks { margin-top: 2rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: #6a6a6a; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* Inner public pages (showcase, contact, login, project portal) */
.sf-page { background: #f9f9f9; padding: 2.5rem 1rem 4rem; }
.sf-page .sf-inner { max-width: 1100px; }  /* align with the header + home sections */

/* Contact: form + reach-us, so it fills the column instead of sitting alone-left */
.sf-contact { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 1.5rem; align-items: start; }
.sf-contact .card { margin-top: 0; }
.sf-contact-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.sf-contact-aside .sf-fact dt { margin-top: .5rem; }
.sf-reassure p { margin: 0; }
@media (max-width: 720px) { .sf-contact { grid-template-columns: 1fr; } }
.sf-page h1 { font-weight: 900; color: var(--brand); font-size: clamp(1.7rem, 4vw, 2.4rem); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 1.25rem; }
.sf-page h2 { font-weight: 700; color: var(--brand); font-size: 1.2rem; }
.sf-page .card { border-radius: 2px; border: 1px solid #f0f0f0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.sf-page .btn { font-family: Montserrat, sans-serif; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 2px; background: var(--accent); color: var(--brand); }
.sf-page .btn:hover { background: var(--brand); color: #fff; }
.sf-page .tile { border-radius: 2px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .25s ease; }
.sf-page .tile:hover { box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.sf-page .nextstep { border-left-color: var(--accent); }

/* Footer */
.sf-footer { background: var(--brand); color: #aeb6c2; font-size: .85rem; padding: 3rem 1rem; }
.sf-footer .sf-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.sf-footer strong { color: #fff; font-family: Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sf-footer a { color: #d7dce3; }