/* ------------------------------------------------------------------
   birdmatrix.com — site.css

   Palette is pulled from the logo itself: #1B174E is the deep indigo in
   the bird's body gradient, #05A8D8 the cyan in its lower wing.

   Deliberately NOT gold. AdSchoolMaster is navy #2D3B56 with orange
   #FE8802, and indigo-plus-gold would read as the same company in a
   different mood. Cyan appears nowhere in ASM, so the two brands stay
   visibly separate while both stay Hemant's.

   ONE RULE WORTH KEEPING: the logo is the only place a gradient appears.
   Flat colour everywhere else. Gradient buttons and gradient headers are
   what made the old ThemeForest build read as 2021, and holding the line
   here is what gives the mark room to be the most interesting thing on
   the page.
------------------------------------------------------------------ */

:root {
  /* brand */
  --ink:        #1B174E;   /* headings, dark bands, body text at 90% */
  --ink-soft:   #4A4770;   /* secondary text */
  --ink-faint:  #7C7A99;   /* captions, meta */
  --accent:     #05A8D8;   /* links, CTAs, rules */
  --accent-dk:  #0487AE;   /* accent hover */
  --accent-lo:  #E6F6FC;   /* accent tint background */

  /* surface */
  --bg:         #FFFFFF;
  --bg-alt:     #F7F8FB;   /* alternating section band */
  --line:       #E3E5EE;
  --line-dk:    #34305F;   /* borders inside dark bands */

  /* type */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.13rem + .35vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + .72vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.6vw, 4.1rem);

  /* rhythm */
  --gap:      1.25rem;
  --pad:      clamp(1.25rem, 4vw, 2rem);
  --band:     clamp(3.5rem, 8vw, 6.5rem);
  --measure:  68ch;
  --wide:     1160px;
  --radius:   10px;
}

/* ---------------- reset ---------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p, ul, ol { margin: 0 0 1.15em; }
p { max-width: var(--measure); }

a { color: var(--accent-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------- layout ---------------- */

.wrap { width: min(100% - (var(--pad) * 2), var(--wide)); margin-inline: auto; }

