/* =====================================================
   TOB'S TECH — MAIN STYLESHEET
   ===================================================== */


/* ================= RESET ================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


:root {
  --bg: #f2f0eb;
  --ink: #171717;
  --muted: #706f6a;
  --line: rgba(23, 23, 23, 0.14);
  --accent: #caff38;
  --dark: #171717;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family: "DM Sans", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}


body::before {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: 0.028;

  z-index: 20;

  background-image: url(
    "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
  );
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


/* ================= CONTAINER ================= */

.container {
  width: min(1180px, 90vw);

  margin: 0 auto;
}


/* ================= HEADER ================= */

.site-header {
  height: 88px;

  padding: 0 5vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--line);

  position: relative;

  z-index: 30;

  background: rgba(242, 240, 235, 0.92);

  backdrop-filter: blur(12px);
}


.logo {
  font-family: "Space Grotesk", sans-serif;

  font-size: 1.4rem;

  font-weight: 700;

  letter-spacing: -0.07em;
}


.logo span {
  color: #888;
}


.logo b {
  color: var(--accent);
}


.desktop-nav {
  display: flex;

  gap: 32px;

  color: var(--muted);

  font-size: 0.84rem;
}


.desktop-nav a {
  transition: 0.2s ease;
}


.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--ink);
}


.header-cta {
  font-size: 0.82rem;

  border-bottom: 1px solid var(--ink);

  padding-bottom: 5px;
}


.header-cta span,
.text-button span,
.arrow-link span,
.big-contact span,
.button span {
  margin-left: 6px;
}


.menu-toggle {
  display: none;

  background: none;

  border: 0;

  font-size: 1.5rem;

  cursor: pointer;
}


/* ================= MOBILE MENU ================= */

.mobile-menu {
  display: none;
}


/* ================= TYPOGRAPHY ================= */

h1,
h2,
h3 {
  font-family: "Space Grotesk", sans-serif;

  letter-spacing: -0.07em;

  line-height: 0.96;
}


h1 {
  font-size: clamp(4rem, 7.5vw, 8.5rem);

  max-width: 800px;
}


h1 em,
h2 em {
  font-style: normal;

  color: #777;
}


.eyebrow {
  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--muted);

  font-weight: 700;

  margin-bottom: 24px;
}


.pulse {
  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #80d11f;

  margin-right: 8px;

  box-shadow: 0 0 0 5px rgba(128, 209, 31, 0.13);
}


/* ================= HERO ================= */

.hero {
  min-height: calc(100vh - 88px);

  display: grid;

  grid-template-columns: 1.08fr 0.92fr;

  gap: 6vw;

  align-items: center;

  padding-top: 70px;

  padding-bottom: 90px;
}


.hero-lead {
  font-size: 1.08rem;

  line-height: 1.7;

  color: var(--muted);

  max-width: 550px;

  margin: 32px 0;
}


.hero-actions {
  display: flex;

  align-items: center;

  gap: 22px;

  flex-wrap: wrap;
}


.button {
  display: inline-block;

  padding: 16px 22px;

  font-size: 0.83rem;

  font-weight: 700;

  border: 0;

  cursor: pointer;

  transition: transform 0.25s ease;
}


.button-dark {
  background: var(--ink);

  color: #fff;
}


.button-dark:hover {
  transform: translateY(-3px);
}


.text-button {
  font-size: 0.84rem;

  font-weight: 700;

  border-bottom: 1px solid var(--ink);

  padding-bottom: 5px;
}


.hero-proof {
  display: flex;

  gap: 14px;

  align-items: center;

  margin-top: 65px;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 0.65rem;

  color: #888;
}


.hero-proof i {
  color: var(--accent);

  font-style: normal;
}


/* ================= HERO PORTRAIT ================= */

.hero-visual {
  min-height: 620px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}


.portrait-card {
  width: min(78%, 440px);

  aspect-ratio: 3 / 4;

  position: relative;

  z-index: 2;

  overflow: hidden;

  background: #d8d4cd;
}


.portrait-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  filter: saturate(0.82);
}


.portrait-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    transparent 52%,
    rgba(0, 0, 0, 0.5)
  );
}


.portrait-caption {
  position: absolute;

  bottom: 25px;

  left: 25px;

  color: #fff;

  z-index: 2;
}


