/* ==========================================================================
   Dataflow Tools — Cutout Layers Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root{
  --c-primary: #161d3a;
  --c-secondary: #f6f1e8;
  --c-accent: #ff5b3c;
  --c-ink: #1c2233;
  --c-paper: #fbf8f3;

  --c-primary-light: color-mix(in oklch, var(--c-primary), white 25%);
  --c-primary-lighter: color-mix(in oklch, var(--c-primary), white 65%);
  --c-primary-dark: color-mix(in oklch, var(--c-primary), black 22%);
  --c-primary-soft: color-mix(in oklch, var(--c-primary), white 94%);
  --c-primary-mid: color-mix(in oklch, var(--c-primary), white 45%);

  --c-accent-light: color-mix(in oklch, var(--c-accent), white 32%);
  --c-accent-lighter: color-mix(in oklch, var(--c-accent), white 82%);
  --c-accent-dark: color-mix(in oklch, var(--c-accent), black 15%);

  --c-secondary-dark: color-mix(in oklch, var(--c-secondary), black 6%);
  --c-secondary-darker: color-mix(in oklch, var(--c-secondary), black 14%);

  --c-border: color-mix(in oklch, var(--c-primary), white 84%);
  --c-border-soft: color-mix(in oklch, var(--c-primary), white 90%);
  --c-text: color-mix(in oklch, var(--c-ink), white 3%);
  --c-text-muted: color-mix(in oklch, var(--c-ink), white 42%);

  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 48px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(22,29,58,0.06), 0 1px 1px rgba(22,29,58,0.04);
  --shadow-md: 0 6px 16px rgba(22,29,58,0.08), 0 2px 6px rgba(22,29,58,0.06);
  --shadow-lg: 0 16px 40px rgba(22,29,58,0.14), 0 4px 12px rgba(22,29,58,0.08);
  --shadow-xl: 0 28px 70px rgba(22,29,58,0.18), 0 10px 20px rgba(22,29,58,0.1);

  --space-section: clamp(4.5rem, 8vw, 8.5rem);
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden }
body{
  margin:0;
  font-family: 'Outfit', sans-serif;
  color: var(--c-text);
  background: var(--c-paper);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--c-primary);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.6rem, 4.2vw + 1rem, 4.6rem); font-weight:800; }
h2{ font-size: clamp(1.9rem, 2.4vw + 1rem, 3rem); }
h3{ font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem); }
p{ margin: 0 0 1em; color: var(--c-text-muted); }

.c-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.c-kicker{
  display:inline-block;
  font-size: 0.8rem;
  font-weight:600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: 1rem;
}

.c-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.03em;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12);
  color:#fff;
  margin-bottom:1.5rem;
  border:1px solid rgba(255,255,255,0.22);
}


.c-highlight{
  background-image: linear-gradient(var(--c-accent-lighter), var(--c-accent-lighter));
  background-repeat:no-repeat;
  background-size: 0% 45%;
  background-position: 0 88%;
  transition: background-size 0.7s ease;
  padding: 0 0.12em;
  border-radius: 2px;
}
.c-highlight.is-visible{ background-size: 100% 45%; }
.s-hero .c-highlight{
  background-image: linear-gradient(rgba(255,91,60,0.55), rgba(255,91,60,0.55));
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.c-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-full);
  font-weight:600;
  font-size:0.98rem;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  min-height:48px;
  white-space:nowrap;
}
.c-btn--accent{
  background: var(--c-accent);
  color:#fff;
  box-shadow: var(--shadow-md);
}
.c-btn--accent:hover{
  background: var(--c-accent-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.c-btn--ghost-light{
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color:#fff;
}
.c-btn--ghost-light:hover{
  background: rgba(255,255,255,0.14);
  border-color:#fff;
  transform: translateY(-3px);
}
.c-btn--outline{
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-primary);
}
.c-btn--outline:hover{
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
  background: var(--c-accent-lighter);
  transform: translateY(-2px);
}
.c-btn--light{
  background:#fff;
  color: var(--c-primary);
  box-shadow: var(--shadow-md);
}
.c-btn--light:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  background: var(--c-secondary);
}
.c-btn--outline-white{
  background: transparent;
  border-color:#fff;
  color:#fff;
}
.c-btn--outline-white:hover{
  background:#fff;
  color: var(--c-primary);
  transform: translateY(-3px);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.c-nav{
  position: sticky;
  top:0;
  z-index:150;
  background: var(--c-paper);
  border-bottom:1px solid var(--c-border-soft);
  transition: box-shadow 0.3s ease;
}
.c-nav__inner{
  max-width:1240px;
  margin:0 auto;
  padding: 1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.c-nav__logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-weight:700;
  font-size:1.15rem;
  color: var(--c-primary);
  transition: opacity var(--transition);
}
.c-nav__logo:hover{ opacity: 0.75; }
.c-nav__links{
  display:flex;
  align-items:center;
  gap:2rem;
  margin-left:auto;
  margin-right:2rem;
}
.c-nav__links a{
  position:relative;
  font-weight:500;
  font-size:0.96rem;
  color: var(--c-text-muted);
  padding: 0.4rem 0.1rem;
  transition: color var(--transition);
}
.c-nav__links a::after{
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--c-accent);
  transition: width var(--transition);
}
.c-nav__links a:hover, .c-nav__links a.is-active{ color: var(--c-primary); }
.c-nav__links a:hover::after, .c-nav__links a.is-active::after{ width:100%; }
.c-nav__cta{ flex-shrink:0; }
.c-nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:48px;
  height:48px;
  background:transparent;
  border:1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
}
.c-nav__toggle span{
  display:block;
  width:20px;
  height:2px;
  margin:0 auto;
  background: var(--c-primary);
  transition: transform var(--transition), opacity var(--transition);
}
.c-nav__toggle:hover{ border-color: var(--c-accent); background: var(--c-accent-lighter); }
.c-nav__toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.c-nav__toggle.is-active span:nth-child(2){ opacity:0; }
.c-nav__toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


.c-mobile-menu{
  position: fixed;
  inset:0;
  z-index:300;
  background: linear-gradient(160deg, var(--c-primary), var(--c-primary-dark) 70%);
  display:flex;
  flex-direction:column;
  padding: 1.5rem;
  transform: translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s ease, visibility 0.5s;
}
.c-mobile-menu.is-active{
  transform: translateY(0);
  opacity:1;
  visibility:visible;
}
.c-mobile-menu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2.5rem;
}
.c-mobile-menu__logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color:#fff;
  font-weight:700;
  font-size:1.1rem;
}
.c-mobile-menu__close{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color:#fff;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background var(--transition), transform var(--transition);
}
.c-mobile-menu__close:hover{ background: var(--c-accent); transform: rotate(90deg); }
.c-mobile-menu__grid{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  align-content:center;
}
.c-mobile-menu__grid a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.8rem;
  padding: 2.2rem 1rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.c-mobile-menu__grid a i{ font-size:1.5rem; color: var(--c-accent-light); transition: transform var(--transition); }
.c-mobile-menu__grid a:hover{
  background: rgba(255,255,255,0.14);
  border-color: var(--c-accent);
  transform: translateY(-4px);
}
.c-mobile-menu__grid a:hover i{ transform: scale(1.15); }

/* ==========================================================================
   Hero
   ========================================================================== */