.band { padding-block: var(--band); }
.band--alt  { background: var(--bg-alt); }
.band--dark { background: var(--ink); color: #fff; }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #fff; }
.band--dark a { color: #8FDCF3; }
.band--dark p { color: #C9C7DC; }

.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 54ch; }
.band--dark .lede { color: #C9C7DC; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin: 0 0 .8rem;
}
.band--dark .eyebrow { color: #8FDCF3; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }

.btn--quiet {
  background: transparent;
  color: var(--accent-dk);
  border-color: var(--line);
}
.btn--quiet:hover { background: var(--accent-lo); border-color: var(--accent); color: var(--ink); }

.band--dark .btn--quiet { color: #fff; border-color: var(--line-dk); }
.band--dark .btn--quiet:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---------------- header ---------------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.site-head .logo { width: 150px; }
.site-head nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-head nav a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.site-head nav a:hover,
.site-head nav a[aria-current="page"] { color: var(--accent-dk); }

@media (max-width: 800px) {
  .site-head { flex-wrap: wrap; }
  .site-head nav { width: 100%; }
  .site-head nav ul { gap: 1.1rem; flex-wrap: wrap; font-size: var(--step--1); }
}

/* ---------------- grids ---------------- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.card h3 { margin-bottom: .4rem; }
.card p  { margin-bottom: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* Work card: result first, client second. The number is the headline. */
.work { display: block; text-decoration: none; color: inherit; }
.work img { border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: .9rem; }
.work .result { font-size: var(--step-2); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.work .client { display: block; margin-top: .35rem; color: var(--ink-faint); font-size: var(--step--1);
                text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.work:hover .result { color: var(--accent-dk); }

/* ---------------- client logo wall ---------------- */

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem 2.5rem;
  align-items: center;
}
.logos img { margin-inline: auto; max-height: 42px; width: auto; filter: grayscale(1); opacity: .62; }
.logos a:hover img { filter: none; opacity: 1; }

/* ---------------- numbered process ---------------- */

.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.6rem; }
.steps li { counter-increment: step; padding-left: 3.4rem; position: relative; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-lo);
  color: var(--accent-dk);
  font-weight: 800;
}
.steps h3 { font-size: var(--step-0); margin-bottom: .2rem; }

/* ---------------- form ---------------- */

.form { display: grid; gap: .35rem; max-width: 32rem; }
.form label { font-weight: 600; font-size: var(--step--1); margin-top: .8rem; }
.form input, .form textarea, .form select {
  font: inherit;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form .btn { margin-top: 1.2rem; justify-self: start; }

/* ---------------- footer ---------------- */

.site-foot { background: var(--ink); color: #C9C7DC; padding-block: var(--band) 2.5rem; }
.site-foot .logo { width: 160px; margin-bottom: 1.2rem; }
.site-foot h4 { color: #fff; font-size: var(--step--1); letter-spacing: .09em;
                text-transform: uppercase; margin-bottom: .9rem; }
.site-foot ul { list-style: none; padding: 0; }
.site-foot li { margin-bottom: .45rem; }
.site-foot a { color: #C9C7DC; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .fine {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-dk);
  font-size: var(--step--1); color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* ---------------- utilities ---------------- */

.stack > * + * { margin-top: var(--gap); }
.center { text-align: center; }
.center p { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------- nav submenu ----------------
   CSS only. Opens on hover and on keyboard focus, so it works without JS and
   without a click handler. On narrow screens the submenu is always shown as an
   indented list rather than a hover target, because hover does not exist on a
   phone and a tap-to-open menu needs JS we do not otherwise need. */

.site-head .has-sub { position: relative; }

.site-head .sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 40;
  display: none;
  min-width: 15rem;
  margin: 0;
  padding: .6rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(27,23,78,.12);
}
.site-head .sub li { margin: 0; }
.site-head .sub a { display: block; padding: .45rem 1.1rem; font-weight: 500; }

.site-head .has-sub:hover > .sub,
.site-head .has-sub:focus-within > .sub { display: block; }

@media (max-width: 800px) {
  .site-head .sub {
    position: static;
    display: block;
    min-width: 0;
    padding: .2rem 0 .5rem;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .site-head .sub a { padding: .25rem 0 .25rem .9rem; opacity: .85; }
  .site-head nav > ul { display: block; }
  .site-head nav > ul > li { margin-bottom: .5rem; }
}

/* Header lockup. The full logo is 316x231, so at any usable width it makes a
   130px header on every page. Bird as image, wordmark as text: the mark stays
   crisp, the type matches the site, and the header drops to about 60px. */
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 52px; height: auto; }
.brand span { font-weight: 400; font-size: 1.25rem; letter-spacing: .01em; color: var(--ink); }
.brand b { font-weight: 800; }
.site-head .logo { display: none; }

/* ==================================================================
   VISUAL PASS

   Three changes, in order of how much they matter.

   1. A DISPLAY FACE FOR HEADINGS.
      Inter is a UI typeface. It is excellent at 15px in a sidebar and
      characterless at 60px in a hero. Every site that looks templated
      sets its headlines in the same face as its body text. Outfit is a
      geometric sans with real weight at large sizes, close in spirit to
      what Candour use, and free.

      Body stays Inter, because Outfit is not a reading face.

   2. GREYSCALE PHOTOGRAPHY.
      Candour's entire site is black and white and that is not an
      aesthetic whim: it makes photos shot at different times, by
      different people, on different cameras, read as one set. That is
      precisely the problem here. Six team photos from four months,
      WhatsApp exports next to a scanned headshot next to Canva files,
      at sizes from 17 KB to 1 MB. Desaturated they become a set.

   3. HAIRLINES INSTEAD OF CARDS.
      Border plus shadow plus radius on every block is the visual
      signature of a template. Rules and whitespace do the same
      separating job and disappear while doing it.
   ================================================================== */

:root {
  --display: Outfit, Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

h1, h2, h3, .result, .qz-score {
  font-family: var(--display);
  letter-spacing: -.03em;
}

h1 { font-weight: 800; line-height: 1.02; }
h2 { font-weight: 700; line-height: 1.06; }
h3 { font-weight: 700; letter-spacing: -.015em; }

/* The hero headline earns more room than the scale gives it. */
.band:first-of-type h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.2rem); }

.lede { font-weight: 400; }

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
}


/* ---------------- photography ---------------- */

.person img,
.work img,
figure img {
  filter: grayscale(1) contrast(1.04);
  transition: filter .25s;
}
.work:hover img { filter: none; }

/* Client logos were already greyscale on the wall; keep them consistent
   with everything else rather than a special case. */
.logos img { filter: grayscale(1); opacity: .55; }
.logos a:hover img { filter: none; opacity: 1; }


/* ---------------- hairlines, not cards ---------------- */

.card {
  padding: 0 0 1.6rem;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.card h3 { margin-top: 1.4rem; font-size: var(--step-1); }
.card p  { font-size: var(--step-0); color: var(--ink-soft); }

.band--dark .card { border-top-color: var(--line-dk); }
.band--dark .card p { color: #C9C7DC; }

/* Work cards lose the framed screenshot look too. */
.work img { border: 0; border-radius: 0; }

/* The team monogram keeps its circle — it is standing in for a photo,
   so it has to read as one. */
.person .initials { font-family: var(--display); }
.person img, .person .initials { border: 0; box-shadow: none; }


/* ---------------- buttons ---------------- */

/* Pill buttons with an outline read as more deliberate than filled
   rounded rectangles, and they stop the accent colour dominating a page
   that now has very little colour in it. */
.btn {
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  padding: .85rem 1.8rem;
}
.btn--quiet { border-color: currentColor; }


/* ---------------- rhythm ---------------- */

/* More air between sections. Minimal layouts are mostly whitespace, and
   the previous values were tuned for a denser page. */
:root { --band: clamp(4.5rem, 10vw, 9rem); }

.timeline .year { font-family: var(--display); }

/* ==================================================================
   FULL-BLEED PHOTOGRAPHY

   Edge to edge, breaking out of .wrap. A photograph constrained to the
   text column reads as an illustration of the text; one that runs the
   full width reads as the page itself. That difference is most of why
   the reference sites feel confident and a bordered image in a column
   does not.

   Type block, then image. Not text over image: overlaying a headline
   needs a dark scrim, and a scrim would fight the flat colour bands the
   rest of the site is built from.
   ================================================================== */

.bleed {
  margin: 0 0 var(--band);
  width: 100%;
}

.bleed img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

.bleed figcaption {
  width: min(100% - (var(--pad) * 2), var(--wide));
  margin: 1rem auto 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* A band immediately after a bleed image does not need its top padding;
   the photograph has already done the separating. */
.bleed + .band { padding-top: 0; }

/* Constrained variant, for a photo that sits inside a column rather
   than spanning the page. */
.inline-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 640px) {
  /* On a phone a 16:9 crop is a thin strip. Taking a taller slice of the
     same file keeps the subject readable without shipping a second
     image. */
  .bleed img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 62% center;
  }
}

/* ==================================================================
   FULL-BLEED PHOTOGRAPHY

   Edge to edge, breaking out of .wrap. A photograph constrained to the
   text column reads as an illustration of the text; one that runs the
   full width reads as the page itself. That difference is most of why
   the reference sites feel confident and a bordered image in a column
   does not.

   Type block, then image. Not text over image: overlaying a headline
   needs a dark scrim, and a scrim would fight the flat colour bands the
   rest of the site is built from.
   ================================================================== */

.bleed {
  margin: 0 0 var(--band);
  width: 100%;
}

.bleed img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

.bleed figcaption {
  width: min(100% - (var(--pad) * 2), var(--wide));
  margin: 1rem auto 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* A band immediately after a bleed image does not need its top padding;
   the photograph has already done the separating. */
.bleed + .band { padding-top: 0; }

/* Constrained variant, for a photo that sits inside a column rather
   than spanning the page. */
.inline-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 640px) {
  /* On a phone a 16:9 crop is a thin strip. Taking a taller slice of the
     same file keeps the subject readable without shipping a second
     image. */
  .bleed img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 62% center;
  }
}

/* ==================================================================
   TEAM SECTION, SECOND PASS

   The circles were the problem. Small circular avatars floating in a
   wide grid is the visual language of a comment thread or a Slack
   sidebar, not of a page asking you to trust seven people with your
   marketing budget. Three changes:

   1. SQUARE, AND MUCH LARGER. A portrait at 128px is an avatar. The
      same portrait filling a column is a photograph. Nothing else here
      matters as much.

   2. TIGHT GRID, SMALL GUTTER. Images close together read as one
      deliberate block. Spread out with big gaps they read as items that
      happen to be near each other.

   3. NAME OVER THE IMAGE, NOT UNDER IT. Removes the ragged text block
      below the row, which was what made the whole section look
      unfinished when the roles were different lengths.

   Colour returns on hover, which gives the row something to do without
   any JavaScript.
   ================================================================== */

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 3rem;
}

.team .person {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  text-align: left;
}

.team .person img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: grayscale(1) contrast(1.06);
  transition: filter .3s, transform .5s;
}

.team .person:hover img { filter: none; transform: scale(1.02); }

/* Gradient only here, and only as a legibility scrim over photography.
   It is not decoration and it is not visible as colour, so it does not
   break the no-gradients rule the rest of the site follows. */
.team .person::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(11,9,35,.88), rgba(11,9,35,0));
  pointer-events: none;
}