.portrait-caption span {
  display: block;

  font-size: 0.65rem;

  letter-spacing: 0.16em;

  opacity: 0.7;

  margin-bottom: 5px;
}


.portrait-caption strong {
  font-family: "Space Grotesk", sans-serif;

  font-size: 1.3rem;

  line-height: 1;
}


.hero-ring {
  position: absolute;

  border: 1px solid var(--line);

  border-radius: 50%;
}


.ring-one {
  width: 550px;

  height: 550px;
}


.ring-two {
  width: 620px;

  height: 270px;

  transform: rotate(36deg);
}


.floating-note {
  position: absolute;

  background: var(--accent);

  padding: 10px 13px;

  font-size: 0.62rem;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: 0.12em;

  z-index: 3;
}


.note-top {
  top: 16%;

  right: 1%;

  transform: rotate(8deg);
}


.note-bottom {
  bottom: 14%;

  left: 0;

  transform: rotate(-8deg);
}


/* ================= TRUST STRIP ================= */

.trust-strip {
  background: var(--ink);

  color: #fff;

  padding: 22px 0;
}


.trust-inner {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;
}


.trust-inner > span {
  font-size: 0.65rem;

  letter-spacing: 0.15em;

  color: #999;
}


.trust-items {
  display: flex;

  align-items: center;

  gap: 20px;

  font-family: "Space Grotesk", sans-serif;

  font-size: 0.75rem;

  font-weight: 600;
}


.trust-items i {
  color: var(--accent);

  font-style: normal;
}


/* ================= SECTIONS ================= */

.section {
  padding-top: 140px;

  padding-bottom: 140px;
}


.section-intro {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-bottom: 60px;
}


.section-intro h2 {
  font-size: clamp(3rem, 5.8vw, 6rem);
}


.arrow-link {
  font-size: 0.8rem;

  font-weight: 700;

  border-bottom: 1px solid var(--ink);

  padding-bottom: 6px;

  white-space: nowrap;
}


/* ================= PROJECTS ================= */

.home-projects {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 20px;

  align-items: start;
}


.project-feature:nth-child(2) {
  margin-top: 100px;
}


.project-art {
  height: 470px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}


/* NOMA */

.art-noma {
  background: #202020;

  color: #f3f0e9;

  position: relative;
}


.art-label {
  position: absolute;

  top: 24px;

  left: 24px;

  font-size: 0.65rem;

  letter-spacing: 0.15em;

  color: #aaa;
}


.art-copy {
  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(3rem, 6vw, 6rem);

  line-height: 0.82;

  font-weight: 700;

  letter-spacing: -0.1em;

  transform: rotate(-7deg);
}


.art-copy em {
  font-style: normal;

  color: #888;
}


/* FLOWBASE */

.art-flow {
  background: #ddd9d1;

  display: flex;

  align-items: stretch;

  padding: 10%;

  gap: 0;
}


.flow-sidebar {
  width: 18%;

  background: #242424;
}


.flow-content {
  background: #fff;

  flex: 1;

  padding: 10%;

  display: flex;

  flex-direction: column;
}


.flow-content small {
  font-size: 0.55rem;

  color: #888;

  letter-spacing: 0.12em;
}


.flow-content strong {
  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(1.6rem, 3vw, 3rem);

  line-height: 0.92;

  letter-spacing: -0.07em;

  margin-top: 25px;
}


.flow-bars {
  margin-top: auto;

  display: flex;

  gap: 8px;

  align-items: flex-end;

  height: 100px;
}


.flow-bars i {
  display: block;

  background: #222;

  width: 22%;

  height: 40%;
}


.flow-bars i:nth-child(2) {
  height: 70%;
}


.flow-bars i:nth-child(3) {
  height: 100%;
}


/* PROJECT DETAILS */

.project-meta {
  display: flex;

  justify-content: space-between;

  border-bottom: 1px solid var(--line);

  padding: 18px 0;
}


.project-meta small {
  font-size: 0.62rem;

  color: #888;

  letter-spacing: 0.1em;
}


.project-meta h3 {
  font-size: 1.3rem;

  margin-top: 6px;
}


.project-meta > span {
  font-size: 1.4rem;
}


