/*
Theme Name: Ramaguru Modern
Theme URI: https://ramaguru.com
Author: Ramaguru
Description: The modern Ramaguru VoIP and WordPress support website.
Version: 1.1.0
Text Domain: ramaguru-modern
*/

:root { --ink:#13221e; --cream:#f5f1e8; --paper:#fffdf8; --gold:#d68a1f; --gold-deep:#a95f0c; --line:#d8d2c4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); background:var(--paper); position:relative; z-index:10; border-bottom:1px solid rgba(19,34,30,.12); }
.brand { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; letter-spacing:.22em; }
.brand img { width:42px; height:48px; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:clamp(18px,3vw,42px); font-size:14px; }
.site-nav a { padding:12px 0; }
.nav-cta { border-bottom:2px solid var(--gold); }
.hero { min-height:calc(100svh - 92px); position:relative; display:flex; align-items:center; overflow:hidden; background:#233b35; color:#fff; }
.hero-photo { position:absolute; inset:0; background-position:center; background-size:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,27,24,.94) 0%,rgba(10,27,24,.76) 46%,rgba(10,27,24,.18) 78%),linear-gradient(0deg,rgba(10,27,24,.28),transparent 55%); }
.hero-content { width:min(760px,90%); padding:clamp(72px,10vw,140px) clamp(24px,7vw,110px); position:relative; z-index:2; }
.kicker,.section-label { text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:600; }
.kicker { display:flex; align-items:center; gap:12px; color:#f1c77e; }
.kicker span { width:34px; height:1px; background:#f1c77e; }
h1,h2,h3 { margin:0; font-family:"Libre Caslon Display",Georgia,serif; font-weight:400; }
h1 { font-size:clamp(48px,7.3vw,104px); line-height:.98; letter-spacing:-.04em; margin:28px 0 32px; }
h1 em { color:#efb14e; font-weight:400; }
.hero-copy { max-width:590px; font-size:clamp(17px,1.6vw,21px); line-height:1.65; color:rgba(255,255,255,.82); }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:40px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:17px 24px; font-size:14px; font-weight:600; transition:.2s ease; }
.button-gold { background:var(--gold); color:#17221f; }
.button-gold:hover { background:#efb14e; transform:translateY(-2px); }
.text-link { font-size:14px; border-bottom:1px solid rgba(255,255,255,.4); padding:12px 0; }
.text-link span { margin-left:8px; color:#efb14e; }
.hero-note { position:absolute; z-index:3; right:clamp(24px,5vw,76px); bottom:clamp(28px,6vw,80px); border-left:1px solid rgba(255,255,255,.45); padding:4px 0 4px 25px; }
.hero-note span { display:block; text-transform:uppercase; letter-spacing:.16em; font-size:10px; color:#f1c77e; margin-bottom:11px; }
.hero-note strong { font-family:"Libre Caslon Display",Georgia,serif; font-size:22px; font-weight:400; line-height:1.35; }
.intro { display:grid; grid-template-columns:1fr 3fr; gap:40px; padding:clamp(80px,10vw,150px) clamp(24px,7vw,110px) 70px; background:var(--cream); }
.section-label { color:var(--gold-deep); }
.intro h2,.portal h2,.contact h2 { font-size:clamp(38px,5vw,70px); line-height:1.08; letter-spacing:-.03em; max-width:920px; }
.intro > div > p { max-width:630px; color:#56615c; line-height:1.8; font-size:17px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); background:var(--cream); padding:0 clamp(24px,7vw,110px) clamp(80px,10vw,150px); }
.service-card { border-top:1px solid var(--line); border-right:1px solid var(--line); padding:30px 34px 38px 0; min-height:360px; }
.service-card + .service-card { padding-left:34px; }
.service-card:last-child { border-right:0; }
.service-top { display:flex; align-items:center; gap:14px; color:#8b918c; font-size:12px; }
.service-line { height:1px; flex:1; background:var(--line); }
.service-card > p { color:var(--gold-deep); font-size:12px; text-transform:uppercase; letter-spacing:.18em; margin:58px 0 14px; }
.service-card h3 { font-size:clamp(27px,3vw,40px); }
.service-copy { color:#616a65; line-height:1.7; margin-top:24px; max-width:350px; }
.portal { background:#142c27; color:#fff; padding:clamp(80px,10vw,145px) clamp(24px,7vw,110px); display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(60px,10vw,160px); }
.section-label.light { color:#efb14e; }
.portal h2 { margin:22px 0 28px; }
.portal-copy > p:not(.section-label) { color:rgba(255,255,255,.7); max-width:530px; line-height:1.75; }
.button-outline { margin-top:25px; border:1px solid rgba(255,255,255,.55); }
.button-outline:hover { border-color:#efb14e; color:#efb14e; }
.portal-facts { align-self:end; border-top:1px solid rgba(255,255,255,.25); }
.portal-facts > p { text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:#efb14e; margin:24px 0; }
.portal-facts ul { list-style:none; padding:0; margin:0; }
.portal-facts li { padding:17px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:22px; }
.portal-facts li span { color:#efb14e; font-size:12px; }
.contact { padding:clamp(80px,10vw,145px) clamp(24px,7vw,110px); display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:clamp(32px,5vw,75px); }
.contact > img { width:145px; max-height:165px; object-fit:contain; }
.contact h2 { margin:14px 0; }
.contact div > p:last-child { color:#616a65; line-height:1.7; max-width:610px; }
.contact-link { min-width:250px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:22px 0; }
.contact-link span { display:block; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.16em; font-size:10px; margin-bottom:8px; }
.contact-link strong { font-size:16px; }
.site-footer { background:#0d1c19; color:rgba(255,255,255,.62); padding:42px clamp(24px,7vw,110px); display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:12px; }
.footer-brand { color:#fff; }
.footer-brand img { width:32px; height:36px; }
.page-hero { background:#142c27; color:#fff; padding:clamp(80px,10vw,145px) clamp(24px,7vw,110px); }
.page-hero .section-label { color:#efb14e; }
.page-hero h1 { max-width:920px; margin-bottom:24px; }
.page-hero > p:last-child { max-width:700px; color:rgba(255,255,255,.76); font-size:19px; line-height:1.7; }
.content-section { padding:clamp(70px,9vw,125px) clamp(24px,7vw,110px); }
.content-grid { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.6fr); gap:clamp(45px,8vw,120px); }
.content-grid h2 { font-size:clamp(34px,4vw,58px); line-height:1.12; }
.prose { max-width:760px; color:#4f5b56; font-size:17px; line-height:1.8; }
.prose h3 { color:var(--ink); font-size:30px; margin:42px 0 12px; }
.prose h3:first-child { margin-top:0; }
.info-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:60px; border:1px solid var(--line); }
.info-card { background:var(--paper); padding:34px; }
.info-card span { color:var(--gold-deep); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.info-card h3 { font-size:28px; margin:18px 0 12px; }
.info-card p { color:#616a65; line-height:1.7; margin:0; }
.page-cta { background:var(--cream); padding:70px clamp(24px,7vw,110px); display:flex; align-items:center; justify-content:space-between; gap:35px; }
.page-cta h2 { font-size:clamp(32px,4vw,54px); }
.button-dark { background:var(--ink); color:#fff; }
.button-dark:hover { background:var(--gold-deep); }
@media (max-width:800px) {
  .site-header { height:76px; padding:0 20px; }
  .brand { font-size:13px; gap:8px; }
  .brand img { width:34px; height:39px; }
  .site-nav a:not(.nav-cta) { display:none; }
  .hero { min-height:calc(100svh - 76px); align-items:flex-end; }
  .hero-photo { background-position:62% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(10,27,24,.98) 0%,rgba(10,27,24,.78) 56%,rgba(10,27,24,.25) 100%); }
  .hero-content { width:100%; padding:150px 22px 54px; }
  .kicker { line-height:1.6; }
  h1 { margin:20px 0 24px; }
  .hero-copy { font-size:16px; line-height:1.6; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:8px; margin-top:30px; }
  .button { width:100%; }
  .text-link { text-align:center; border:0; }
  .hero-note { display:none; }
  .intro { grid-template-columns:1fr; gap:28px; padding:75px 22px 48px; }
  .intro h2 { font-size:40px; }
  .service-grid { grid-template-columns:1fr; padding:0 22px 75px; }
  .service-card,.service-card + .service-card { padding:26px 0 38px; min-height:0; border-right:0; }
  .service-card > p { margin-top:34px; }
  .portal { grid-template-columns:1fr; padding:75px 22px; gap:55px; }
  .portal h2,.contact h2 { font-size:42px; }
  .contact { grid-template-columns:72px 1fr; padding:75px 22px; gap:20px; }
  .contact > img { width:70px; }
  .contact-link { grid-column:1 / -1; width:100%; margin-top:20px; }
  .site-footer { flex-direction:column; align-items:flex-start; padding:40px 22px; }
  .content-grid { grid-template-columns:1fr; }
  .info-cards { grid-template-columns:1fr; }
  .page-cta { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }