/*
Theme Name: Reddsol
Description: Custom theme for Reddsol — talent, Microsoft, mobile, and data consulting.
Author: Reddsol
Version: 1.0.0
*/

/* ============================================================
   REDDSOL — brand system
   Warm, approachable consultancy. Talent-led.
   Signature: the "thread" — a hand-drawn connecting line that
   links people to systems, running through hero + services,
   because Reddsol's whole pitch is connecting talent to tech.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --paper: #FFFFFF;
  --paper-dim: #FBEAEB;
  --ink: #201A1A;
  --ink-soft: #5C4E4E;
  --gold: #C1272D;      /* primary red accent */
  --gold-deep: #8C1D22; /* hover / deep red */
  --teal: #7A1418;      /* dark red used for ticks, underline, focus, cta bg */
  --teal-deep: #3D0C0E; /* near-black red, used for footer/band backgrounds */
  --line: #F3D7D8;
  --white: #FFFFFF;

  --display: 'Fraunces', serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:18px;height:1px;
  background:var(--gold-deep);
  display:inline-block;
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,238,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:var(--max);margin:0 auto;
}
.nav img.logo, .nav .custom-logo{height:40px;width:auto;}
.nav .custom-logo-link{display:flex;align-items:center;margin:0;padding:0;}
.nav ul{
  list-style:none;display:flex;gap:34px;margin:0;padding:0;
  font-size:15px;font-weight:500;
}
.nav ul a{
  text-decoration:none;color:var(--ink);position:relative;padding:4px 0;
}
.nav ul a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1);}
.nav-cta{
  background:var(--teal);color:var(--white);text-decoration:none;
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--teal-deep);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;}

@media (max-width:860px){
  .nav ul{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav ul.open{max-height:320px;}
  .nav ul li{border-top:1px solid var(--line);}
  .nav ul a{display:block;padding:16px 28px;}
  .nav-toggle{display:block;}
  .nav-links-wrap{display:contents;}
}

/* ---------- footer ---------- */
footer.site{
  background:var(--teal-deep);color:#EFEAE0;margin-top:60px;
}
/* Mirrors .nav: same padding and height as the header bar. */
.foot-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 28px;max-width:var(--max);margin:0 auto;
}
footer.site img.logo{height:30px;width:auto;filter:brightness(0) invert(1);flex:0 0 auto;}
.foot-links{
  display:flex;gap:24px;
  font-size:14px;font-weight:500;flex:1 1 auto;justify-content:center;
}
.foot-links a, footer.site a{text-decoration:none;color:#DCE4DE;}
footer.site a:hover{color:#fff;}
.foot-copy{font-size:13px;color:#9FB0A8;white-space:nowrap;flex:0 0 auto;}
@media (max-width:700px){
  footer.site{margin-top:40px;}
  .foot-row{flex-direction:column;gap:12px;padding:16px 20px;text-align:center;}
  .foot-links{flex-wrap:wrap;justify-content:center;gap:16px;}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:90px 0 70px;}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);}
.hero .lede{font-size:1.15rem;max-width:46ch;}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:15px;transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--gold);color:#fff;}
.btn-primary:hover{background:var(--gold-deep);transform:translateY(-1px);}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.hero-photo{
  position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(36,31,25,.35);
  aspect-ratio:4/5;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-stats{display:flex;gap:32px;margin-top:44px;flex-wrap:wrap;}
.hero-stats div strong{font-family:var(--display);font-size:2rem;display:block;color:var(--teal-deep);}
.hero-stats div span{font-size:13px;color:var(--ink-soft);}

/* thread signature — a hand drawn connecting line */
.thread{position:absolute;pointer-events:none;z-index:0;opacity:.55;}

/* ---------- sections ---------- */
section{padding:70px 0;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}

/* services grid */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.service-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:30px 26px;position:relative;transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(36,31,25,.25);}
.service-card .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin-bottom:12px;display:block;
}
.service-card h3{font-size:1.25rem;margin-bottom:10px;}
.service-card p{font-size:14.5px;margin-bottom:0;}
@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}

