/* ===== topunix.net static — design tokens from theme.json + wp_global_styles override ===== */

/* body: Plus Jakarta Sans */
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/jakarta/plus-jakarta-sans-400.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/jakarta/plus-jakarta-sans-500.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/jakarta/plus-jakarta-sans-600.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/jakarta/plus-jakarta-sans-700.woff2") format("woff2"); }
/* headings: Rubik (variable) */
@font-face { font-family:"Rubik"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("/assets/fonts/rubik/rubik.woff2") format("woff2"); }

:root {
  /* color (from wp_global_styles override) */
  --color-background:#3f5762; --color-foreground:#f7fafc; --color-primary:#f9f6de;
  --color-secondary:#fcf8f2; --color-tertiary:#2d3f47;

  /* type */
  --font-body:"Plus Jakarta Sans",sans-serif;
  --font-heading:"Rubik",sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tiny:1.15; --lh-normal:1.6;

  --fs-base:1.125rem;
  --fs-large:clamp(1.39rem,1.175rem + 1.075vw,2.25rem);
  --fs-xlarge:clamp(1.5rem,1.125rem + 1.875vw,3rem);
  --fs-xxlarge:clamp(1.85rem,1.375rem + 2.375vw,3.75rem);

  --content-size:42rem; --wide-size:80rem; --pad-x:clamp(1.5rem,6vw,2rem);
  --space-s:1rem; --space-m:clamp(2rem,8vw,3rem); --space-l:clamp(2.5rem,8vw,4rem);
  --space-xl:clamp(3.5rem,10vw,6rem);
  --radius-button:2rem; --radius-input:4px;
}

/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-regular);
  line-height:var(--lh-normal);color:var(--color-foreground);background:var(--color-background);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-foreground);text-underline-offset:0.25ch;}

/* ===== headings ===== */
h1,h2,h3,h4{font-family:var(--font-heading);line-height:var(--lh-tiny);margin:0 0 var(--space-s);}
h1{font-size:var(--fs-xxlarge);font-weight:500;letter-spacing:-0.01em;}
h2{font-size:var(--fs-large);font-weight:500;letter-spacing:0.01em;}
h3{font-size:var(--fs-large);font-weight:600;}
h5,h6{text-transform:uppercase;}

/* ===== layout ===== */
.container{max-width:var(--wide-size);margin-inline:auto;padding-inline:var(--pad-x);}
.content{max-width:var(--content-size);margin-inline:auto;padding-inline:var(--pad-x);}
.section{padding-block:var(--space-xl);}
.bg-alt{background:var(--color-tertiary);}

/* ===== buttons ===== */
.btn{display:inline-block;padding:0.7em 1.6em;border-radius:var(--radius-button);
  background:var(--color-primary);color:var(--color-background);font-weight:var(--fw-medium);
  text-decoration:none;border:none;cursor:pointer;transition:background 0.15s ease,opacity 0.15s ease;}
.btn:hover,.btn:focus{background:var(--color-secondary);opacity:0.9;}

/* ===== header ===== */
.site-header{border-bottom:1px solid rgba(247,250,252,0.12);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-s);}
.brand{display:flex;align-items:center;gap:0.5rem;text-decoration:none;}
.brand img{height:42px;width:auto;}
.brand .site-title{font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:-0.02em;
  font-size:1.25rem;color:var(--color-foreground);white-space:nowrap;}
.main-nav ul{display:flex;gap:1.5rem;align-items:center;list-style:none;margin:0;padding:0;}
.main-nav a{text-decoration:none;font-weight:var(--fw-medium);}
.main-nav a:hover{text-decoration:underline;}
.nav-toggle{display:none;background:none;border:none;color:var(--color-foreground);cursor:pointer;padding:0.5rem;}

/* ===== service cards (stacked wide cards; image left / text right) ===== */
.service-cards{display:flex;flex-direction:column;gap:var(--space-m);margin-top:var(--space-m);}
.service-card{display:flex;flex-wrap:wrap;background:var(--color-tertiary);border-radius:4px;overflow:hidden;}
.service-card__img{flex:0 0 20rem;width:20rem;min-width:0;align-self:stretch;min-height:200px;object-fit:cover;}
.service-card__body{flex:1 1 320px;padding:2.5rem var(--pad-x);display:flex;flex-direction:column;gap:0.75rem;align-items:flex-start;justify-content:center;}
.service-card h3{font-size:1.75rem;line-height:1.5;margin:0;}
.service-card p{margin:0;}

