/* ============================================================================
   HAVE IT PRINTED — ART DIRECTION
   Direction: THE PRESS ROOM. This is a print shop that mails your document,
   not a SaaS product. The vocabulary is paper stock, ink, registration and
   postal data. Its signature device is OPERATIONAL DATA SET IN MONOSPACE --
   prices, specs, cutoffs and tracking read like a press docket. No other brand
   in the portfolio uses that device, so HIP stays recognisable beyond its blue.

   Observed problems this file answers (measured, not asserted):
     1. all ten homepage sections shared identical 64px/64px padding, so the
        page had no rhythm and no hierarchy
     2. ten identical letter-spaced all-caps eyebrows
     3. eight of ten sections carry no image; pure white ground made that read
        as emptiness rather than calm
     4. the mobile hero pushed the upload card -- the page's only job -- below
        both the fold and the cookie banner
     5. hero type sits on an uncontrolled photo crop

   Technique note: the shipped CSS is Astro-scoped. A rule like
       .hip-uphero__copy[data-astro-cid-j7pv25f6] .display[data-astro-cid-j7pv25f6]
   scores (0,4,0) -- two classes plus two attributes. A doubled class only
   reaches (0,3,0) and silently loses, which is how the first pass "changed"
   the hero type without changing anything (measured: computed font-size stayed
   76.8px). Where a token exists (--grad-hero) this file sets the token. Where a
   scoped rule declares the property directly, the override is marked !important
   and annotated -- that is more legible than stacking four class repetitions.
   ========================================================================= */

:root{
  /* the shipped mission/location heroes read these but nothing defines them */
  --color-primary: #1978c6; --color-primary-dark: #0E1B4D; --color-primary-mid: #1560b0;
  /* --- palette. Warm paper against cold ink: the two materials of the job.
         The blue is the existing brand blue, unchanged. --------------------- */
  --hip-ink:    #0E1B4D;   /* existing primaryDark -- deep press navy   */
  --hip-press:  #1978c6;   /* existing primary -- unchanged             */
  --hip-press-d:#1560b0;
  --hip-paper:  #FBFAF7;   /* warm stock, not clinical white            */
  --hip-paper-2:#F4F1EA;   /* second stock for banded sections          */
  --hip-rule:   #E2DDD2;   /* warm hairline: a paper edge, not a border */
  --hip-ash:    #55606F;   /* neutral biased toward the ink, not grey   */

  --focus-ring: #0E1B4D;

  /* --- type. One display face (already loaded), one system serif for
         editorial voice, one mono for operational data. Zero new requests. */
  --hip-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
              "Liberation Mono", monospace;
  --hip-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  /* Serif belongs on paper, never over photography: thin strokes lose too much
     contrast against a busy image. Sans carries every dark/photographic ground. */

  /* the hero scrim the shipped CSS already consumes. Anchored top and bottom
     so the headline and the lead both sit on guaranteed ground, while the
     middle stays open enough to read as a photograph. */
  --grad-hero: linear-gradient(180deg,
      rgba(9,16,42,.86) 0%, rgba(9,16,42,.72) 34%,
      rgba(9,16,42,.66) 58%, rgba(9,16,42,.88) 100%);
}

/* ---------------------------------------------------------------------------
   1. GROUND
   Warm stock replaces pure white. Dark sections deepen to the ink navy so the
   page reads as two materials rather than five greys.
   ------------------------------------------------------------------------ */
body{ background: var(--hip-paper); }
main section:not(.section--dark):not(.hip-uphero){ background: var(--hip-paper); }
main section.section--dark{ background: var(--hip-ink); }
/* alternate stock so consecutive light sections separate without a rule */
main section.section:not(.section--dark):nth-of-type(even){ background: var(--hip-paper-2); }

/* ---------------------------------------------------------------------------
   2. RHYTHM  -- the measured defect: every section was 64/64.
   Three densities, assigned by the section's job. Operational sections run
   tight; editorial and closing sections open up.
   ------------------------------------------------------------------------ */
main section{ padding-block: var(--rhythm-base); }
main section.hip-sizzle,
main section#how{ padding-block: var(--rhythm-tight); }
main section#location-use-cases,
main section.hip-trust{ padding-block: var(--rhythm-open); }
main section.section--dark:last-of-type{ padding-block: var(--rhythm-open); }

/* --- heading colour: gradient text is disabled in foundation.css, so headings
   now need a real colour rather than inheriting a transparent fill. --------- */
