/* XSquare Media — HUTS-inspired editorial redesign
   Keeps original content/SEO structure while changing the visual system. */
:root{
  --h-cream:#f2efe4;
  --h-paper:#f7f4ea;
  --h-green:#294632;
  --h-leaf:#6f9b48;
  --h-olive:#87966a;
  --h-ink:#173326;
  --h-line:rgba(41,70,50,.20);
  --h-white:#fffdf7;
  --h-radius:4px;
}
html{background:var(--h-cream)}
body{
  font-family:"DM Sans",Arial,sans-serif!important;
  background:var(--h-cream)!important;
  color:var(--h-ink)!important;
  line-height:1.55!important;
}
body:before{content:none!important}
.container{width:min(1380px,calc(100% - 64px))!important}

/* Editorial display typography */
h1,h2,.hero h1,.section h2,.contact-copy h2,.process-intro h2,.section-heading h2{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:-.045em!important;
  color:inherit;
}
h3,h4,h5{font-weight:600}
.section h2,.section-heading h2,.contact-copy h2,.process-intro h2{font-size:clamp(40px,5.2vw,76px)!important;line-height:.98!important}
p{font-size:16px}

/* Header — slim, transparent, HUTS-like */
.site-header{
  position:absolute!important;
  min-height:86px!important;
  height:auto!important;
  background:linear-gradient(to bottom,rgba(10,25,15,.56),rgba(10,25,15,0))!important;
  border:0!important;
  box-shadow:none!important;
}
.nav-wrap{min-height:86px!important;height:auto!important;gap:24px!important}
.brand-logo{width:190px!important;filter:grayscale(1) brightness(0) invert(1)!important}
.main-nav{gap:28px!important}
.main-nav>a,.nav-dropdown-trigger>a{font-size:15px!important;font-weight:700!important;letter-spacing:.02em!important;color:#fff!important}
.main-nav a:hover{opacity:.72}
.header-cta,.nav-cta,.site-header .btn{
  border-radius:999px!important;background:#8fb65b!important;color:#173326!important;
  padding:11px 18px!important;box-shadow:none!important;border:0!important;
}
.nav-dropdown-menu{background:var(--h-paper)!important;border:1px solid var(--h-line)!important;border-radius:3px!important;box-shadow:none!important}
.nav-dropdown-menu a{color:var(--h-ink)!important}
.menu-toggle{color:#fff!important}

/* Home hero — photographic, calm, high-impact */
.hero{
  min-height:92vh!important;
  padding:150px 0 80px!important;
  background:
    linear-gradient(180deg,rgba(15,32,20,.18),rgba(15,32,20,.52)),
    url('/assets/images/hangout-bench-portfolio.webp') center 18%/cover no-repeat!important;
  color:#fff!important;
  display:flex;align-items:center;
}
.hero-grid-pattern{display:none!important}
.hero-grid{display:block!important;text-align:center!important}
.hero-copy{max-width:1050px!important;margin:0 auto!important}
.hero-copy .eyebrow{display:none!important}
.hero-copy h1{
  max-width:1050px!important;margin:0 auto 26px!important;
  font-size:clamp(58px,7.7vw,116px)!important;line-height:.88!important;
  letter-spacing:-.055em!important;text-shadow:0 2px 18px rgba(0,0,0,.15);
}
.hero-copy>p{max-width:670px!important;margin:0 auto!important;font-size:17px!important;color:rgba(255,255,255,.92)!important}
.hero-actions{justify-content:center!important;margin:30px 0!important}
.hero-actions .btn-primary,.hero .btn-primary{
  background:#8fb65b!important;color:#173326!important;border-radius:999px!important;
  padding:13px 21px!important;box-shadow:none!important;text-transform:none!important;
}
.hero-actions .btn-light,.hero .btn-light{background:rgba(255,255,255,.96)!important;color:var(--h-ink)!important;border-radius:999px!important}
.hero-proof{justify-content:center!important;border:0!important;margin-top:45px!important;padding-top:0!important;gap:48px!important}
.hero-proof strong{font-family:"DM Serif Display",Georgia,"Times New Roman",serif;font-size:18px!important;font-weight:400!important}
.hero-proof span{color:rgba(255,255,255,.75)!important;font-size:10px!important;text-transform:uppercase;letter-spacing:.08em}
.hero-visual{display:none!important}

/* General section system */
.section{padding:120px 0!important;background:var(--h-cream)}
.section:nth-of-type(even){background:var(--h-paper)}
.trust-strip{background:var(--h-cream)!important;border:0!important;padding:45px 0!important}
.trust-strip p{color:var(--h-green)!important;font-size:10px!important}
.industry-row{color:var(--h-green)!important;border-top:1px solid var(--h-line);border-bottom:1px solid var(--h-line);padding:22px 0}
.industry-row i{color:var(--h-leaf)!important}
.section-kicker,.eyebrow{color:var(--h-green)!important;font-size:10px!important;letter-spacing:.13em!important}
.section-kicker:before{content:"";width:26px;height:1px;background:currentColor;display:inline-block;margin-right:8px;vertical-align:middle}
.lead,.section-heading p,.feature-copy p{color:rgba(23,51,38,.72)!important}
.two-col,.split-feature{gap:90px!important}
.text-link,.service-card a,.project-cta{color:var(--h-green)!important;border-bottom:1px solid var(--h-green)!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.06em}

/* Cards */
.service-grid{gap:0!important;border-top:1px solid var(--h-line);border-left:1px solid var(--h-line);margin-top:65px!important}
.service-card,.service-card.featured{
  background:transparent!important;color:var(--h-ink)!important;border:0!important;
  border-right:1px solid var(--h-line)!important;border-bottom:1px solid var(--h-line)!important;
  border-radius:0!important;padding:42px 34px 48px!important;box-shadow:none!important;min-height:330px;
}
.service-card:hover{background:#e8ead9!important;color:var(--h-ink)!important;transform:none!important;box-shadow:none!important}
.service-card>i{color:var(--h-leaf)!important;font-size:29px!important}
.service-card h3,.service-card:hover h3{font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;font-weight:400!important;color:var(--h-ink)!important;font-size:31px!important}
.service-card p,.service-card:hover p,.service-card.featured p,.service-card.featured:hover p{color:rgba(23,51,38,.68)!important}
.service-number,.service-card:hover .service-number{color:rgba(23,51,38,.42)!important}
.service-card:hover a{color:var(--h-green)!important;border-color:var(--h-green)!important}

/* Dark section becomes deep forest */
.dark-section{background:var(--h-green)!important;color:var(--h-paper)!important}
.dark-section .section-kicker,.dark-section .section-kicker.light{color:#b8d387!important}
.dark-section p,.dark-section .feature-copy p,.dark-section .check-list span{color:rgba(247,244,234,.72)!important}
.dark-section .check-list i{background:rgba(184,211,135,.16)!important;color:#b8d387!important}
.dashboard-window{border-radius:2px!important;box-shadow:none!important;transform:none!important;background:#e9e6db!important}
.dash-sidebar{background:#1d3828!important}.dash-sidebar b{color:#b8d387!important}
.dash-title button{background:#8fb65b!important}.chart div{border-color:#8fb65b!important;background:linear-gradient(to top,rgba(143,182,91,.18),transparent)!important}

/* Portfolio: big editorial image panels */
.work-section{background:var(--h-paper)!important}
.portfolio-grid-two{grid-template-columns:1fr!important;gap:72px!important;margin-top:55px!important}
.project-card{border:0!important;border-top:1px solid var(--h-line)!important;border-radius:0!important;background:transparent!important;display:grid;grid-template-columns:1.35fr .65fr;align-items:stretch}
.project-browser.real-project-preview{min-height:560px!important;background:#d8d8cf!important;border-radius:0!important}
.project-screenshot{height:560px!important;object-fit:cover!important}
.project-info{padding:48px!important;display:flex;flex-direction:column;justify-content:center}
.project-info>span{color:var(--h-green)!important;font-size:10px!important;letter-spacing:.13em!important}
.project-info h3{font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;font-weight:400!important;font-size:clamp(38px,4vw,62px)!important;line-height:1!important}
.project-info p{font-size:16px!important;color:rgba(23,51,38,.7)!important}
.project-tags span{border:1px solid var(--h-line)!important;background:transparent!important;color:var(--h-green)!important;border-radius:999px!important;font-size:11px!important}

/* Process / stats / FAQs */
.process-grid,.number-grid{gap:0!important;border-top:1px solid var(--h-line);border-left:1px solid var(--h-line)}
.process-grid article,.number-grid>*{border-radius:0!important;border:0!important;border-right:1px solid var(--h-line)!important;border-bottom:1px solid var(--h-line)!important;background:transparent!important;box-shadow:none!important}
.faq-item{border-bottom:1px solid var(--h-line)!important}
.faq-question{font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;font-size:22px!important;color:var(--h-ink)!important}

/* Contact */
.contact-section{background:#dce2cc!important;padding:110px 0!important}
.contact-card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.contact-form{background:var(--h-paper)!important;border:1px solid var(--h-line)!important;border-radius:2px!important;box-shadow:none!important}
.contact-form input,.contact-form select,.contact-form textarea{background:transparent!important;border:0!important;border-bottom:1px solid var(--h-line)!important;border-radius:0!important;color:var(--h-ink)!important}
.contact-form .btn,.form-submit .btn{background:var(--h-green)!important;color:var(--h-paper)!important;border-radius:999px!important;box-shadow:none!important}

/* Inner pages */
.page-hero,.inner-hero,.service-hero,.about-hero,.contact-hero,.blog-hero{
  background:var(--h-green)!important;color:var(--h-paper)!important;padding-top:160px!important;
}
.page-hero h1,.inner-hero h1,.service-hero h1,.about-hero h1,.contact-hero h1,.blog-hero h1{
  font-size:clamp(52px,7vw,100px)!important;line-height:.92!important;
}

/* Footer */
.site-footer{background:#173326!important;color:var(--h-paper)!important;padding-top:90px!important}
.site-footer .brand-logo{filter:grayscale(1) brightness(0) invert(1)!important}
.footer-grid{border-top:1px solid rgba(247,244,234,.22);padding-top:48px}
.footer-column h5{font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;font-size:22px!important;font-weight:400!important;color:var(--h-paper)!important}
.footer-column a,.footer-about p,.footer-column p{color:rgba(247,244,234,.72)!important}
.footer-column a:hover{color:#fff!important}
.footer-bottom{border-color:rgba(247,244,234,.18)!important}
.back-top{background:#8fb65b!important;color:#173326!important;border-radius:50%!important}

/* Buttons everywhere */
.btn{border-radius:999px!important;box-shadow:none!important;transform:none!important}
.btn-primary{background:var(--h-green)!important;color:var(--h-paper)!important}
.btn-dark{background:var(--h-green)!important;color:var(--h-paper)!important}

@media(max-width:1050px){
  .container{width:min(100% - 40px,1380px)!important}
  .project-card{grid-template-columns:1fr!important}
  .project-browser.real-project-preview,.project-screenshot{min-height:0!important;height:420px!important}
}
@media(max-width:768px){
  .container{width:min(100% - 28px,1380px)!important}
  .site-header{background:rgba(23,51,38,.94)!important;position:fixed!important}
  .brand-logo{width:155px!important}
  .hero{min-height:780px!important;padding:130px 0 70px!important;background-position:center top!important}
  .hero-copy h1{font-size:clamp(48px,15vw,72px)!important;line-height:.91!important}
  .hero-copy>p{font-size:15px!important}
  .hero-proof{gap:20px!important;flex-direction:column!important}
  .section{padding:84px 0!important}
  .section h2,.section-heading h2,.contact-copy h2,.process-intro h2{font-size:clamp(38px,11vw,58px)!important}
  .service-grid{grid-template-columns:1fr!important}
  .project-browser.real-project-preview,.project-screenshot{height:320px!important}
  .project-info{padding:30px 10px 10px!important}
  .contact-section{padding:80px 0!important}
}

/* ===== v2 production-root visual reset ===== */
:root{
  --h-cream:#f4f0e5;
  --h-paper:#fbf8ef;
  --h-green:#294b2d;
  --h-green-deep:#18351f;
  --h-lime:#a8cb63;
  --h-text:#193522;
}
.site-header{z-index:1000!important;padding:0!important}
.site-header .nav-wrap{max-width:none!important;width:calc(100% - 72px)!important}
.site-header .brand-logo{width:158px!important;height:auto!important;object-fit:contain!important}
.hero{min-height:100svh!important;padding:126px 0 70px!important;position:relative!important;background-position:center center!important}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,16,.16) 0%,rgba(11,29,16,.18) 45%,rgba(11,29,16,.58) 100%);pointer-events:none}
.hero>.container{position:relative;z-index:1}
.hero-copy h1{font-size:clamp(60px,8.25vw,126px)!important;line-height:.86!important;max-width:1160px!important;letter-spacing:-.055em!important}
.hero-copy>p{font-family:"DM Sans",sans-serif!important;font-size:clamp(16px,1.25vw,20px)!important;max-width:720px!important;line-height:1.55!important}
.hero-actions .btn{font-size:13px!important;min-height:48px!important;padding:0 22px!important}
.hero-proof{max-width:760px!important;margin-left:auto!important;margin-right:auto!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.hero-proof>div{padding:18px 24px!important;border-top:1px solid rgba(255,255,255,.28)!important}
.hero-proof strong{display:block!important;font-size:26px!important}
.trust-strip{padding:56px 0!important}
.industry-row{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0!important}
.industry-row span{justify-content:center!important;padding:16px 20px!important;border-right:1px solid var(--h-line)!important}
.industry-row span:last-child{border-right:0!important}
.section-heading.centered{max-width:920px!important;margin-left:auto!important;margin-right:auto!important}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.service-card{min-height:390px!important;padding:48px 38px!important;display:flex!important;flex-direction:column!important}
.service-card p{max-width:34ch!important}
.service-card a{margin-top:auto!important;align-self:flex-start!important}
.project-card:nth-child(even){grid-template-columns:.65fr 1.35fr!important}
.project-card:nth-child(even) .project-browser{order:2!important}
.project-card:nth-child(even) .project-info{order:1!important}
.project-browser.real-project-preview{overflow:hidden!important}
.project-screenshot{transition:transform .7s cubic-bezier(.2,.75,.2,1)!important}
.project-card:hover .project-screenshot{transform:scale(1.025)!important}
.process-grid article{min-height:300px!important;padding:42px 34px!important}
.cta-box{border-radius:0!important;background:var(--h-green)!important;color:var(--h-paper)!important;padding:70px!important}
.site-footer{padding-top:88px!important}
.footer-grid{border-top:1px solid rgba(247,244,234,.22)!important;padding-top:48px!important}
.footer-column h5{font-family:"DM Serif Display",Georgia,serif!important;font-size:22px!important;font-weight:400!important}

@media(max-width:1050px){
 .site-header .nav-wrap{width:calc(100% - 36px)!important}
 .hero{min-height:820px!important;padding-top:140px!important}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .project-card,.project-card:nth-child(even){grid-template-columns:1fr!important}
 .project-card:nth-child(even) .project-browser,.project-card:nth-child(even) .project-info{order:initial!important}
 .project-browser.real-project-preview,.project-screenshot{height:460px!important;min-height:460px!important}
}
@media(max-width:768px){
 .container{width:min(100% - 28px,1380px)!important}
 .site-header .nav-wrap{width:calc(100% - 28px)!important}
 .hero{min-height:760px!important;padding:118px 0 44px!important}
 .hero-copy h1{font-size:clamp(50px,15vw,78px)!important}
 .hero-proof{grid-template-columns:1fr!important;gap:0!important;margin-top:30px!important}
 .hero-proof>div{padding:12px 0!important}
 .industry-row{display:flex!important;overflow:auto!important}
 .industry-row span{min-width:max-content!important}
 .service-grid{grid-template-columns:1fr!important}
 .service-card{min-height:300px!important}
 .section{padding:82px 0!important}
 .section h2,.section-heading h2,.contact-copy h2,.process-intro h2{font-size:clamp(40px,12vw,58px)!important}
 .project-browser.real-project-preview,.project-screenshot{height:310px!important;min-height:310px!important}
 .project-info{padding:34px 0!important}
 .cta-box{padding:46px 28px!important}
}