/* ===== footer (light — uses foreground color as background per template) ===== */
.site-footer{background:var(--color-foreground);color:var(--color-background);padding-block:var(--space-l);margin-top:var(--space-xl);}
.site-footer a{color:var(--color-background);text-decoration:underline;text-underline-offset:0.2ch;}
.site-footer a:hover{opacity:0.75;}
.site-footer p{margin:0 0 0.75rem;max-width:42rem;}
.site-footer .cta{font-weight:var(--fw-semibold);}
.site-footer .footer-title{font-family:var(--font-heading);font-size:var(--fs-large);font-weight:500;margin-bottom:1rem;}

/* ===== forms ===== */
input,textarea,button{width:100%;font:inherit;color:var(--color-foreground);background:var(--color-tertiary);
  border:1px solid var(--color-foreground);border-radius:var(--radius-input);padding:calc(0.667em + 1px) calc(1.333em + 1px);}
label{display:block;margin-bottom:0.4rem;font-weight:var(--fw-medium);}
.field{margin-bottom:1.25rem;}

/* ===== features / detail pages ===== */
.small{font-size:1rem;}
.hero{padding:var(--space-s) var(--pad-x);}
.hero h2{margin:1rem 0;}
.hero p{margin:1rem 0 1.5rem;max-width:var(--content-size);}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;}
.features{background:var(--color-tertiary);padding:var(--space-l) var(--pad-x) var(--space-xl);}
.features-grid{display:grid;gap:var(--space-l);grid-template-columns:repeat(3,1fr);max-width:var(--wide-size);margin-inline:auto;}
.feature h3{font-size:20px;line-height:1.5;margin:16px 0 0;}
.feature p{margin:8px 0 0;}
.features-grid ul{padding-left:1.25rem;margin:1rem 0 0;}
/* process steps */
.process{background:var(--color-tertiary);padding:var(--space-xl) var(--pad-x);}
.process-grid{display:grid;gap:var(--space-l);grid-template-columns:1fr 1.2fr;max-width:var(--wide-size);margin-inline:auto;}
.step{display:grid;grid-template-columns:48px 1fr;gap:1.5rem;}
.step-marker{display:flex;flex-direction:column;align-items:center;gap:0;}
.step-num{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--color-foreground);border-radius:50%;font-size:1rem;font-weight:500;line-height:1;flex-shrink:0;}
.step-line{width:1px;flex:1;background:var(--color-foreground);min-height:60px;}
.step:last-child .step-line{display:none;}
.step h3{font-size:1.5rem;line-height:1.5;margin:0;}
.step p{margin:8px 0 0;}


/* ===== full stack solutions ===== */
.overview-grid{display:grid;gap:var(--space-m);grid-template-columns:1.6fr 1fr;max-width:var(--wide-size);margin-inline:auto;align-items:start;}
.tile-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;}
.tile{background:var(--color-tertiary);padding:1.5rem;}
.tile h3{font-size:20px;line-height:1.5;margin:0;}
.tile p{margin:8px 0 0;}
.overview-grid figure{margin:0;}
.overview-grid img{aspect-ratio:1;object-fit:cover;width:100%;}
.scale-grid{display:grid;gap:var(--space-m);grid-template-columns:1fr 1fr;max-width:var(--wide-size);margin-inline:auto;align-items:start;}
.icon-item{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:var(--space-m);}
.icon-item svg{flex-shrink:0;width:48px;height:48px;color:var(--color-primary);}
.icon-item h3{font-size:20px;line-height:1.5;margin:0;}
.icon-item p{margin:4px 0 0;}
.scale-grid img{width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:0.5rem 20rem 20rem 0.5rem;}
.cta-center{text-align:center;padding:var(--space-xl) var(--pad-x);}
.cta-center p{margin:16px auto 1.5rem;max-width:var(--content-size);}