.team .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.1rem 1.1rem 1rem;
}

.team h3 {
  margin: 0;
  color: #fff;
  font-size: var(--step-0);
  letter-spacing: -.01em;
}

.team p {
  margin: .15rem 0 0;
  color: #B9B6D2;
  font-size: var(--step--1);
  line-height: 1.35;
  max-width: none;
}

/* Hemant's card carries a longer bio than the rest, so it takes two
   columns and stays legible instead of squeezing six lines into a
   square. */
.team .person--lead { grid-column: span 2; }
.team .person--lead img { aspect-ratio: 2 / 1; }

@media (max-width: 900px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .team .person--lead { grid-column: span 2; }
}

@media (max-width: 480px) {
  .team { grid-template-columns: 1fr; }
  .team .person--lead, .team .person--lead img { grid-column: auto; aspect-ratio: 1; }
}

/* ==================================================================
   MOBILE FIXES

   Two problems, both only visible on a phone.

   1. THE NAV WAS FULLY EXPANDED. The earlier rule collapsed the
      submenu into an always-visible indented list, which on a 390px
      screen meant eleven links stacked above the fold. The headline,
      which is the entire point of the homepage, started below the
      first screenful.

      Now: a button, hidden on desktop, that toggles aria-expanded.
      The CSS keys off that attribute, so there is one source of truth
      instead of a class and an attribute that can drift apart.

   2. THE PHOTOGRAPHS WERE BEING CROPPED. A 16:9 image forced into a
      4:3 box on a narrow screen loses a third of its width, which on
      the whiteboard shot cut off the PPC curve — the half of the
      drawing that makes the point. Better to show the whole frame
      small than half of it large.
   ================================================================== */