.s-hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  overflow:hidden;
}
.c-hero-media{ position:absolute; inset:0; }
.c-hero-media img{ width:100%; height:100%; object-fit:cover; }
.c-hero-overlay{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
}
.c-hero-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  clip-path: polygon(0 0, 44% 0, 32% 100%, 0% 100%);
}
.c-hero-content{
  position:relative;
  z-index:3;
  max-width:480px;
  margin-left: 6vw;
  color:#fff;
  padding: 2rem 0;
}
.c-hero-content h1{ color:#fff; margin-bottom:0.7em; }
.c-hero-content p{ color: rgba(255,255,255,0.82); font-size:1.05rem; }
.c-hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

/* ==========================================================================
   Intro / cutout circle
   ========================================================================== */
.s-intro{ padding: var(--space-section) 0; background: var(--c-paper); }
.c-intro-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:4rem;
  align-items:center;
}
.c-intro-text p{ font-size:1.05rem; }
.c-cutout-circle{
  position:relative;
  aspect-ratio: 1/1;
  border-radius:50%;
  overflow:hidden;
  box-shadow: var(--shadow-xl);
  border: 8px solid var(--c-secondary);
}
.c-cutout-circle img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Values
   ========================================================================== */
.s-values{ padding: var(--space-section) 0; background: var(--c-secondary); }
.c-section-head{ max-width:680px; margin: 0 auto 3.5rem; text-align:center; }
.c-section-head h2{ margin-bottom:0.5em; }
.c-section-head p{ font-size:1.05rem; }
.c-section-head--light{ color:#fff; }
.c-section-head--light h2{ color:#fff; }
.c-section-head--light p{ color: rgba(255,255,255,0.75); }

.c-values-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1.6rem;
}
.c-value-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 2.4rem 1.8rem;
  box-shadow: var(--shadow-sm);
  border:1px solid var(--c-border-soft);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.c-value-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-accent-light);
}
.c-value-card__icon{
  width:56px; height:56px;
  border-radius: var(--radius-md);
  background: var(--c-accent-lighter);
  color: var(--c-accent-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  margin-bottom:1.4rem;
  transition: background var(--transition), transform var(--transition);
}
.c-value-card:hover .c-value-card__icon{
  background: var(--c-accent);
  color:#fff;
  transform: rotate(-8deg) scale(1.08);
}
.c-value-card h3{ margin-bottom:0.5em; }
.c-value-card p{ font-size:0.95rem; margin:0; }

/* ==========================================================================
   Guides - Cutout Layers section
   ========================================================================== */
.s-guides{
  position:relative;
  padding: var(--space-section) 0;
  background: var(--c-primary);
  overflow:hidden;
}
.c-cutout-window{
  position:absolute;
  background-image:url('../images/values-organised-desk.jpg');
  background-size:cover;
  background-position:center;
  opacity:0.5;
}
.c-cutout-window--one{
  width:340px; height:340px;
  border-radius:50%;
  top:-80px; right:-60px;
}
.c-cutout-window--two{
  width:220px; height:220px;
  border-radius:50%;
  bottom:-60px; left:-40px;
  background-image:url('../images/team-collaboration-review.jpg');
}
.c-guide-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1.6rem;
  position:relative;
  z-index:2;
}
.c-guide-card{
  background: var(--c-primary-light);
  border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  display:flex;
  flex-direction:column;
}
.c-guide-card:hover{
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
  background: var(--c-primary-mid);
}
.c-guide-card__media{
  aspect-ratio: 4/3;
  overflow:hidden;
  clip-path: circle(58% at 50% 40%);
}
.c-guide-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.6s ease;
}
.c-guide-card:hover .c-guide-card__media img{ transform: scale(1.1); }
.c-guide-card h3{ color:#fff; margin: 1.2rem 1.4rem 0.5rem; font-size:1.15rem; }
.c-guide-card p{ color: rgba(255,255,255,0.72); font-size:0.92rem; margin: 0 1.4rem 1rem; flex:1; }
.c-guide-card__link{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin: 0 1.4rem 1.4rem;
  color: var(--c-accent-light);
  font-weight:600;
  font-size:0.9rem;
  transition: gap var(--transition), color var(--transition);
}
.c-guide-card__link i{ transition: transform var(--transition); }
.c-guide-card__link:hover{ color:#fff; gap:0.8rem; }
.c-guide-card__link:hover i{ transform: translateX(4px); }

/* ==========================================================================
   Approach split-overlap
   ========================================================================== */
.s-approach{ padding: var(--space-section) 0; background: var(--c-paper); }
.c-approach-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:0;
  position:relative;
}
.c-approach-grid--reverse{ direction: rtl; }
.c-approach-grid--reverse > *{ direction: ltr; }
.c-approach-media{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3.4;
  position:relative;
  z-index:1;
}
.c-approach-media img{ width:100%; height:100%; object-fit:cover; }
.c-approach-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-xl);
  margin-left:-4rem;
  position:relative;
  z-index:2;
  border:1px solid var(--c-border-soft);
}
.c-approach-grid--reverse .c-approach-card{ margin-left:0; margin-right:-4rem; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.s-cta{
  padding: 5.5rem 0;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent-dark) 130%);
  position:relative;
  overflow:hidden;
}
.s-cta::before{
  content:'';
  position:absolute;
  width:500px; height:500px;
  border-radius:50%;
  background: rgba(255,255,255,0.06);
  top:-250px; right:-150px;
}
.c-cta-inner{ text-align:center; max-width:640px; position:relative; z-index:2; }
.c-cta-inner h2{ color:#fff; }
.c-cta-inner p{ color: rgba(255,255,255,0.82); margin-bottom:2rem; }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.s-page-header{
  position:relative;
  padding: 7rem 0 5.5rem;
  background: var(--c-primary);
  overflow:hidden;
}
.s-page-header .c-container{ position:relative; z-index:2; max-width:760px; }
.s-page-header span.c-kicker{ color: var(--c-accent-light); }
.s-page-header h1{ color:#fff; }
.s-page-header p{ color: rgba(255,255,255,0.78); font-size:1.08rem; }
.c-page-header-cutout{
  position:absolute;
  border-radius:50%;
  top:-120px; right:-100px;
  width:420px; height:420px;
  background: var(--c-primary-light);
  opacity:0.5;
}
.s-page-header--about .c-page-header-cutout{ background-image:url('../images/about-founder-workspace.jpg'); background-size:cover; background-position:center; opacity:0.35; }
.s-page-header--templates .c-page-header-cutout{ background-image:url('../images/workflow-templates-desk.jpg'); background-size:cover; background-position:center; opacity:0.35; }
.s-page-header--disclaimer .c-page-header-cutout{ background-image:url('../images/disclaimer-reading-document.jpg'); background-size:cover; background-position:center; opacity:0.35; }
.s-page-header--contact .c-page-header-cutout{ background-image:url('../images/contact-office-exterior.jpg'); background-size:cover; background-position:center; opacity:0.35; }

/* ==========================================================================
   Story / about
   ========================================================================== */
.s-story{ padding: var(--space-section) 0; background: var(--c-paper); }
.c-story-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:4rem; align-items:center; }
.c-story-media{ border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.6; }
.c-story-media img{ width:100%; height:100%; object-fit:cover; }
.c-story-text p{ font-size:1.03rem; }

.s-mission{ padding: var(--space-section) 0; background: var(--c-secondary); }
.c-mission-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.6rem; }
.c-mission-card{
  background:#fff;
  padding: 2.2rem 1.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border:1px solid var(--c-border-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}
.c-mission-card i{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-accent-lighter);
  color: var(--c-accent-dark);
  margin-bottom:1.2rem;
}
.c-mission-card--muted i{ background: var(--c-primary-soft); color: var(--c-primary-mid); }
.c-mission-card h3{ font-size:1.1rem; }
.c-mission-card p{ font-size:0.92rem; margin:0; }
.c-mission-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ==========================================================================
   Templates page detail sections
   ========================================================================== */