/* alternating feature rows (services page) */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:64px 0;border-top:1px solid var(--line);
}
.feature-row:first-of-type{border-top:none;}
.feature-row.reverse .feature-photo{order:2;}
.feature-photo{border-radius:16px;overflow:hidden;aspect-ratio:5/4;}
.feature-photo img{width:100%;height:100%;object-fit:cover;}
.feature-text .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep);
}
.feature-text h2{font-size:1.9rem;margin-top:10px;}
.feature-list{list-style:none;margin:20px 0 0;padding:0;}
.feature-list li{
  padding-left:22px;position:relative;margin-bottom:10px;color:var(--ink-soft);font-size:14.5px;
}
.feature-list li::before{
  content:'';position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--teal);
}
@media (max-width:820px){
  .feature-row,.feature-row.reverse{grid-template-columns:1fr;}
  .feature-row.reverse .feature-photo{order:0;}
}

/* values / why band */
.band{background:var(--teal-deep);color:#EDE7DA;border-radius:22px;padding:56px;margin:0 auto;max-width:var(--max);}
.band h2{color:#fff;}
.band p{color:#C9D2CC;}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:34px;}
.band-grid h4{color:#fff;font-family:var(--body);font-size:16px;margin-bottom:8px;}
.band-grid p{font-size:14px;margin-bottom:0;}
@media (max-width:820px){.band{padding:38px 26px;}.band-grid{grid-template-columns:1fr;}}

/* CTA band */
.cta-band{
  max-width:var(--max);margin:0 auto;
  background:var(--gold);color:#fff;border-radius:22px;
  padding:54px 56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:1.9rem;margin-bottom:6px;}
.cta-band p{color:#FFEBD2;margin-bottom:0;}
.cta-band .btn-outline{border-color:#fff;color:#fff;}
.cta-band .btn-outline:hover{background:#fff;color:var(--gold-deep);}

/* page hero (interior pages) */
.page-hero{padding:60px 0 40px;}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{font-size:clamp(2rem,3.6vw,2.9rem);max-width:16ch;}
.page-hero .lede{max-width:56ch;font-size:1.05rem;}

/* careers: openings list base look — the Reddsol Careers plugin ships its
   own scoped copy of these rules too (so it works even without this
   theme), but keeping them here as well costs nothing and keeps things
   consistent if you ever inspect this stylesheet on its own. */
.openings{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white);}
.opening-row{border-top:1px solid var(--line);}
.opening-row:first-child{border-top:none;}
.opening-row h4{font-family:var(--body);font-weight:600;font-size:16px;margin:0;}
.opening-row .meta{font-size:13px;color:var(--ink-soft);font-family:var(--mono);display:block;margin-top:4px;}

.opening-header-static{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;flex-wrap:wrap;
}
.opening-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;padding:22px 26px;border:none;background:none;cursor:pointer;
  font-family:inherit;text-align:left;color:inherit;flex-wrap:wrap;
}
.opening-toggle:hover{background:var(--paper-dim);}
.opening-chevron{
  flex-shrink:0;color:var(--ink-soft);transition:transform .18s ease;
}
.opening-row.is-open .opening-chevron{transform:rotate(180deg);color:var(--teal);}
.opening-row.is-open .opening-toggle{background:var(--paper-dim);}

.opening-panel{padding:0 26px 26px;}
.opening-panel .opening-desc{font-size:14px;color:var(--ink-soft);margin:0 0 16px;max-width:70ch;}
.opening-panel .opening-desc p{margin:0 0 12px;}
.opening-panel .opening-desc ul,
.opening-panel .opening-desc ol{margin:0 0 12px;padding-left:22px;}
.opening-panel .btn-primary{padding:10px 22px;font-size:14px;}

.opening-empty{
  background:var(--white);border:1px dashed var(--line);border-radius:16px;
  padding:44px 30px;text-align:center;
}
.opening-empty p{color:var(--ink-soft);}

.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.perk{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px;}
.perk .num{font-family:var(--mono);font-size:11px;color:var(--gold-deep);letter-spacing:.1em;}
.perk h4{font-size:15px;margin:10px 0 6px;}
.perk p{font-size:13.5px;margin:0;}
@media (max-width:900px){.perks-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.perks-grid{grid-template-columns:1fr;}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-info-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;margin-bottom:20px;
}
.contact-info-card h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);color:var(--teal);margin-bottom:8px;}
.contact-info-card p{margin-bottom:0;font-size:15px;color:var(--ink);}
.contact-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;margin-bottom:20px;}
.contact-photo img{width:100%;height:100%;object-fit:cover;}

form.reddsol-form{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:34px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--body);font-size:14.5px;background:var(--paper-dim);color:var(--ink);
}
.field textarea{resize:vertical;min-height:120px;}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--teal);outline-offset:1px;background:#fff;}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}

