/*
  Transvolve Website styles
  Goal: calm, high-trust, executive-friendly (CTO / Head of Engineering / Principal Engineers)
*/

/* 
  CSS VARIABLES (Custom Properties)
  These define the color palette, spacing, and other design tokens used throughout the site.
  Changing a value here updates it everywhere it's used.
*/
:root{
  /* Brand Colors */
  --navy:#19417a;
  --teal:#0F766E;

  /* Text & Background Colors */
  --text:#1f4ecf;   /* Main body text color (dark slate) */
  --sub:#475569;    /* Secondary text color (lighter slate) */
  --bg:#ffffff;     /* Main background color */
  --surface:#ffffff;/* Card/Container background color */
  --muted:#f8fafc;  /* Muted background for alternate sections */
  --border:#e2e8f0; /* Border color */

  /* UI Elements */
  --radius:14px;    /* Border radius for cards/images */
  --radius-sm:10px; /* Smaller border radius */
  --shadow: 0 1px 2px rgba(2, 6, 23, .06);      /* Subtle shadow */
  --shadow-lg: 0 12px 34px rgba(2, 6, 23, .10); /* Large shadow for hover/popover */

  /* Layout */
  --max:1120px;     /* Maximum width of the main container */
}

/* 
  RESET & BASE STYLES
  Sets defaults to ensure consistency across browsers.
*/
*{box-sizing:border-box} /* Includes padding/border in element's total width/height */
html{scroll-behavior:smooth} /* Smooth scrolling for anchor links */
body{
  margin:0;
  
  /* 
    FONT STYLE (Font Family)
    To change the font, replace the list below.
    Common options:
    - Serif: Georgia, Cambria, "Times New Roman", serif;
    - Sans-serif: Inter, Arial, Helvetica, sans-serif;
    - Monospace: "Courier New", Courier, monospace;
  */
  font-family: ui-sans-serif, -apple-system, Segoe UI, Inter, Arial, sans-serif, ink free;
  
  color:var(--text);
  background:var(--bg);
  line-height:1.65; /* Global line spacing (1.65 times the font size) */
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block} /* Images never overflow their container */
a{color:inherit;text-decoration:none}
p{color:var(--sub);margin:.9rem 0}
small{color:var(--sub)}

/* 
  ACCESSIBILITY (A11Y)
  Styles for focus states to ensure keyboard navigation is visible.
*/
:focus-visible{
  outline:3px solid rgba(15,118,110,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* 
  TYPOGRAPHY 
  Headings and text styles.
  - font-size: Controls how big the text is (e.g., 2rem, 16px, 120%).
  - font-weight: Controls boldness (400 is normal, 700 is bold).
*/
h1,h2,h3{
  color:var(--text);
  margin:0 0 .15rem 0;
  letter-spacing:-0.018em; /* Slight tightening of letter spacing */
}
h1{
  /* 
    clamp() scales the font size between a min and max value based on viewport width.
    - Minimum: 2.0rem
    - Preferred: 3.2vw (3.2% of screen width)
    - Maximum: 3.0rem
    To make it bigger, increase these numbers (e.g., clamp(2.5rem, 4vw, 4rem)).
  */
  font-size:clamp(1.0rem,3.0vw,2.0rem);
  line-height:1.12;
  font-weight:450; /* Boldness: 400=Normal, 600=Semi-Bold, 700=Bold */
}
h2{
  font-size:clamp(1.05rem,2.0vw,1.55rem);
  line-height:1.25;
  margin-top:2.25rem;
  font-weight:450;
}
h3{
  font-size:1.05rem; /* Fixed size */
  font-weight:450;
}

/* Kicker: Small uppercase text above headings */
.kicker{
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(11,31,59,.78);
  margin-bottom:.55rem;
}

.lead{
  font-size:1.1rem;
  max-width:72ch; /* Limit line length for readability */
}

.heroLead{
  /* The main paragraph text in the Hero section */
  font-size:1.05rem; /* Increase this (e.g., 1.2rem) for bigger text */
  max-width:76ch;
  margin-top:.75rem;
}

.cred{
  font-size:.92rem;
  color:var(--sub);
  margin-top:1rem;
}

/* 
  LAYOUT UTILITIES
*/
.container{
  max-width:var(--max);
  margin:0 auto; /* Centers the container */
  padding:0 20px;
}
.container.narrow{max-width:820px}

.section{padding:34px 0}
.section.muted{background:var(--muted)}

/* Grid Systems */
.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* 2 equal columns */
  gap:14px;
}
.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* 3 equal columns */
  gap:14px;
}

/* Responsive adjustments for grids */
@media (max-width: 920px){
  .grid3{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width: 720px){
  .grid2,.grid3{grid-template-columns:1fr} /* Stack columns on mobile */
}

/* 
  HEADER / NAVIGATION 
*/
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px); /* Frosted glass effect */
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.brandLogo{
  width:auto;
  height:165px;
}

.brandText{display:flex;flex-direction:column;gap:2px}
.brandText strong{font-size:1.02rem;color:var(--text)}
.brandText span{font-size:.82rem;color:var(--sub)}

/* Navigation Links Container */
.navlinks{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  margin-left:0;
  flex: 1 1 auto;
  max-width: 100%;
  padding:6px;
  border-radius:24px;
  border:1px solid var(--border);
  background:rgba(248,250,252,1);
}