.s-template-detail{ padding: var(--space-section) 0; background: var(--c-paper); }
.s-template-detail--alt{ background: var(--c-secondary); }
.c-template-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:4rem; align-items:center; }
.c-template-grid--reverse{ direction: rtl; }
.c-template-grid--reverse > *{ direction: ltr; }
.c-template-media{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.2; }
.c-template-media img{ width:100%; height:100%; object-fit:cover; }
.c-tag{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.04em;
  color: var(--c-accent-dark);
  background: var(--c-accent-lighter);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom:1.2rem;
}
.c-check-list{ margin: 1.2rem 0; }
.c-check-list li{
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
  padding: 0.5rem 0;
  color: var(--c-text-muted);
  font-size:0.98rem;
  border-bottom: 1px dashed var(--c-border);
}
.c-check-list li:last-child{ border-bottom:none; }
.c-check-list i{ color: var(--c-accent); margin-top:0.25rem; }

.s-template-extra{ padding: var(--space-section) 0; background: var(--c-secondary); }
.c-extra-card{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:0;
  background:#fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  border:1px solid var(--c-border-soft);
  transition: box-shadow var(--transition);
}
.c-extra-card:hover{ box-shadow: var(--shadow-xl); }
.c-extra-card__img{ width:100%; height:100%; object-fit:cover; min-height:260px; }
.c-extra-card__body{ padding: 2.6rem; display:flex; flex-direction:column; justify-content:center; }
.c-extra-card__body p{ font-size:1rem; }

