/* ==========================================================================
   HOME HERO — LIVE on index.html since 2026-08-31
   --------------------------------------------------------------------------
   Applied from /home-hero-best. This file IS the homepage hero: edit it here,
   not in a lab copy. /home-hero-ten's version 01 links this same file, so the
   ten comparisons stay honest against what is actually shipped.
   --------------------------------------------------------------------------
   NO MARKUP CHANGES. Not one element added, removed, renamed or reordered.
   The hero in this preview is the same five nodes index.html already has:

     .label      Full-Service Digital Marketing Agency   (the page hides it)
     h1          Digital marketing that brings customers.
     .capture    the audit field + Get free audit
     .microline  Free · Written by a strategist · Back in 48 hours
     .sent       the confirmation, still hidden until submit

   So everything below is type, scale, colour, air and one focus state. The
   brief's two bans hold: no supporting line (there is no element for one),
   and no "250+ / 30+ / 11+" (the microline says what the audit is, which is
   what it already said).

   The four decisions that do the work:

   1  ONE LINE. The headline is the whole first screen, so it gets the whole
      lane. Sized off the lane, not off a round number — measured, this line
      runs 1345px at 80.6px in a 1325px lane, so it is capped at what fits.
   2  ONE THING BELOW IT. The field is the only object on the screen, so it
      is drawn like one: a card, not a form control.
   3  AIR THAT MEANS SOMETHING. Two large gaps and two small ones. The big
      gap is between the promise and the action.
   4  OPTICALLY CENTRED, not geometrically. The Our Work band below carries
      real weight, so the block rides slightly high or it reads as sunk.

   Loaded last, after every inline <style> in index.html — which is how it
   wins over that file's seven accumulated .hero blocks with no !important.
   ========================================================================== */

/* ==========================================================================
   1 · THE SCREEN
   ========================================================================== */
.hero{
  /* --wpad, which is the gutter the page actually uses above 1281px: the
     header sets `padding: 16px var(--wpad)` and the Our Work band sets
     `--rail-gut: var(--wpad, var(--pad))`. The hero was the only band on the
     first screen NOT on that gutter — it used --pad, so at 1440 the headline
     started 6px left of the wordmark and 6px left of the first work card, and
     at 1920 it was out by 14. Now the eyebrow, the headline, the tab row and
     the first card all begin on the same vertical. */
  padding-inline: var(--wpad, var(--pad));

  /* the headline is sized off THIS box, not off the viewport — see the
     headline rule below */
  container-type: inline-size;
  /* the block rides above the geometric centre by the amount the band below
     it weighs — geometric centring reads as sunk on a screen with a heavy
     bottom third */
  padding-top: 0;
  padding-bottom: clamp(12px, 2.6vh, 34px);
}

/* the grid is a texture, not a pattern: it should be felt behind the
   headline and gone by the time it reaches the edges */