/* ---------------- the toggle button ---------------- */

.nav-toggle {
  display: none;              /* desktop: never */
  width: 44px;                /* 44px is the minimum comfortable tap target */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

/* Three bars drawn from one element: the middle is the box, the outer
   two are its pseudo-elements. On open it becomes a cross. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform .22s, opacity .18s;
}
.nav-toggle-bars { top: 21px; }
.nav-toggle-bars::before { content: ""; top: -7px; left: 0; }
.nav-toggle-bars::after  { content: ""; top:  7px; left: 0; }

[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }


@media (max-width: 800px) {

  .nav-toggle { display: block; order: 3; }

  .site-head {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }
  .site-head .brand { order: 1; margin-right: auto; }

  /* The header CTA is the whole reason someone is on the page, so it
     stays visible rather than hiding inside the menu. Shrunk to fit
     alongside the burger. */
  .head-cta {
    order: 2;
    padding: .5rem 1rem;
    font-size: var(--step--1);
  }

  /* Closed by default. max-height rather than display:none so it can
     animate, and so screen readers still see it in the DOM. */
  .site-head nav {
    order: 4;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-open .site-head nav { max-height: 32rem; }

  .site-head nav > ul {
    display: block;
    margin: .5rem 0 1rem;
    border-top: 1px solid var(--line);
  }
  .site-head nav > ul > li {
    margin: 0;
    border-bottom: 1px solid var(--line);
  }
  .site-head nav > ul > li > a {
    display: block;
    padding: .85rem .2rem;
    font-size: var(--step-0);
  }

  /* Submenu indented and quieter, but present. Six service pages are
     worth reaching in one tap rather than two. */
  .site-head .sub {
    position: static;
    display: block;
    padding: 0 0 .6rem;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .site-head .sub a {
    padding: .4rem 0 .4rem 1.1rem;
    font-size: var(--step--1);
    opacity: .8;
  }
}


/* ---------------- photography on narrow screens ---------------- */

@media (max-width: 640px) {
  /* Overrides the earlier 4:3 crop. Full frame, no cover, nothing lost. */
  .bleed img {
    aspect-ratio: auto;
    object-fit: contain;
  }
}


/* ---------------- while the menu is open ---------------- */

/* Stops the page scrolling behind an open menu, which otherwise feels
   broken when you scroll and the header stays put. */
.nav-open, .nav-open body { overflow: hidden; }

@media (min-width: 801px) {
  /* Safety net: if the class is somehow left on when the viewport is
     widened, desktop layout still wins. */
  .nav-open, .nav-open body { overflow: visible; }
  .site-head nav { max-height: none; overflow: visible; }
}

/* Header row on mobile. The previous ordering let the burger wrap onto
   its own line, making a three-row header before any content. Logo,
   CTA and burger belong on one row; only the nav wraps below. */
@media (max-width: 800px) {
  .site-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .6rem;
    row-gap: 0;
    padding-block: .8rem;
  }
  .site-head .brand   { order: 1; margin-right: auto; flex: 0 1 auto; }
  .site-head .head-cta{ order: 2; flex: 0 0 auto; white-space: nowrap; }
  .site-head .nav-toggle { order: 3; flex: 0 0 44px; margin-right: -10px; }
  .site-head nav      { order: 4; flex: 1 0 100%; }
}

/* Below 420px the CTA and burger stop fitting beside the wordmark, so
   the wordmark goes and the bird carries the brand on its own. */
@media (max-width: 420px) {
  .brand span { display: none; }
  .brand img  { width: 44px; }
}

/* The burger's bars are absolutely positioned, so display:none on the
   button alone was not enough to stop them painting. That stray dash
   between the logo and the nav on desktop is those bars. */
@media (min-width: 801px) {
  .nav-toggle,
  .nav-toggle * { display: none !important; }
}

/* Keep the wordmark at every width. Hiding it read as a broken image
   rather than a deliberate mark-only lockup. The CTA shortens instead,
   since "Free audit" says the same thing in half the space. */
@media (max-width: 420px) {
  .brand span { display: inline; font-size: 1.05rem; }
  .brand img  { width: 38px; }
  .head-cta   { font-size: .78rem; padding: .45rem .8rem; }
}

/* ==================================================================
   THE DRAWN UNDERLINE

   One flourish, on the homepage hero, and nowhere else. The rest of
   this site is deliberately flat and quiet, which is exactly why a
   single moving element works: it is the only one, so it reads as
   deliberate rather than as decoration.

   Mechanically it is an SVG path whose dash pattern equals its own
   length, offset by that same length. The line exists but every pixel
   of it falls in a gap, so it is invisible. Animating the offset to
   zero uncovers it left to right, which looks like a marker drawing.

   The path is not level. A straight rule reads as a border; a few
   pixels of wobble reads as a hand.
   ================================================================== */

.draw {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.draw-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.12em;
  width: 100%;
  height: .18em;
  overflow: visible;
  color: var(--accent);          /* stroke inherits via currentColor */
  pointer-events: none;
}

.draw-line path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}