/* ==========================================================================
   Disclaimer page
   ========================================================================== */
.s-disclaimer-body{ padding: var(--space-section) 0; background: var(--c-paper); }
.c-disclaimer-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:4rem; align-items:start; }
.c-disclaimer-media{ position:sticky; top:120px; border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.c-disclaimer-media img{ width:100%; height:100%; object-fit:cover; }
.c-disclaimer-text h2{ margin-top:1.6em; font-size:1.4rem; }
.c-disclaimer-text h2:first-child{ margin-top:0; }
.c-disclaimer-text p{ font-size:1rem; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.s-contact-methods{ padding: var(--space-section) 0; background: var(--c-paper); }
.c-methods-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.6rem; }
.c-method-card{
  background: var(--c-secondary);
  padding: 2.2rem 1.6rem;
  border-radius: var(--radius-lg);
  border:1px solid var(--c-border-soft);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.c-method-card i{ font-size:1.5rem; color: var(--c-accent-dark); margin-bottom:1rem; display:block; }
.c-method-card h3{ font-size:1.05rem; }
.c-method-card p{ font-size:0.92rem; margin:0; }
.c-method-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); background:#fff; }

.s-contact-form{ padding: var(--space-section) 0; background: var(--c-secondary); }
.c-contact-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:3.5rem; align-items:start; }
.c-contact-form-wrap{
  background:#fff;
  padding: 2.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border:1px solid var(--c-border-soft);
}
.c-form-row{ margin-bottom:1.2rem; }
.c-form-row--split{ display:grid; grid-template-columns: 1fr 1.4fr; gap:1.2rem; }
.c-form-row--secondary{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:1.6rem; }
.c-form-group label{ display:block; font-size:0.88rem; font-weight:600; margin-bottom:0.4rem; color: var(--c-primary); }
.c-form-group label span{ font-weight:400; color: var(--c-text-muted); }
.c-form-group input, .c-form-group textarea{
  width:100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border);
  background: var(--c-paper);
  font-family:inherit;
  font-size:0.98rem;
  color: var(--c-text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  resize: none;
}
.c-form-group input:focus, .c-form-group textarea:focus{
  outline:none;
  border-color: var(--c-accent);
  background:#fff;
  box-shadow: 0 0 0 4px var(--c-accent-lighter);
}
.c-checkbox{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  font-size:0.85rem;
  color: var(--c-text-muted);
  max-width:420px;
  cursor:pointer;
}
.c-checkbox input{ margin-top:3px; width:18px; height:18px; accent-color: var(--c-accent); cursor:pointer; }
.c-checkbox a{ color: var(--c-accent-dark); font-weight:600; }
.c-checkbox a:hover{ text-decoration: underline; }