.screen .tex{
  -webkit-mask-image: radial-gradient(105% 72% at 50% 30%, #000 18%, transparent 78%);
          mask-image: radial-gradient(105% 72% at 50% 30%, #000 18%, transparent 78%);
}

/* ==========================================================================
   2 · THE EYEBROW
   The page hides it because Section 2 opens with the same words. On a screen
   this quiet it earns its place back: it is the only line that says what
   kind of company this is, and it costs 13px of height.
   ========================================================================== */
.hero .label{
  display: block; margin: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--brand);
}

/* ==========================================================================
   3 · THE HEADLINE
   One line, filling the lane, at every width from 1280 up.

   Sized in `cqw` — a share of the LANE — not `vw`. A vw headline breaks
   between 1440 and 1800, where the page's gutter has hit its 58px cap and the
   lane has stopped growing while vw has not: measured, 5vw wrapped this line
   onto two lines at 1600x900. One cqw rule holds it at 95% of the lane at
   1280, 1366, 1440, 1512, 1600, 1920 and 2560 alike.

   95%, not 100%, on purpose. The biggest one-line size in a 1336px lane is
   about 80px; text that fills 99% of its lane reads as text that only just
   fit. 5.7cqw is where a headline looks like it chose its width.

   The `min(cqw, vh)` is the height contract: the vh half is what stops it
   running a short laptop out of room, with no media query. 9.4vh is tuned so
   the two halves cross at 1600x900 — below that the screen is the limit, above
   it the lane is, and the fill stays 94-95% either side of the crossover.
   ========================================================================== */
.hero h1{
  margin: clamp(22px, 3.4vh, 38px) 0 0;
  max-width: none;
  font-size: clamp(34px, min(5.7cqw, 9.4vh), 104px);
  line-height: .98;
  letter-spacing: -.052em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 i{ font-style: normal; color: var(--accent); }

/* ==========================================================================
   4 · THE FIELD
   The only object on the screen, so it is drawn as an object: a padded shell
   with the button inset in it, lifted off the grid by a long soft shadow,
   and a focus ring that is the whole card rather than the input.
   ========================================================================== */
.hero .capture{
  width: min(620px, 100%);
  margin-top: clamp(38px, 7vh, 78px);
  padding: 8px;
  gap: 8px;
  border: 1px solid #D6DEEC;
  border-radius: 16px;
  background: var(--paper);
  box-shadow:
    0 1px 2px rgba(11, 13, 18, .03),
    0 24px 48px -32px rgba(11, 13, 18, .5);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hero .capture:focus-within{
  border-color: var(--g-blue);
  box-shadow:
    0 0 0 4px rgba(26, 115, 232, .13),
    0 24px 48px -32px rgba(11, 13, 18, .5);
}
.hero .capture input{
  height: clamp(48px, 6.2vh, 56px);
  padding: 0 18px;
  font-size: 16px;
  letter-spacing: -.012em;
  color: var(--ink);
}
.hero .capture input::placeholder{ color: #8E97A7; }
.hero .capture button{
  height: clamp(48px, 6.2vh, 56px);
  padding: 0 28px;
  border-radius: 11px;
  font-size: 15px; font-weight: 700; letter-spacing: -.012em;
  background: var(--g-blue);
  box-shadow: 0 6px 14px -8px rgba(26, 115, 232, .7);
  transition: background .18s ease, box-shadow .18s ease;
}
.hero .capture button:hover{
  background: #1663CE;
  box-shadow: 0 8px 18px -9px rgba(26, 115, 232, .85);
}
.hero .capture button:active{ box-shadow: 0 4px 10px -8px rgba(26, 115, 232, 1); }

/* ==========================================================================
   5 · THE LINE UNDER IT
   Three facts about the thing just above it, in the quietest voice on the
   screen. It is the only place a colour other than the action blue appears.
   ========================================================================== */
.hero .microline{
  margin-top: clamp(15px, 2.4vh, 22px);
  font-size: 13px;
  letter-spacing: -.005em;
  color: var(--ink-3);
}
.hero .microline b{ color: var(--g-green); font-weight: 700; }
.hero .microline i{ font-style: normal; color: var(--ink-4); padding: 0 .6em; }
.hero .sent{ margin-top: clamp(38px, 7vh, 78px); font-size: 15px; }

/* ==========================================================================
   6 · SHORT LAPTOPS
   The vh half of every clamp already shrinks the type; these give back the
   air instead, which is the cheaper thing to lose.
   ========================================================================== */
@media (min-width: 761px) and (max-height: 800px){
  .hero h1{ margin-top: clamp(14px, 2.4vh, 24px); }
  .hero .capture{ margin-top: clamp(26px, 5vh, 48px); }
  .hero .microline{ margin-top: clamp(12px, 1.9vh, 16px); }
  .hero{ padding-bottom: clamp(8px, 1.6vh, 18px); }
}

/* ==========================================================================
   7 · PHONES
   The same four things, at phone proportions. The field goes full width and
   the button sits under it, which is what the page already does — this only
   sizes it properly.
   ========================================================================== */
@media (max-width: 760px){
  .hero{ padding-inline: clamp(18px, 5vw, 26px); padding-bottom: 16px; }
  .screen .tex{ -webkit-mask-image: radial-gradient(140% 62% at 50% 26%, #000 16%, transparent 80%);
            mask-image: radial-gradient(140% 62% at 50% 26%, #000 16%, transparent 80%); }
  .hero .label{ font-size: 10px; letter-spacing: .22em; }
  .hero h1{
    margin-top: clamp(16px, 2.6vh, 24px);
    font-size: clamp(31px, 8.8vw, 42px);
    line-height: 1.02; letter-spacing: -.042em;
  }
  .hero .capture{
    width: 100%; margin-top: clamp(24px, 4vh, 34px);
    padding: 7px; border-radius: 14px;
  }
  .hero .capture input{ height: 50px; font-size: 16px; padding: 0 15px; }
  .hero .capture button{ height: 50px; width: 100%; font-size: 15px; border-radius: 10px; }
  .hero .microline{ margin-top: 13px; font-size: 12.2px; }
  .hero .microline i{ padding: 0 .45em; }
}


/* ==========================================================================
   9 · THE FIXED PREFIX  —  treatment 02, "Hairline"      applied 2026-09-05
   --------------------------------------------------------------------------
   Picked from /doctor/audit-prefix-inline-m9.html, where ten treatments were
   measured against this field. No ground behind the prefix and no plate: one
   1px rule does every bit of the separating, which is the quietest way to say
   "this half is already filled in" on a hero whose only object is this field.

   The prefix is a <span> beside the input, NOT a value inside it. That is the
   whole trick: it cannot be selected, edited, backspaced or submitted away,
   and no readonly attribute or caret guard is needed.

   It is deliberately the input's own height and nothing more, so it can never
   be the thing that makes the component grow. Measured after applying: the
   capture is 620x74 at desktop and 352x124 on a phone — the same two numbers
   it had before the prefix existed.
   ========================================================================== */
.hero .capture .capfix{
  flex: none; display: flex; align-items: center; user-select: none;
  height: clamp(48px, 6.2vh, 56px);          /* the input's height, exactly */
  padding: 0 15px 0 16px;
  border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 13.5px; letter-spacing: -.02em;
  color: var(--ink-3);
}
/* the typed half moves in to meet the rule — the shell's 8px gap plus the
   input's own 18px read as a gulf between the two halves of one address */
.hero .capture input{ padding-left: 10px; }

@media (max-width: 760px){
  .hero .capture .capfix{ height: 50px; padding: 0 11px 0 13px; font-size: 12.5px; }
  .hero .capture input{ padding-left: 9px; }
}

/* index.html gives the input `flex: 1 1 100%` below 620px so it takes a row of
   its own and the button takes the next. With a prefix on that row, 100% pushes
   the prefix onto a row of its own as well and the component grows by 58px.
   110px keeps the same two rows, the same height, and lets the input have
   whatever the prefix does not. */
@media (max-width: 620px){
  .hero .capture input{ flex: 1 1 110px; }
}

/* --------------------------------------------------------------------------
   621-760px — a bug this prefix made impossible to miss, not one it created.
   Section 7 above gives the button `width: 100%` for phones, but the shell is
   only told to wrap at 620px (index.html's @media 620 block). Between 621 and
   760 the button therefore took the entire row on its own and the input was
   left about 32px wide — measured, before any of this was applied. Give the
   button its natural width in exactly the band where it is still sharing a
   row. Nothing else changes: same one row, same 66px height.
   -------------------------------------------------------------------------- */
@media (min-width: 621px) and (max-width: 760px){
  .hero .capture button{ width: auto; }
}


/* ==========================================================================
   10 · THE BLUE ACCENT  —  version C          applied 2026-09-08
   --------------------------------------------------------------------------
   Picked from /doctor/hero-accent-t4.html, where three levels of blue were
   compared against a measured reference: the Google Ads headline
   "Google Ads that bring customers, not just clicks." runs 29.4% of its ink
   in blue. That was the ceiling, not a feeling.

   Word-level ink mass of this headline, measured at 1440:

       Digital 16.5% | marketing 26.7% | that 10.6% | brings 16.6%
       | customers 28.3% | . 1.2%

   So the candidates were 16.6% ("brings"), 29.5% ("customers."), and then a
   jump straight to 45.9% ("brings customers.") — a half-blue headline, which
   is the thing being avoided. "brings" and "customers" are adjacent, so there
   is no two-beat option on this line, only a contiguous run. The third level
   therefore came from CHROMA, not quantity: the same word as the middle
   option, in the more saturated of the two blues the site already owns.

   THREE THINGS CHANGE. Nothing else — no structure, no layout, no wording,
   no width, no rhythm, no headline size, no card geometry, no behaviour. The
   card is still 620x74 on desktop and 351x124 on a 390px phone, and the
   headline still sets on one line from 834 to 1920 and wraps
   "Digital marketing that / brings customers." below that, with the accent
   whole on one line at every width.

   ==========================================================================
   10a · THE HEADLINE
   --------------------------------------------------------------------------
   The accent is "customers." — the word and the full stop as one mark, 29.5%
   of the line's ink, at the tail.

   Read as two halves the line is "Digital marketing that brings" — what
   everyone sells — and "customers." — what is actually being bought. Putting
   the colour transition on that seam is the colour doing semantic work: black
   states the category, blue names the thing the reader came for. One
   transition point, at the end, so the black run is never interrupted.

   --brand (#0B57F5) and not --accent (#1A73E8): it is the DMD wordmark's own
   blue, sitting at the top left of the same screen, and the blue of the
   eyebrow directly above the headline. Mark, eyebrow and accent become one
   vertical. It is also exactly what google-ads.html does with
   "not just clicks", so the two pages read as one system.
   ========================================================================== */

/* <em> is italic by default and this headline must never slant. The accent is
   a colour change and nothing else: same face, same 800 weight, same -.052em
   tracking, same size, same baseline. */
.hero h1 em{
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--brand);
}
/* Section 3 above paints the full stop with `.hero h1 i` (0,2,1). The stop is
   now INSIDE the accent, so that rule would leave it a different blue from
   the word it closes — which is the seam the Google Ads page has today (its
   em is #0B57F5 and its full stop #1A73E8, measured). Higher specificity, so
   the terminal reads as one mark. */
.hero h1 em i{ color: inherit; }


/* ==========================================================================
   10b · THE BUTTON
   --------------------------------------------------------------------------
   It was 154x56, radius 11, weight 700, with
   `box-shadow: rgba(26,115,232,.7) 0 6px 14px -8px`.

   (a) THE COLOURED SHADOW WAS THE AGGRESSION. A blue glow under a blue slab
       does not read as elevation, it reads as the blue bleeding — and at
       -8px spread it cleared the card's own bottom edge, so the brightest
       thing on the first screen was also the only thing leaking out of its
       container. Replaced by a 1px inner edge: seated in the card, not
       floating on it, and nothing glows.

   (b) THE RADIUS WAS NOT CONCENTRIC. The card is radius 16 with 8px of
       padding, so a button fitted to it is radius 8 — outer minus the gap.
       At 11 the corners were 3px rounder than the aperture they sat in, which
       is what made the button read as a pill dropped into the card rather
       than part of it. Phone: card 14, padding 7, so 7.

   (c) 700 IS A HEADLINE WEIGHT on a 15px label inside a 620px card, and
       -.012em was set to match it; at 600 the same tracking reads cramped.

   (d) DEPTH, NOT HEIGHT. #1663CE is not a new shade — it is this file's own
       :hover blue, now used at rest. At 8000px2 the brighter #1A73E8 is what
       reads as electric; the deeper blue reads considered at the same size
       and is still unmistakably the primary action. Hover brightens back to
       #1A73E8, so the energy is in the interaction rather than in the
       resting state.

   Height is deliberately untouched. The button is inset beside an input of
   the same height; shortening it would leave a 2-4px ledge above and below
   and read as a mistake, not as restraint. The blue comes down by AREA and
   DEPTH only: 154x56 = 8569px2 becomes 138x56 = 7723px2.

   And it comes down because the headline's went up. The blue on the first
   screen is one budget: the version with the most blue in the type gets the
   quietest button, or the two compete.
   ========================================================================== */
.hero .capture button{
  border-radius: 8px;                 /* 16 card - 8 padding = concentric */
  font-weight: 600;
  letter-spacing: -.004em;
  font-size: 14.5px;
  padding: 0 22px;
  background: #1663CE;
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, .06);
  transition: background .18s ease, box-shadow .18s ease;
}
.hero .capture button:hover{
  background: var(--g-blue);
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, .06);
}
.hero .capture button:active{ box-shadow: inset 0 1px 2px rgba(11, 13, 18, .20); }


/* ==========================================================================
   10c · THE URL PREFIX
   --------------------------------------------------------------------------
   Section 9 set it in ui-monospace at 13.5px with -.02em, beside a 16px
   -apple-system input. It read as slanted and as not belonging to the field.
   NOTHING WAS ITALIC — `font-style` was normal throughout. Four real faults:

   (a) THE SLANT IS THE MONOSPACE. "https://www." contains the only two
       strongly-angled strokes in the field, and a monospace face gives each
       of them a full fixed advance — so the `//` sits as a wide,
       evenly-spaced pair of diagonals at the optical centre of the prefix.
       The face was also the only monospace on the first screen, which is the
       "disconnected from the rest of the input" half of the same problem.
       Both go away in the page's own UI face — the face the domain beside it
       is already set in.

   (b) THE BASELINES DID NOT MEET. The shell is `display:flex` with
       `align-items:center`, which centres BOXES. Two different faces at two
       different sizes put the two text baselines apart — visible at 1.7x,
       the prefix sitting low. Same face plus one line-height on BOTH halves
       makes the centres coincide, and therefore the baselines, by
       construction rather than by nudging. Measured 0.00px offset after, at
       every width from 360 to 1920.

   (c) THE TRACKING FOUGHT THE FACE. -.02em pulls a monospace in against its
       own fixed advance, which is what made it look squeezed. Released to 0
       — a hair looser than the domain's -.012em, which is what reads as
       precise rather than as decorative.

   (d) THE HIERARCHY WAS INVERTED. At 13.5px the prefix was SMALLER than the
       16px domain but louder, because the mono texture attracted the eye more
       than the size gave up. Now 15px and --ink-3: one step under the typed
       value, one step over the placeholder — something already filled in,
       which is what it is.

   The separator stays full height but is drawn in --line-2 rather than
   --line, so it registers as a seam rather than a wall.

   Setting the prefix in the UI face also NARROWED it: 126px to 122px on
   desktop and 112px to 110px on a phone, which the domain field gets back.

   The prefix is still a <span> beside the input, aria-hidden, unselectable
   and unsubmittable. Nothing the field DOES changes.
   ========================================================================== */
.hero .capture .capfix{
  font-family: var(--sans);           /* (a) upright, and the field's own voice */
  font-weight: 400;
  line-height: 1;                     /* (b) same metric box as the input       */
  letter-spacing: 0;                  /* (c)                                    */
  font-size: 15px;                    /* (d) one step under the domain          */
  color: var(--ink-3);
  padding: 0 17px 0 18px;
  border-right: 1px solid var(--line-2);   /* a seam, not a wall */
}
/* the input carries the same line-height, or its UA `normal` offsets the two
   centres again and (b) is undone */
.hero .capture input{
  line-height: 1;
  padding-left: 15px;
}

@media (max-width: 760px){
  /* the phone card is radius 14 with 7px of padding, so the concentric inner
     radius there is 7, not the 8 above */
  .hero .capture button{ border-radius: 7px; padding: 0 22px; }
  .hero .capture .capfix{ font-size: 14.5px; padding: 0 12px 0 14px; }
  .hero .capture input{ padding-left: 11px; }
}