/* ===== home ===== */
.hero-home{background:var(--color-foreground);color:var(--color-background);display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.hero-home__content{padding:clamp(3rem,8vw,7rem) var(--pad-x);display:flex;flex-direction:column;justify-content:center;}
.hero-home__content h1,.hero-home__content p{color:var(--color-background);}
.hero-home__content p{margin:16px 0 0;max-width:36rem;}
.hero-home__content .btn{margin-top:var(--space-m);align-self:flex-start;}
/* This next h1 rule is a departure from the original. Remove if needed */
.hero-home__content h1{font-size:var(--fs-xlarge);}
.hero-home__media{min-height:320px;}
.hero-home__media img{width:100%;height:100%;object-fit:cover;}
.vp-grid{display:grid;gap:var(--space-l);grid-template-columns:1fr 1fr;max-width:var(--wide-size);margin-inline:auto;}
.vp-grid .btn-wide{display:block;text-align:center;margin-top:var(--space-l);}
.vp-grid .vp-media{min-height:380px;}
.vp-grid .vp-media img{width:100%;height:100%;object-fit:cover;}
.tiles-5{display:grid;gap:1rem;grid-template-columns:repeat(5,1fr);max-width:var(--wide-size);margin-inline:auto;margin-top:var(--space-m);}
.t-cards{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);max-width:var(--wide-size);margin-inline:auto;margin-top:var(--space-l);}
.t-card{background:var(--color-background);border-radius:4px;padding:var(--pad-x);}
.t-card .stars{color:var(--color-primary);height:19px;width:116px;}
.t-card blockquote{margin:1rem 0 1.25rem;font-weight:500;}
.t-byline{display:flex;gap:1rem;align-items:center;}
.t-byline img{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.t-byline h4{font-size:1rem;margin:0;}
.t-byline p{font-size:1rem;margin:2px 0 0;}

/* ===== faq ===== */
.faq-grid{display:grid;gap:var(--space-l) var(--space-l);grid-template-columns:1fr 1fr;max-width:var(--wide-size);margin-inline:auto;margin-top:var(--space-l);}
.faq-grid h3{font-size:20px;line-height:1.5;margin:0;}
.faq-grid p{margin:8px 0 0;}
.contact-form{max-width:var(--content-size);margin-inline:auto;}
.contact-form button{width:100%;}

/* ===== about ===== */
.values-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);max-width:var(--wide-size);margin-inline:auto;margin-top:var(--space-l);}
.value-card{border:1px solid var(--color-foreground);padding:var(--space-m) var(--pad-x);}
.value-card{text-align:center;}
.value-badge{width:96px;height:96px;margin-inline:auto;border:1px solid var(--color-foreground);border-radius:100px;display:flex;align-items:center;justify-content:center;}
.value-card svg{width:48px;height:48px;color:var(--color-primary);}
.value-card h3{font-size:1.25rem;margin:var(--pad-x) 0 0;}
.value-card p{margin:8px 0 0;}
.team-grid{display:grid;gap:var(--space-m);grid-template-columns:1fr 2fr;max-width:var(--wide-size);margin-inline:auto;}
.team-cards{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr 1fr;}
.team-card{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 24px 32px;overflow:hidden;}
.team-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.team-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:1;}
.team-card>div{position:relative;z-index:2;color:#fff;}
.team-card h4{font-size:20px;color:#fff;margin:0;}
.team-card .role{margin:4px 0 0;}
.team-card .bio{margin:12px 0 0;}

/* ===== contact ===== */
.contact-grid{display:grid;gap:var(--space-m);grid-template-columns:1fr 1fr;max-width:var(--wide-size);margin-inline:auto;}

/* ===== mobile nav ===== */
@media (max-width:768px){
  .nav-toggle{display:block;margin-left:auto;margin-right:calc(-0.5rem - 3px);}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-background);
    border-bottom:1px solid rgba(247,250,252,0.12);}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column;gap:0;padding:var(--pad-x);}
  .main-nav li{border-bottom:1px solid rgba(247,250,252,0.12);padding-block:0.75rem;}
  .site-header .container{position:relative;}
  .service-card__img{flex-basis:100%;height:200px;}
  .features-grid,.process-grid{grid-template-columns:1fr;}
  .overview-grid,.scale-grid,.tile-grid{grid-template-columns:1fr;}
  .hero-home{grid-template-columns:1fr;}
  .vp-grid{grid-template-columns:1fr;}
  .tiles-5{grid-template-columns:1fr;}
  .t-cards{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .team-cards{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .brand .site-title{font-size:1rem;}
}