/* The class the observer adds. Kept separate from the element so the
   line stays hidden until it is genuinely in view, rather than firing
   on load while the hero is still below the fold on a phone. */
.draw-line.is-drawn path {
  animation: draw-in 1.1s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes draw-in {
  to { stroke-dashoffset: 0; }
}

/* Reduced motion: no drawing, but the line still appears. Removing it
   entirely would leave the headline looking unfinished for anyone who
   has asked their machine to calm down. */
@media (prefers-reduced-motion: reduce) {
  .draw-line path { stroke-dashoffset: 0; }
  .draw-line.is-drawn path { animation: none; }
}

@media (max-width: 560px) {
  /* The phrase wraps on a phone, and nowrap would push the headline
     off the side. Let it wrap and drop the line, which only reads
     correctly on a single unbroken run of text. */
  .draw { white-space: normal; }
  .draw-line { display: none; }
}

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

   Replaces the underline experiment. Same technique, better subject:
   the two curves from the whiteboard photograph, redrawn as SVG paths
   that stroke themselves in.

   Why this and not an illustrated character: a character would be
   decoration, and anything generated rather than drawn by a person
   reads as clip art. These curves are the argument of the whole site,
   already in Hemant's own handwriting further down the page. Ornament
   that carries meaning is the only kind worth the weight.

   Sequence matters. SEO draws first and slowly, PPC follows and spikes
   fast, because that is the point being made. If they drew together
   the contrast would be lost.
   ================================================================== */

.hero-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-curves { margin: 0; }
.hero-curves svg { width: 100%; height: auto; overflow: visible; }

.hero-curves figcaption {
  margin-top: .9rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-align: center;
}

/* Both curves start fully "gapped": the dash pattern equals the path
   length, offset by the same, so every drawn pixel lands in a gap.
   Animating the offset to zero uncovers the line left to right. 620 is
   comfortably longer than either path, which is all that matters. */
.hero-curves .c {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}

.hero-curves .lbl {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink-faint);
  opacity: 0;
}
.hero-curves .lbl-seo { fill: var(--accent-dk); }