/* set the TOKEN foundation.css reads, not the colour -- see the note there */
:root{ --heading-ink: var(--hip-ink); --body-ink: var(--hip-ash); }
.hip-uphero, .hip-uphero__copy{ --heading-ink: #ffffff; }

/* ---------------------------------------------------------------------------
   3. TYPE
   Display tightens (the 4.8rem headline was shouting); leads gain a serif
   voice; operational data becomes monospace -- the brand's signature.
   ------------------------------------------------------------------------ */
h1, h2, .display{
  letter-spacing: -.022em;
  line-height: 1.04;
  /* NOTE: weight is deliberately NOT forced here. Requesting 800 switches the
     browser to pjs-800.woff2, whose kerning differs from the 700 the pages were
     designed against, and terminal punctuation visibly detaches ("anything ."). */
}
h2{ font-size: clamp(1.72rem, 2.5vw, 2.5rem); letter-spacing: -.02em; }
h3{ font-size: clamp(1.06rem, 1.3vw, 1.22rem); letter-spacing: -.01em; }
p, li{ line-height: 1.62; color: var(--body-ink, var(--hip-ash)); }
/* dark grounds now come from --body-ink (foundation.css) */

/* Editorial lead: the one place a serif earns its keep. It separates the
   argument from the interface, which is otherwise all one geometric sans. */
main section > .container > p.lead,
main section .section-lead{
  font-family: var(--hip-serif);
  font-size: clamp(1.06rem, 1.5vw, 1.26rem);
  line-height: 1.55;
  color: var(--hip-ash);
  max-width: var(--measure-tight);
}

/* Eyebrows. Defect 2 was ten identical ones. Operational sections get a mono
   docket label with a rule; editorial sections get a quiet serif italic. */
.eyebrow{
  font-family: var(--hip-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hip-press);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before{
  content:""; width: 1.6em; height: 1px; background: currentColor; opacity: .55;
}
section.hip-trust .eyebrow,
section#location-use-cases .eyebrow{
  font-family: var(--hip-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
}
section.hip-trust .eyebrow::before,
section#location-use-cases .eyebrow::before{ display: none; }
section.section--dark .eyebrow{ color: #7FB2E8; }

/* Operational data in monospace: price, tracking, specs, cutoff. */
.upcard__price, [class*="__price"], .price,
[class*="tracking"], [class*="cutoff"], .spec, .num{
  font-family: var(--hip-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------------------------
   4. HERO  (defects 4 and 5)
   Direct the crop, guarantee contrast, and on phones get the upload card up
   the page. Doubled classes match the Astro-scoped specificity.
   ------------------------------------------------------------------------ */
.hip-uphero.hip-uphero{
  padding-block: clamp(30px, 5vw, 76px) clamp(34px, 5.5vw, 84px);
}
.hip-uphero__bg.hip-uphero__bg img{
  /* the shipped crop centred on the gloved hands; move it onto the press and
     the label, which is what the photograph is actually about */
  object-position: 56% 42%;
}
.hip-uphero__copy.hip-uphero__copy .display{
  /* !important: beats the Astro-scoped (0,4,0) font-size declaration. The
     shipped 4.8rem headline crowds the upload card off the first screen. */
  font-size: clamp(2.15rem, 5vw, 3.8rem) !important;
  letter-spacing: -.018em;
  line-height: 1.03;
  text-shadow: 0 1px 26px rgba(6,10,26,.42);
}
.hip-uphero__copy.hip-uphero__copy .eyebrow{
  color: #A9CCF2;
  font-size: clamp(.6rem, 1.9vw, .73rem);
  letter-spacing: .03em;    /* .085em forced an orphaned wrap at 390 */
  display: block;           /* inline-flex stranded the leading rule on its own line */
  text-wrap: balance;       /* no orphaned "NUMBER INCLUDED" line */
}
/* one line on desktop; two balanced lines on a phone, never an orphan */
@media (max-width: 560px){
  .hip-uphero__copy.hip-uphero__copy .eyebrow{ max-width: 30ch; margin-inline: auto; }
}
.hip-uphero__copy.hip-uphero__copy .eyebrow::before{ display: none; }
.hip-uphero__copy.hip-uphero__copy .lead{
  /* !important for the same scoped-specificity reason as the display above */
  font-size: clamp(.95rem, 1.2vw, 1.08rem) !important;
  line-height: 1.5;
  color: #E9EEF9;
  max-width: 42ch;
  text-shadow: 0 1px 16px rgba(6,10,26,.55);
}

/* The upload card: a sheet of stock on the press, not a generic rounded box. */
.hip-uphero__card.hip-uphero__card{
  background: var(--hip-paper);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;                     /* paper is cut square, not pilled */
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 24px 60px -18px rgba(6,10,30,.62),
    0 3px 10px -4px rgba(6,10,30,.4);
}
.upcard__price.upcard__price{ color: var(--hip-press); font-weight: 700; }

/* Floating chips. At 390 they are clipped by the viewport and add nothing but
   noise over the photograph, so they are removed there and kept as quiet
   supporting detail on desktop. */
@media (max-width: 900px){
  .hip-stage .hip-float{ display: none; }
}
@media (min-width: 901px){
  .hip-float.hip-float{
    background: rgba(251,250,247,.94);
    border-radius: 4px;
    box-shadow: 0 12px 30px -12px rgba(6,10,30,.5);
    transform: none;                       /* the random tilts read as clip-art */
  }
  .hip-float__s{ font-family: var(--hip-mono); font-size: .66rem; letter-spacing: -.01em; }
}

/* ---------------------------------------------------------------------------
   5. SURFACES AND CONTROLS
   Square-cut paper edges and a warm hairline, instead of uniform rounded cards.
   ------------------------------------------------------------------------ */
.card, [class*="__card"], .uc, .tcard{
  background: #fff;
  border: 1px solid var(--hip-rule);
  border-radius: 5px;
  box-shadow: none;
}
section.section--dark .card,
section.section--dark [class*="__card"]{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.14);
}

.btn, button.btn, a.btn{
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.btn-primary, a.btn.btn-primary, button.btn-primary{
  background: var(--hip-press);
  border: 1px solid var(--hip-press-d);
  color: #fff;
}
.btn-primary:hover, a.btn.btn-primary:hover{ background: var(--hip-press-d); }
.btn-primary:active, a.btn.btn-primary:active{ transform: translateY(1px); }

/* Dropzone: a registration frame, not a dashed generic box. */
.upload-enterprise-2026__dropzone{
  border: 1.5px dashed var(--hip-rule);
  border-radius: 5px;
  background:
    linear-gradient(0deg, rgba(25,120,198,.02), rgba(25,120,198,.02));
}
.upload-enterprise-2026__dropzone:hover{
  border-color: var(--hip-press);
  background: rgba(25,120,198,.05);
}

hr, .divider{ border: 0; border-top: 1px solid var(--hip-rule); }

/* ---------------------------------------------------------------------------
   6. COOKIE BANNER  (defect 4, the severe half)
   At 390x844 the shipped banner occupies roughly 60% of the viewport and
   covers the upload card entirely -- the one action the homepage exists to
   offer. This compacts it on phones. Nothing is removed: all three choices,
   the text and the links remain, and consent behaviour is untouched.
   ------------------------------------------------------------------------ */
@media (max-width: 767px){
  #cc-main .cm.cm--bar{
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 40px -12px rgba(6,10,30,.45);
  }
  #cc-main .cm--bar .cm__body{ padding: 14px 16px 10px; }
  #cc-main .cm--bar .cm__texts{ padding: 0; }
  #cc-main .cm--bar .cm__title{ font-size: .98rem; margin: 0 0 .25em; }
  #cc-main .cm--bar .cm__desc{ font-size: .8rem; line-height: 1.42; padding: 0; }
  /* The three choices stack full-width by default, which cost 179px on its own.
     Accept keeps the full row; the two secondary choices share the next row.
     Nothing is removed -- all three remain, and consent behaviour is untouched. */
  #cc-main .cm--bar .cm__btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 16px 12px;
    border-top: 0;
  }
  #cc-main .cm--bar .cm__btns > *{ margin: 0; width: 100%; }
  #cc-main .cm--bar .cm__btns > *:first-child{ grid-column: 1 / -1; }
  #cc-main .cm--bar .cm__btn{
    min-height: 44px; padding: .55rem .5rem; font-size: .88rem; border-radius: 6px;
  }
  #cc-main .cm--bar .cm__footer{ padding: 6px 16px 10px; font-size: .74rem; }
}

/* --- mission page -----------------------------------------------------------
   Same hardcoded-navy override as the sister brands. HIP's ink IS navy, so this
   changes little visually here -- it is applied for consistency so the rule is
   owned in one place across the portfolio. */
.mission-hero{
  background:linear-gradient(150deg, var(--hip-press-d) 0%, var(--hip-ink) 68%) !important;
}
.mission-badge{ background:rgba(255,255,255,.14); color:#fff; }