.navlinks a{
  font-size:.93rem;
  color:#d97706; /* Mustard/Orange */
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e2e8f0; /* Light border */
  background: #ffffff; /* White background for capsule look */
  white-space:nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.navlinks a:hover{
  background:rgba(255,255,255,1);
  border-color:rgba(226,232,240,1);
}

.navlinks a[aria-current="page"]{
  background:rgba(255,255,255,1);
  border-color:rgba(15,118,110,.22);
}

/* Make the primary CTA behave like a tab (but stronger) inside the nav bar */
.navlinks a.cta{
  box-shadow:none;
  padding:8px 12px;
  color: #d97706;
}

@media (max-width: 920px){
  .nav{flex-wrap:wrap;justify-content:center;}
  .brand{min-width:auto;justify-content:center;}
  .navlinks{width:100%;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Simple logo strip placeholders (for client/work history logos) */
.logoStrip{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:8px 2px;
}

.logoPh{
  flex:0 0 auto;
  min-width:140px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.9);
  color:rgba(71,85,105,.92);
  background:rgba(255,255,255,1);
  font-weight:500;
  font-size:.92rem;
}

/* 
  BUTTONS (CTA - Call to Action)
*/
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  font-size:.92rem;
  font-weight:500;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cta.primary{
  border-color:rgba(11,31,59,.22);
  background:linear-gradient(180deg, rgba(11,31,59,.06), rgba(11,31,59,.02));
  color:var(--text);
}
.cta.primary:hover{box-shadow:var(--shadow-lg)}

.cta.secondary{
  border-color:rgba(226,232,240,1);
  color:rgba(15,23,42,.86);
  background:var(--surface);
}
.cta.secondary:hover{background:var(--muted)}

/* 
  HERO SECTION STYLES
*/
.hero{
  padding:56px 0 40px 0;
  /* Subtle radial gradients for background interest */
  background:
    radial-gradient(900px 420px at 18% -30%, rgba(15,118,110,.08), transparent 60%),
    radial-gradient(800px 420px at 95% 0%, rgba(11,31,59,.07), transparent 58%);
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr; /* Left column wider than right */
  gap:22px;
  align-items:center;
}

/* 
  HERO MEDIA (The Right Side Image)
  This controls the box containing the "horizontal logo" or sketch.
*/
.heroMedia{
  background:linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:16px;
}

.heroMedia img{
  width:100%;
  height:auto;
  max-height:320px;
  object-fit:contain;
  margin:0 auto;
}

@media (max-width: 900px){
  .heroGrid{grid-template-columns:1fr} /* Stack vertically on smaller screens */
  .heroMedia{order:-1} /* Move image to top on mobile */
}

.heroCTAs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* 
  CARDS & UI ELEMENTS 
*/
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}

.card-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  display: block;
}

.card h2{margin-top:0}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.18);
  background:rgba(15,118,110,.06);
  color:rgba(15,23,42,.86);
  font-size:.82rem;
  font-weight:450;
}

.quote{
  margin-top:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(11,31,59,.16);
  background:linear-gradient(180deg, rgba(11,31,59,.05), rgba(255,255,255,1));
  color:rgba(15,23,42,.92);
}

.hint{
  color:rgba(71,85,105,.92);
  font-size:.92rem;
}

.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:22px 0;
}

/* 
  DIAGRAMS 
  Styles for flowcharts or process diagrams.
*/
.diagram{
  margin-top:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--muted);
}

.diagramRow{
  display:flex;
  gap:10px;
  align-items:stretch;
  flex-wrap:wrap;
}

.node{
  flex: 1 1 160px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
  box-shadow:var(--shadow);
}

.node small{display:block;margin-top:2px;color:rgba(71,85,105,.92)}

.arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:22px;
  color:rgba(15,23,42,.55);
  font-weight:500;
}

@media (max-width: 720px){
  .arrow{display:none}
}

/* 
  FORMS 
*/
.form{display:grid;gap:12px}
label{display:grid;gap:6px}
input, textarea{
  font:inherit;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
textarea{min-height:110px;resize:vertical}

button.cta{cursor:pointer}

/* FOOTER */
.footer{
  margin-top:46px;
  padding:28px 0;
  background:linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
  border-top:1px solid var(--border);
}

.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}

@media (max-width: 860px){
  .footerGrid{grid-template-columns:1fr}
}

.footer p{margin:.5rem 0}

/* 
  INTERACTIVE DIAGRAMS 
*/
.flow-diagram {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  margin: 30px 0;
  position: relative;
}

.flow-step {
  flex: 1;
  background: #e0f2fe; /* More visible light blue */
  border: 2px solid #cbd5e1;
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.flow-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--navy);
  z-index: 10;
}

.flow-step-icon {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
}

.flow-step-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flow-step h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--navy);
  font-weight: 600;
}

.flow-step p {
  font-size: 0.9rem;
  color: var(--sub);
  line-height: 1.5;
}

.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy); /* Dark, bold arrow */
  font-size: 2.5rem;
  font-weight: 800;
}

@media (max-width: 800px) {
  .flow-diagram {
    flex-direction: column;
    gap: 30px;
  }
  
  .flow-arrow {
    transform: rotate(90deg);
    height: 20px;
  }
}