/* misc */
.divider{height:1px;background:var(--line);max-width:var(--max);margin:0 auto;}
.center{text-align:center;}

/* ---------- tag banner (animated  </service><next>  ->  < Reddsol /> ) ---------- */
.tag-banner{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(900px 240px at 50% 0%,#5A1316 0%,var(--teal-deep) 62%);
  border-bottom:3px solid var(--gold);
  padding:34px 0;
}
.tb-inner{text-align:center;}
.tb-br{color:#E8323A;}
.tb-live{display:none;}
.tb-is-live .tb-live{display:block;}
.tb-is-live .tb-static{display:none;}

.tb-closing{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(11px,2.9vw,16px);line-height:1.4;min-height:1.4em;
  color:rgba(243,215,216,.55);letter-spacing:.01em;
  overflow-wrap:anywhere;margin-bottom:12px;
}
.tb-closing .tb-br{color:rgba(232,50,58,.6);}
.tb-flash{animation:tbFlash .5s ease-out;}
@keyframes tbFlash{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* open tag text and logo share one grid cell so the banner never changes height */
.tb-stage{display:grid;align-items:center;justify-items:center;min-height:96px;}
.tb-open,.tb-logo{grid-area:1/1;}
.tb-open{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(15px,4.4vw,36px);line-height:1.3;
  color:#fff;overflow-wrap:anywhere;text-wrap:balance;
  transition:opacity .3s ease;
}
.tb-caret{
  display:inline-block;width:.09em;height:1em;margin:0;vertical-align:-.12em;
  background:var(--gold);animation:tbBlink 1s steps(1) infinite;
}
@keyframes tbBlink{50%{opacity:0;}}
.tb-logo{
  width:min(86vw,396px);height:auto;
  opacity:0;transform:scale(.96);
  transition:opacity .6s ease,transform .6s ease;
}
.tb-slash{display:none;}
.tb-closing-now .tb-slash{display:inline;color:#E8323A;}
.tb-closing-now .tb-caret{display:none;}
.tb-show-logo .tb-open,.tb-show-logo .tb-closing{opacity:0;}
.tb-closing{transition:opacity .3s ease;}
.tb-show-logo .tb-logo{opacity:1;transform:none;}

/* static fallback: no JavaScript, or reduced motion */
.tb-static-logo{width:min(86vw,396px);height:auto;margin:0 auto 18px;}
.tb-chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;
}
.tb-chips li{
  font-family:var(--mono);font-size:12px;line-height:1.3;
  color:#F3D7D8;border:1px solid rgba(243,215,216,.25);
  border-radius:6px;padding:5px 9px;
}

@media (max-width:700px){
  .tag-banner{padding:26px 0;}
  .tb-stage{min-height:84px;}
}

/* ---------- WPForms inside the contact card ---------- */
.reddsol-form.reddsol-wpform{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:34px;}
.reddsol-wpform .wpforms-container{margin:0;}
.reddsol-wpform .wpforms-field{padding:0;margin-bottom:18px;}
.reddsol-wpform .wpforms-field-label,
.reddsol-wpform label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink);}
.reddsol-wpform .wpforms-required-label{color:var(--gold);}
.reddsol-wpform input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.reddsol-wpform select,
.reddsol-wpform textarea{
  width:100%;max-width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--body);font-size:14.5px;background:var(--paper-dim);color:var(--ink);height:auto;
}
.reddsol-wpform textarea{resize:vertical;min-height:120px;}
.reddsol-wpform input:focus,.reddsol-wpform select:focus,.reddsol-wpform textarea:focus{
  outline:2px solid var(--teal);outline-offset:1px;background:#fff;
}
.reddsol-wpform button[type=submit],.reddsol-wpform .wpforms-submit{
  background:var(--gold);color:#fff;border:none;border-radius:999px;cursor:pointer;
  padding:13px 26px;font-family:var(--body);font-size:14.5px;font-weight:600;
}
.reddsol-wpform button[type=submit]:hover,.reddsol-wpform .wpforms-submit:hover{background:var(--gold-deep);}
.reddsol-wpform .wpforms-error,.reddsol-wpform label.wpforms-error{color:var(--gold-deep);font-size:12.5px;font-weight:500;}
.reddsol-wpform .wpforms-confirmation-container-full{background:var(--paper-dim);border:1px solid var(--line);border-radius:10px;color:var(--ink);}