/* ================= DARK SECTION ================= */

.section-dark {
  background: var(--dark);

  color: #fff;
}


.section-dark .eyebrow {
  color: #999;
}


.principles {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}


.principle {
  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 22px;
}


.principle span {
  font-size: 0.7rem;

  color: #999;
}


.principle h3 {
  font-size: 2rem;

  margin: 35px 0 15px;
}


.principle p {
  color: #aaa;

  line-height: 1.7;

  max-width: 300px;
}


/* ================= CAPABILITIES ================= */

.capability-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  border-top: 1px solid var(--line);
}


.capability {
  display: grid;

  grid-template-columns: 55px 1fr 30px;

  gap: 20px;

  padding: 30px 0;

  border-bottom: 1px solid var(--line);

  transition: 0.25s ease;
}


.capability:nth-child(odd) {
  padding-right: 40px;

  border-right: 1px solid var(--line);
}


.capability:nth-child(even) {
  padding-left: 40px;
}


.capability:hover {
  background: rgba(255, 255, 255, 0.3);

  padding-left: 12px;
}


.capability:nth-child(even):hover {
  padding-left: 52px;
}


.capability span {
  font-size: 0.7rem;

  color: #888;
}


.capability h3 {
  font-size: 2rem;
}


.capability p {
  color: var(--muted);

  line-height: 1.6;

  margin-top: 10px;
}


.capability b {
  font-size: 1.3rem;

  font-weight: 400;
}


/* ================= CTA ================= */

.accent-section {
  background: var(--accent);
}


.cta-block h2 {
  font-size: clamp(3.8rem, 7vw, 8rem);

  margin-bottom: 50px;
}


/* ================= FOOTER ================= */

.site-footer {
  background: var(--ink);

  color: #fff;

  padding: 28px 0;
}


.footer-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  font-size: 0.7rem;

  color: #999;
}


.footer-inner .logo {
  color: #fff;
}


.footer-links {
  display: flex;

  gap: 25px;
}


/* ================= ANIMATIONS ================= */

.reveal {
  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */


/* TABLETS */

@media (max-width: 850px) {

  .desktop-nav,
  .header-cta {
    display: none;
  }


  .menu-toggle {
    display: block;
  }


  .mobile-menu {
    position: fixed;

    top: 88px;

    left: 0;

    right: 0;

    background: var(--ink);

    color: #fff;

    z-index: 25;

    display: flex;

    flex-direction: column;

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;
  }


  .mobile-menu.open {
    max-height: 400px;
  }


  .mobile-menu a {
    padding: 20px 5vw;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }


  .hero {
    grid-template-columns: 1fr;

    padding-top: 75px;
  }


  .hero-visual {
    min-height: 500px;
  }


  .portrait-card {
    width: 72%;
  }


  .ring-one {
    width: 420px;

    height: 420px;
  }


  .ring-two {
    width: 500px;

    height: 220px;
  }


  .trust-inner {
    flex-direction: column;

    align-items: flex-start;
  }


  .home-projects {
    grid-template-columns: 1fr;
  }


  .project-feature:nth-child(2) {
    margin-top: 0;
  }


  .principles,
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }


  .about-hero,
  .contact-layout {
    grid-template-columns: 1fr;

    gap: 55px;
  }


  .about-photo {
    max-width: 400px;
  }


  .case-visual {
    height: 420px;
  }


  .footer-inner {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* MOBILE */

@media (max-width: 520px) {

  .site-header {
    height: 72px;
  }


  .mobile-menu {
    top: 72px;
  }


  .hero h1 {
    font-size: 3.8rem;
  }


  .hero-visual {
    min-height: 430px;
  }


  .portrait-card {
    width: 80%;
  }


  .ring-one {
    width: 330px;

    height: 330px;
  }


  .ring-two {
    width: 390px;

    height: 170px;
  }


  .floating-note {
    font-size: 0.52rem;
  }


  .section {
    padding-top: 90px;

    padding-bottom: 90px;
  }


  .section-intro {
    display: block;
  }


  .section-intro .arrow-link {
    display: inline-block;

    margin-top: 25px;
  }


  .project-art {
    height: 310px;
  }


  .capability-grid,
  .skill-groups {
    grid-template-columns: 1fr;
  }


  .capability:nth-child(odd),
  .skill-groups > div:nth-child(odd) {
    padding-right: 0;

    border-right: 0;
  }


  .capability:nth-child(even),
  .skill-groups > div:nth-child(even) {
    padding-left: 0;
  }


  .capability h3 {
    font-size: 1.6rem;
  }


  .principles,
  .process-grid {
    grid-template-columns: 1fr;
  }


  .case-content {
    grid-template-columns: 45px 1fr;

    gap: 12px;
  }


  .case-content h2 {
    font-size: 3rem;
  }


  .service-row {
    grid-template-columns: 40px 1fr 20px;

    gap: 12px;
  }


  .service-row h2 {
    font-size: 2.6rem;
  }


  .about-hero {
    padding-top: 75px;
  }


  .about-intro h1 {
    font-size: 4rem;
  }


  .contact-hero h1 {
    font-size: 3.8rem;
  }


  .footer-links {
    flex-direction: column;

    gap: 10px;
  }

}
/* =====================================================
   ABOUT PAGE
   ===================================================== */

.about-hero {
  min-height: 720px;

  display: grid;

  grid-template-columns: 1fr 0.8fr;

  gap: 90px;

  align-items: center;

  padding-top: 100px;

  padding-bottom: 120px;
}


.about-intro h1 {
  font-size: clamp(4rem, 7vw, 8rem);
}


.about-intro p {
  max-width: 500px;

  margin-top: 35px;

  color: var(--muted);

  line-height: 1.75;

  font-size: 1.05rem;
}


.about-photo {
  position: relative;

  aspect-ratio: 4 / 5;

  max-width: 480px;

  overflow: hidden;

  background: #d8d4cd;
}


.about-photo img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  filter: saturate(0.82);
}


.about-photo::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    transparent 50%,
    rgba(0, 0, 0, 0.55)
  );
}