.hero-curves .axis { opacity: 0; }

/* The class the observer adds when the hero scrolls into view. */
.is-drawn .axis    { animation: fade-in .4s ease forwards; }
.is-drawn .c-seo   { animation: draw-line 1.5s cubic-bezier(.6,0,.35,1) .25s forwards; }
.is-drawn .c-ppc   { animation: draw-line 1.0s cubic-bezier(.5,0,.3,1) 1.35s forwards; }
.is-drawn .lbl-seo { animation: fade-in .5s ease 1.5s forwards; }
.is-drawn .lbl-ppc { animation: fade-in .5s ease 2.1s forwards; }

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in   { to { opacity: 1; } }


/* Reduced motion: the finished drawing, no animation. Hiding it would
   leave the hero looking half-built for anyone who asked their machine
   to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  .hero-curves .c   { stroke-dashoffset: 0; }
  .hero-curves .lbl,
  .hero-curves .axis { opacity: 1; }
  .is-drawn * { animation: none !important; }
}


@media (max-width: 900px) {
  /* Two labelled curves at phone width are illegible, and the
     whiteboard photograph a screen further down makes the identical
     point with more authority. So it goes rather than shrinks. */
  .hero-split { display: block; }
  .hero-curves { display: none; }
}

/* ==================================================================
   THE RING

   A marker circle around "SEO" in the hero headline. Phones only.

   The desktop hero already has the two curves doing the work. Two
   moving flourishes in one viewport is one too many, and the whole
   reason a single flourish reads as deliberate is that it is single.

   The path overshoots where it closes. A geometric ellipse looks like
   a border; a hand never lands exactly back on its starting point, and
   that small failure is what makes it read as drawn.
   ================================================================== */

.ring {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ring-svg { display: none; }   /* desktop: the curves have this covered */


@media (max-width: 900px) {

  .ring-svg {
    display: block;
    position: absolute;
    /* Deliberately loose and slightly off-centre. A ring that fits the
       word exactly looks like a badge. */
    left: -14%;
    top: -22%;
    width: 128%;
    height: 150%;
    overflow: visible;
    color: var(--accent);
    pointer-events: none;
    z-index: -1;               /* behind the letters, like ink under text */
  }

  .ring-svg path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
  }

  /* Drawn on load rather than on scroll: on a phone the headline is the
     first thing in view, so there is nothing to wait for. The delay
     lets the page settle first. */
  .ring-svg.is-drawn path {
    animation: ring-in 900ms cubic-bezier(.6, 0, .35, 1) 350ms forwards;
  }
}

@keyframes ring-in { to { stroke-dashoffset: 0; } }


@media (prefers-reduced-motion: reduce) {
  .ring-svg path { stroke-dashoffset: 0; }
  .ring-svg.is-drawn path { animation: none; }
}

/* Product UI keeps its colour. Greyscale unifies photography, but an
   interface's colour is information: KD badges, chart segments, state. */
.bleed img[src*="dorqa"] { filter: none; }


.timeline{list-style:none;margin:2.5rem 0 0;padding:0;max-width:46rem}
.timeline li{display:grid;grid-template-columns:5rem 1fr;gap:0 1.75rem;padding:1.6rem 0;border-top:1px solid rgba(27,23,78,.12)}
.timeline li:last-child{border-bottom:1px solid rgba(27,23,78,.12)}
.timeline__year{font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:1.05rem;line-height:1.5;color:#1B174E}
.timeline li:last-child .timeline__year{color:#05A8D8}
.timeline h3{margin:0 0 .35rem;font-size:1.05rem;line-height:1.5}
.timeline p{margin:0}
@media(max-width:640px){
  .timeline li{grid-template-columns:1fr}
  .timeline__year{font-size:.9rem;margin-bottom:.3rem}
}


@media(max-width:640px){
  section p > .btn{display:block;width:100%;box-sizing:border-box;text-align:center}
  section p > .btn + .btn{margin-top:.75rem}
}