.c-contact-side{ display:flex; flex-direction:column; gap:1.6rem; }
.c-contact-info-card{
  background: var(--c-primary);
  color:#fff;
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  box-shadow: var(--shadow-md);
}
.c-contact-info-card h3{ color:#fff; margin-bottom:0.4rem; }
.c-contact-info-card a, .c-contact-info-card span{
  display:flex; align-items:center; gap:0.6rem;
  color: rgba(255,255,255,0.85);
  font-size:0.95rem;
  transition: color var(--transition);
}
.c-contact-info-card a:hover{ color: var(--c-accent-light); }
.c-contact-info-card i{ width:20px; color: var(--c-accent-light); }
.c-contact-image{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.c-contact-image img{ width:100%; height:100%; object-fit:cover; }

.s-map{ padding: 0 0 var(--space-section); background: var(--c-secondary); }
.c-map-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--c-border-soft); }
.c-map-frame iframe{ display:block; }

/* ==========================================================================
   Thanks page
   ========================================================================== */
.s-thanks{
  min-height: 70vh;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark) 150%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 5rem 1.5rem;
  text-align:center;
}
.c-thanks-content{ max-width:560px; }
.c-thanks-icon{ font-size:3.4rem; color: var(--c-accent-light); margin-bottom:1.2rem; }
.c-thanks-content h1{ color:#fff; margin-bottom:0.6em; }
.c-thanks-content p{ color: rgba(255,255,255,0.82); font-size:1.08rem; margin-bottom:2.2rem; }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.s-legal-header{ padding: 6.5rem 0 3.5rem; background: var(--c-primary); }
.s-legal-header .c-kicker{ color: var(--c-accent-light); }
.s-legal-header h1{ color:#fff; margin-bottom:0.3em; }
.s-legal-header p{ color: rgba(255,255,255,0.7); margin:0; }
.s-legal-body{ padding: 4rem 0 var(--space-section); background: var(--c-paper); }
.c-legal-stack{ display:flex; flex-direction:column; gap:1.6rem; max-width:880px; margin:0 auto; }
.c-legal-card{
  background:#fff;
  padding: 2.4rem 2.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border:1px solid var(--c-border-soft);
  transition: box-shadow var(--transition), transform var(--transition);
}
.c-legal-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.c-legal-card h2{ font-size:1.25rem; margin-bottom:0.6em; }
.c-legal-card p{ font-size:0.97rem; margin:0; }
.c-legal-stack--terms .c-legal-card{ border-left: 4px solid var(--c-accent); }
.c-legal-stack--cookies .c-legal-card{ border-radius: var(--radius-xl); }

/* ==========================================================================
   Footer
   ========================================================================== */
.c-footer{ background: var(--c-primary-dark); color: rgba(255,255,255,0.75); padding: 4.5rem 0 0; margin-top:auto; }
.c-footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
.c-footer__brand p{ color: rgba(255,255,255,0.6); font-size:0.92rem; margin-top:1rem; }
.c-footer__logo{ color:#fff; }
.c-footer__col h4{ color:#fff; font-size:0.95rem; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:1.1rem; }
.c-footer__col{ display:flex; flex-direction:column; gap:0.7rem; }
.c-footer__col a, .c-footer__col span{
  color: rgba(255,255,255,0.65);
  font-size:0.92rem;
  display:flex; align-items:center; gap:0.5rem;
  transition: color var(--transition);
}
.c-footer__col a:hover{ color: var(--c-accent-light); }
.c-footer__bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 0;
  text-align:center;
  font-size:0.85rem;
  color: rgba(255,255,255,0.5);
}

/* ==========================================================================
   Cookie consent - bottom-left minimalist link
   ========================================================================== */
.c-cookie-link{
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index:400;
  background:#fff;
  color: var(--c-primary);
  border: 1px solid var(--c-border);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-full);
  font-size:0.82rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:0.5rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.c-cookie-link:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--c-secondary); }
.c-cookie-link i{ color: var(--c-accent); }
.c-cookie-link.is-pulse{ animation: cookiePulse 1.6s ease-in-out 3; }
@keyframes cookiePulse{
  0%, 100%{ box-shadow: var(--shadow-md); }
  50%{ box-shadow: 0 0 0 8px var(--c-accent-lighter), var(--shadow-lg); }
}

.c-cookie-modal{
  position: fixed;
  inset:0;
  z-index:500;
  background: rgba(22,29,58,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  padding: 1.5rem;
}
.c-cookie-modal.is-active{ opacity:1; visibility:visible; }
.c-cookie-modal__box{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  max-width: 480px;
  width:100%;
  max-height: 86vh;
  overflow-y:auto;
  position:relative;
  box-shadow: var(--shadow-xl);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s ease;
}
.c-cookie-modal.is-active .c-cookie-modal__box{ transform: translateY(0) scale(1); }
.c-cookie-modal__close{
  position:absolute;
  top:1.2rem; right:1.2rem;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--c-border);
  background: var(--c-secondary);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--transition), transform var(--transition);
}
.c-cookie-modal__close:hover{ background: var(--c-accent-lighter); transform: rotate(90deg); }
.c-cookie-modal__box h3{ margin-bottom:0.6em; }
.c-cookie-modal__box p{ font-size:0.92rem; }
.c-cookie-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--c-border-soft);
}
.c-cookie-option div{ display:flex; flex-direction:column; gap:0.2rem; }
.c-cookie-option strong{ font-size:0.92rem; color: var(--c-primary); }
.c-cookie-option span{ font-size:0.8rem; color: var(--c-text-muted); }
.c-cookie-option input{ width:20px; height:20px; accent-color: var(--c-accent); flex-shrink:0; }
.c-cookie-modal__actions{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.6rem; }
.c-cookie-modal__actions .c-btn{ flex:1; min-width:130px; padding: 0.75rem 1rem; font-size:0.85rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .c-values-grid, .c-mission-grid, .c-methods-grid{ grid-template-columns: repeat(2, 1fr); }
  .c-guide-grid{ grid-template-columns: repeat(2, 1fr); }
  .c-intro-grid, .c-story-grid, .c-approach-grid, .c-template-grid, .c-disclaimer-grid, .c-contact-grid{ grid-template-columns: 1fr; }
  .c-approach-card{ margin: -3rem 2rem 0; }
  .c-approach-grid--reverse .c-approach-card{ margin: -3rem 2rem 0; }
  .c-disclaimer-media{ position:static; }
  .c-footer__grid{ grid-template-columns: 1fr 1fr; }
  .c-extra-card{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .c-nav__links, .c-nav__cta{ display:none; }
  .c-nav__toggle{ display:flex; }
}

@media (max-width: 640px){
  .s-hero{ min-height: auto; padding-top: 4rem; }
  .c-hero-overlay::before{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity:0.94; }
  .c-hero-content{ margin: 0 1.2rem; max-width:none; padding: 3.5rem 0; }
  .c-values-grid, .c-mission-grid, .c-methods-grid, .c-guide-grid{ grid-template-columns: 1fr; }
  .c-form-row--split{ grid-template-columns: 1fr; }
  .c-form-row--secondary{ flex-direction:column; align-items:flex-start; }
  .c-form-row--secondary .c-btn{ width:100%; }
  .c-footer__grid{ grid-template-columns: 1fr; text-align:left; }
  .c-approach-card{ padding:2rem; margin: -2rem 1rem 0; }
  .c-mobile-menu__grid{ grid-template-columns: 1fr 1fr; gap:0.8rem; }
  .c-mobile-menu__grid a{ padding:1.6rem 0.8rem; }
  .c-cookie-link span{ display:none; }
  .c-cookie-link{ padding: 0.8rem; }
}

@media (max-width: 400px){
  .c-hero-actions{ flex-direction:column; align-items:stretch; }
}