/* ---------- responsive refinements (tablet / phone) ---------- */

/* Elements that are both .wrap and .feature-row (careers "Culture" block) must
   keep the wrap's side gutters; .feature-row's own padding would otherwise
   zero them and push text against the screen edge. */
.wrap.feature-row{padding-left:28px;padding-right:28px;}

/* The contact form card also applies when WPForms renders the form. */
div.reddsol-form{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:34px;}
.reddsol-wpform .wpforms-container{margin:0;max-width:100%;}
.reddsol-wpform .wpforms-form input[type=text],
.reddsol-wpform .wpforms-form input[type=email],
.reddsol-wpform .wpforms-form input[type=tel],
.reddsol-wpform .wpforms-form select,
.reddsol-wpform .wpforms-form textarea{max-width:100%;width:100%;}

@media (max-width:860px){
  .hero{padding:44px 0 36px;}
  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .hero-photo{aspect-ratio:16/10;}
  .hero .lede{max-width:none;}
  .hero-stats{gap:20px 28px;margin-top:30px;}
  .hero-stats div strong{font-size:1.6rem;}
  .feature-row{padding:40px 0;gap:26px;}
  .cta-band{padding:38px 28px;}
  .cta-band h2{font-size:1.55rem;}
  /* contact: put the form first, details after it */
  .contact-grid > :first-child{order:2;}
  .contact-grid > :not(:first-child){order:1;}
}

@media (max-width:480px){
  .wrap{padding:0 20px;}
  .wrap.feature-row{padding-left:20px;padding-right:20px;}
  .nav{padding:12px 20px;}
  section{padding:46px 0;}
  .section-head{margin-bottom:28px;}
  .hero h1{font-size:2.05rem;}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .hero-stats div strong{font-size:1.4rem;}
  .hero-stats div span{font-size:12px;line-height:1.35;display:block;}
  .page-hero{padding:40px 0 24px;}
  .band{padding:30px 22px;}
  .cta-band{padding:30px 22px;}
  .contact-info-card{padding:22px;}
  form.reddsol-form,div.reddsol-form{padding:22px;}
  /* 16px stops iOS Safari zooming the page when a field is focused */
  .field input,.field select,.field textarea,
  .reddsol-wpform .wpforms-form input,.reddsol-wpform .wpforms-form select,.reddsol-wpform .wpforms-form textarea{font-size:16px;}
  .opening-header-static,.opening-toggle{padding:18px 20px;}
  .opening-panel{padding:0 20px 22px;}
  .foot-links a{display:inline-block;padding:8px 4px;}
}