.about-photo-label {
  position: absolute;

  left: 25px;

  bottom: 25px;

  color: #fff;

  z-index: 2;
}


.about-photo-label span {
  display: block;

  font-size: 0.65rem;

  letter-spacing: 0.15em;

  opacity: 0.7;

  margin-bottom: 6px;
}


.about-photo-label strong {
  font-family: "Space Grotesk", sans-serif;

  font-size: 1.5rem;

  line-height: 0.95;
}


.story-grid {
  display: grid;

  grid-template-columns: 0.7fr 1.3fr;

  gap: 80px;
}


.story-copy {
  max-width: 700px;
}


.story-copy h2 {
  font-size: clamp(3rem, 6vw, 6rem);

  margin-bottom: 45px;
}


.story-copy p {
  color: var(--muted);

  line-height: 1.8;

  font-size: 1.05rem;

  margin-bottom: 25px;
}


.values-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;
}


.value-card {
  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 22px;
}


.value-card > span {
  color: #999;

  font-size: 0.7rem;
}


.value-card h3 {
  font-size: 2.4rem;

  margin: 45px 0 20px;
}


.value-card p {
  color: #aaa;

  line-height: 1.7;

  max-width: 300px;
}


.about-skills {
  border-top: 1px solid var(--line);
}


.skill-line {
  display: grid;

  grid-template-columns: 0.4fr 1fr;

  gap: 30px;

  padding: 28px 0;

  border-bottom: 1px solid var(--line);
}


.skill-line span {
  color: #888;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.skill-line strong {
  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(1.4rem, 3vw, 2.5rem);

  letter-spacing: -0.05em;
}


.location-section {
  background: #dedbd4;
}


.location-content {
  max-width: 800px;
}


.location-content h2 {
  font-size: clamp(3rem, 6vw, 6rem);

  margin-bottom: 35px;
}


.location-content p {
  max-width: 550px;

  color: var(--muted);

  line-height: 1.8;

  margin-bottom: 35px;
}


@media (max-width: 850px) {

  .about-hero,
  .story-grid {
    grid-template-columns: 1fr;
  }


  .about-photo {
    max-width: 500px;
  }


  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

}


@media (max-width: 520px) {

  .about-hero {
    padding-top: 75px;
  }


  .values-grid {
    grid-template-columns: 1fr;
  }


  .skill-line {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .skill-line strong {
    font-size: 1.5rem;
  }

}