/* ==========================================================================
   aczen.live company pages: about, our-story, patent, partners, contacts, blog
   Only what pages.css does not already provide. Tokens (--ink, --rule, --brand,
   --section-y ...) come from styles.css and are never redefined here.
   Design idea: these pages are the company's own records, so they borrow the
   ledger vernacular of the home page: ruled entries, dates in a margin column,
   figures in tabular numerals. Orange stays reserved for "due", so nothing
   here uses it except through the shared margin line.
   Mobile-first: base rules target 360px phones, min-width queries widen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared small pieces
   -------------------------------------------------------------------------- */

/* The short label aczen.in shows above some page titles, set as quiet sentence-case text rather than a pill */
.company-kicker {
  margin-bottom: 16px; /* separates it from the heavy headline below */
  font-size: 0.9375rem; /* smaller than body: it qualifies the title */
  font-weight: 600; /* firm enough to read as a label without shouting */
  color: var(--brand); /* ties the label to the brand, 5.4:1 on white */
}

/* Headings used for items inside a section (leaders, features, panels) */
.company-sub {
  font-size: 1.3rem; /* one step below .section-title, matching .step-body h3 on the home page */
  font-weight: 700; /* bold carries the heading role */
  line-height: 1.25; /* compact over two lines */
  letter-spacing: -0.015em; /* Inter tightens slightly at heading sizes */
  color: var(--ink); /* primary text */
}

/* The .feature component in pages.css styles h3 only; the patent page needs h2 features to keep heading order unbroken */
.feature h2 {
  font-size: 1.125rem; /* same size as .feature h3 so both read identically */
  font-weight: 700; /* same weight as .feature h3 */
  line-height: 1.3; /* same leading as .feature h3 */
  color: var(--ink); /* primary text */
}

/* Row of actions below a section's text */
.company-actions {
  display: flex; /* buttons side by side */
  flex-wrap: wrap; /* wrap on narrow phones instead of overflowing */
  gap: 12px; /* even spacing both directions */
  margin-top: 28px; /* clear step below the paragraph above */
}

/* Supporting line under the closer heading, from the source CTA copy */
.closer-lede {
  margin-top: 16px; /* gap under the heading */
  max-width: 52ch; /* short line on the dark band */
  color: var(--info-tint); /* pale brand blue on smebank-950 stays well above 4.5:1 and reads as secondary */
}

/* --------------------------------------------------------------------------
   2. Dated entries (about milestones, our-story timeline, patent progress)
   -------------------------------------------------------------------------- */

/* Ledger-style ordered list: every entry is a ruled line with its date in the margin column */
.timeline {
  margin: 0; /* ol default margin */
  padding: 0; /* ol default indent */
  list-style: none; /* the date column replaces list numbers */
}

/* One entry: stacked on phones */
.timeline li {
  display: grid; /* grid from the start so the breakpoint only changes columns */
  gap: 8px 40px; /* tight when stacked, wide column gap once side by side */
  padding-block: 28px; /* space inside each ledger entry */
  border-top: 1px solid var(--rule); /* one rule between entries, like the home page steps */
}

/* The ledger closes with a rule under its last entry */
.timeline li:last-child {
  border-bottom: 1px solid var(--rule); /* bottom line ends the record */
}

/* Date in a fixed margin column from tablet up, so dates line up down the page */
@media (min-width: 760px) {
  /* Fixed first column keeps "April 2, 2024" and "2025" aligned on the same edge */
  .timeline li {
    grid-template-columns: 11rem 1fr; /* wide enough for the longest source date on one line */
  }
}

/* The date marker: a real sequence, so the date carries the visual weight */
.timeline-date {
  font-size: 1.125rem; /* a step above body so it scans first */
  font-weight: 750; /* heavy, matching the section title weight */
  letter-spacing: -0.01em; /* slight tightening at this weight */
  color: var(--brand); /* brand blue: a record date, not a deadline (orange is reserved) */
  font-variant-numeric: tabular-nums; /* digits share a width so years align */
}

/* Entry description */
.timeline-body p {
  margin-top: 8px; /* small gap under the entry title */
  max-width: 62ch; /* readable line length */
  color: var(--ink-soft); /* secondary to the title */
}

/* Title and status side by side in patent progress entries */
.timeline-head {
  display: flex; /* title and status tag on one line */
  flex-wrap: wrap; /* tag drops below the title on narrow phones */
  align-items: baseline; /* tag sits on the title's text line */
  gap: 8px 14px; /* spacing both directions */
}

/* "In review" status: brand tint, distinct from done-green and from due-orange */
.tag-review {
  background: var(--info-tint); /* smebank-100 */
  color: var(--brand-hover); /* smebank-700 on smebank-100 keeps above 4.5:1 */
}

/* --------------------------------------------------------------------------
   3. About: leaders and team photos
   -------------------------------------------------------------------------- */

/* One leader profile: photo and bio, stacked on phones */
.leader {
  display: grid; /* grid so the breakpoint only changes columns */
  gap: 24px 48px; /* tight when stacked, wide beside the photo */
  padding-block: 48px; /* air inside each profile */
  border-top: 1px solid var(--rule); /* the source separates profiles with a top rule */
}

/* Photo beside the bio from tablet up */
@media (min-width: 760px) {
  /* Photo column fixed so both profiles align */
  .leader {
    grid-template-columns: 240px 1fr; /* square portrait column, text takes the rest */
    align-items: start; /* bio starts level with the top of the photo */
  }
}

/* Leader portrait */
.leader img {
  display: block; /* removes the inline baseline gap */
  width: 100%; /* fills its column */
  max-width: 240px; /* never larger than the 400px source looks sharp at */
  height: auto; /* keep the square aspect */
  aspect-ratio: 1; /* reserves the square before the image loads, so nothing shifts */
  object-fit: cover; /* crops rather than distorts if a source ever changes shape */
  border-radius: var(--radius-md); /* middle radius tier, like cards */
}

/* Job title under the leader's name */
.leader-role {
  margin-top: 6px; /* tight to the name it belongs to */
  font-weight: 600; /* firmer than the bio */
  color: var(--brand); /* the source colours titles blue */
}

/* Leader bio */
.leader-bio {
  margin-top: 16px; /* clear gap under the title */
  max-width: 62ch; /* readable line length */
  color: var(--ink-soft); /* secondary to the name */
}

/* Two-by-two grid of team photos */
.photo-grid {
  display: grid; /* fixed two columns at every width, as in the source */
  grid-template-columns: 1fr 1fr; /* equal halves */
  gap: 12px; /* tight, so the four photos read as one group */
  margin: 0; /* ul default margin */
  padding: 0; /* ul default indent */
  list-style: none; /* no bullets on photos */
}

/* Each team photo, cropped to a common height */
.photo-grid img {
  display: block; /* removes the inline baseline gap */
  width: 100%; /* fills its cell */
  height: 160px; /* the source crops every photo to the same height */
  object-fit: cover; /* crops instead of squashing the mixed aspect ratios */
  border-radius: var(--radius-sm); /* smallest radius tier for small tiles */
  filter: grayscale(1); /* the source shows team photos in greyscale */
}

/* Paragraph spacing inside a text block of several paragraphs */
.company-copy p + p {
  margin-top: 16px; /* styles.css zeroes p margins, so consecutive paragraphs need a gap */
}

/* Body paragraphs in company copy */
.company-copy p {
  max-width: 62ch; /* readable line length */
  color: var(--ink-soft); /* secondary to headings */
}

/* The first paragraph under a heading in company copy */
.company-copy > .company-sub + p,
.company-copy > .section-title + p {
  margin-top: 20px; /* separates the text from its heading */
}

/* --------------------------------------------------------------------------
   4. Patent: application record, inventors, highlights
   -------------------------------------------------------------------------- */

/* The application record: a bordered panel, like the filing card on the home page */
.patent-record {
  margin: 32px 0 0; /* dl default margin replaced with a gap under the lede */
  padding: 24px; /* inner breathing room */
  border: 1px solid var(--rule); /* frames the record on the white page */
  border-radius: var(--radius-lg); /* panel radius tier */
  background: var(--paper-deep); /* pale brand tint marks it as an official record */
  display: grid; /* fields flow in a grid */
  gap: 20px 32px; /* row gap, then column gap */
}

/* Two field columns from tablet up */
@media (min-width: 760px) {
  /* Side-by-side fields; wide fields span both */
  .patent-record {
    grid-template-columns: 1fr 1fr; /* equal halves */
    padding: 32px; /* more room at desktop */
  }
}

/* A field that needs the full width (number, title, inventors) */
.patent-record .span-all {
  grid-column: 1 / -1; /* spans every column the grid has */
}

/* Field names */
.patent-record dt {
  font-size: 0.9375rem; /* smaller: the value is what matters */
  color: var(--ink-soft); /* secondary */
}

/* Field values */
.patent-record dd {
  margin: 6px 0 0; /* dd default indent removed, small gap under the name */
  font-size: 1.125rem; /* a step above body */
  color: var(--ink); /* primary */
}

/* The application number: the one bold element on this page */
.patent-number {
  display: flex; /* number and status tag side by side */
  flex-wrap: wrap; /* tag drops below on narrow phones */
  align-items: center; /* tag centred on the number's height */
  gap: 12px; /* space between number and tag */
}

/* Digits of the application number */
.patent-number strong {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); /* large, it is the record's identity */
  font-variation-settings: "opsz" 32; /* display cut */
  font-weight: 800; /* heavy */
  letter-spacing: 0.02em; /* slight opening so 12 digits stay countable */
  font-variant-numeric: tabular-nums; /* every digit the same width, like a printed register */
  color: var(--brand-deep); /* deepest brand tone: authoritative, 15:1 on the tint */
}

/* Inventor chips */
.inventors {
  display: flex; /* chips in a row */
  flex-wrap: wrap; /* wrap onto new lines */
  gap: 10px; /* even spacing */
  margin: 0; /* ul default margin */
  padding: 0; /* ul default indent */
  list-style: none; /* the avatar is the marker */
}

/* One inventor: avatar plus name */
.inventors li {
  display: flex; /* avatar beside the name */
  align-items: center; /* vertical centring */
  gap: 10px; /* space between avatar and name */
  padding: 4px 14px 4px 4px; /* hugs the avatar on the left, room for text on the right */
  border: 1px solid var(--rule); /* chip outline */
  border-radius: 999px; /* capsule, same tier as pills */
  background: var(--paper); /* white chip on the tinted record */
  font-size: 0.9375rem; /* compact name text */
}

/* Inventor avatar */
.inventors img {
  display: block; /* removes the inline baseline gap */
  width: 40px; /* small round avatar */
  height: 40px; /* square before rounding */
  object-fit: cover; /* crops wide photos to the circle */
  border-radius: 50%; /* round */
}

/* Patent title as filed, kept in the register's own capitals */
.patent-title {
  line-height: 1.45; /* capitals need a little more leading to stay legible */
  letter-spacing: 0.01em; /* capitals read better slightly opened */
}

/* Two columns for highlights and progress on desktop */
.patent-split {
  display: grid; /* stacked by default */
  gap: 56px; /* space between the two blocks */
}

/* Side by side once both halves fit */
@media (min-width: 960px) {
  /* Progress gets a little more room: its entries carry more text */
  .patent-split {
    grid-template-columns: 1fr 1.2fr; /* source proportions */
  }
}

/* --------------------------------------------------------------------------
   5. Partners: logos, panels, stat band, testimonials
   -------------------------------------------------------------------------- */

/* Partner logo row: open cells, not cards */
.logo-row {
  display: grid; /* auto-flowing cells */
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); /* two per row on phones, five on desktop */
  gap: 32px 24px; /* row gap, column gap */
  margin: 0; /* ul default margin */
  padding: 0; /* ul default indent */
  list-style: none; /* no bullets */
}

/* One partner: logo or name above its category */
.logo-row li {
  display: flex; /* stack logo and category */
  flex-direction: column; /* vertical */
  align-items: center; /* centred, as in the source */
  gap: 12px; /* space between logo and category */
  text-align: center; /* category text centred under the logo */
}

/* Logo box: a fixed height so image logos and text names sit on one line */
.logo-mark {
  display: flex; /* centres the logo or name */
  align-items: center; /* vertical centring */
  justify-content: center; /* horizontal centring */
  height: 64px; /* the source's desktop logo height */
}

/* Logo image: contained in the box without distortion */
.logo-mark img {
  display: block; /* removes the inline baseline gap */
  max-height: 56px; /* leaves a little air inside the box */
  width: auto; /* keeps the logo's aspect ratio */
  max-width: 100%; /* never wider than its cell */
  height: auto; /* pairs with max-height to keep aspect ratio */
}

/* Partners with no local logo file are shown by name instead of a hotlinked image */
.logo-name {
  font-size: 1.25rem; /* reads as a wordmark */
  font-weight: 750; /* heavy like a logotype */
  letter-spacing: -0.015em; /* display tracking */
  color: var(--ink); /* primary */
}

/* Two feature panels side by side */
.panel-pair {
  display: grid; /* stacked on phones */
  gap: 24px; /* space between panels */
}

/* Equal halves from tablet up */
@media (min-width: 760px) {
  /* Two columns */
  .panel-pair {
    grid-template-columns: 1fr 1fr; /* equal halves, as in the source */
  }
}

/* Light panel */
.panel {
  display: flex; /* stack heading, text and inset */
  flex-direction: column; /* vertical */
  gap: 16px; /* one gap instead of per-child margins */
  padding: 32px; /* generous inner space */
  border: 1px solid var(--rule); /* frame without a shadow */
  border-radius: var(--radius-lg); /* panel radius tier */
  background: var(--paper-deep); /* pale brand tint */
}

/* Panel body text */
.panel p {
  color: var(--ink-soft); /* secondary */
}

/* Dark panel for the reporting feature */
.panel-dark {
  background: var(--brand-deep); /* smebank-950 */
  border-color: var(--brand-deep); /* border disappears into the fill */
  color: var(--paper); /* white text, 15.4:1 */
}

/* Headings on the dark panel */
.panel-dark .company-sub {
  color: var(--paper); /* override the ink heading colour */
}

/* Body text on the dark panel */
.panel-dark p {
  color: var(--info-tint); /* pale brand blue, high contrast on smebank-950 */
}

/* White inset inside a panel: the example regulation / report */
.panel-inset {
  margin-top: auto; /* pushes the inset to the panel's foot so both panels align */
  padding: 20px; /* inner space */
  border-radius: var(--radius-md); /* middle tier nested inside the larger panel radius */
  background: var(--paper); /* white card on the tint or the dark fill */
  color: var(--ink); /* ink text regardless of the panel colour */
}

/* Inset title */
.panel-inset strong {
  display: block; /* own line */
  font-weight: 650; /* firm but not heading-heavy */
  line-height: 1.35; /* long regulation names wrap cleanly */
}

/* Inset meta lines */
.panel .panel-inset p,
.panel-dark .panel-inset p {
  margin-top: 8px; /* gap under the title */
  font-size: 0.9375rem; /* smaller meta text */
  color: var(--ink-soft); /* secondary, overriding the dark panel's pale text */
}

/* Big label inside the dark panel's inset */
.panel-inset .inset-display {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); /* large, it is the report's title */
  font-weight: 800; /* heavy */
  line-height: 1.1; /* tight */
  letter-spacing: -0.02em; /* display tracking */
}

/* Highlighted figure beside the benefits list (replaces the source's placeholder image overlay) */
.callout-stat {
  padding: 32px; /* inner space */
  border: 1px solid var(--rule); /* frame */
  border-radius: var(--radius-lg); /* panel tier */
  background: var(--paper-deep); /* pale brand tint */
}

/* Stat numbers on the dark band */
.stat-band .stat-value {
  color: var(--paper); /* white on smebank-950 */
}

/* Stat labels on the dark band */
.stat-band .stat-label {
  color: var(--info-tint); /* pale brand blue, high contrast */
}

/* Dark band background for the stats row */
.stat-band {
  background: var(--brand-deep); /* the source uses a solid brand band here */
  color: var(--paper); /* white text */
}

/* Stars above each testimonial */
.stars {
  color: var(--ink); /* ink stars: yellow would fail contrast on white */
  letter-spacing: 0.1em; /* separates the five glyphs */
}

/* The quote text */
.card blockquote {
  margin: 0; /* blockquote default indent */
  color: var(--ink-soft); /* secondary to the attribution */
}

/* Who said it */
.card figcaption {
  font-weight: 600; /* name reads firmer */
}

/* Company under the name */
.card figcaption span {
  display: block; /* own line */
  font-weight: 400; /* regular: secondary */
  font-size: 0.9375rem; /* smaller */
  color: var(--ink-soft); /* secondary */
}

/* Figure inside a card has default margins */
.card figure {
  margin: 0; /* remove browser default */
  display: flex; /* stack stars, quote, caption */
  flex-direction: column; /* vertical */
  gap: 12px; /* one gap */
}

/* --------------------------------------------------------------------------
   6. Contacts: methods, form, hours
   -------------------------------------------------------------------------- */

/* The contact value (number, address) inside a method card */
.contact-value {
  font-weight: 600; /* firmer: this is the thing people copy */
  color: var(--ink); /* primary */
  overflow-wrap: anywhere; /* long email addresses wrap instead of overflowing the card */
}

/* Availability line */
.contact-note {
  font-size: 0.9375rem; /* smaller: it qualifies the value */
  color: var(--ink-soft); /* secondary */
}

/* Button sits at the card's foot so buttons align across a row */
.card .btn {
  margin-top: auto; /* flex column pushes it down */
  align-self: flex-start; /* natural width, left aligned with the text */
}

/* Form beside the office details on desktop */
.contact-split {
  display: grid; /* stacked on phones */
  gap: 56px; /* space between form and office column */
}

/* Two columns once both fit */
@media (min-width: 960px) {
  /* Equal halves, as in the source */
  .contact-split {
    grid-template-columns: 1fr 1fr; /* form left, office right */
  }
}

/* The message form: a white panel on the tinted section */
.contact-form {
  display: grid; /* fields stack with one gap */
  gap: 20px; /* space between fields */
  margin-top: 24px; /* gap under the heading */
  padding: 24px; /* inner space */
  border: 1px solid var(--rule); /* frame */
  border-radius: var(--radius-lg); /* panel tier */
  background: var(--paper); /* white so inputs read on the tint */
}

/* Paired fields side by side from tablet up */
.field-pair {
  display: grid; /* stacked on phones */
  gap: 20px; /* same gap as the form */
}

/* Two columns from tablet up */
@media (min-width: 760px) {
  /* Name/email and phone/category pair up, as in the source */
  .field-pair {
    grid-template-columns: 1fr 1fr; /* equal halves */
  }
}

/* A label wraps its control's text; the control follows */
.field {
  display: grid; /* label text above control */
  gap: 6px; /* tight coupling between label and control */
}

/* Label text */
.field label {
  font-size: 0.9375rem; /* compact label */
  font-weight: 600; /* reads as a label */
}

/* All form controls share one look */
.field input,
.field select,
.field textarea {
  width: 100%; /* fills its column */
  min-height: 44px; /* minimum touch target */
  padding: 10px 12px; /* comfortable typing area */
  border: 1px solid var(--ink-soft); /* 7.6:1 so the field edge passes non-text contrast */
  border-radius: var(--radius-sm); /* smallest radius tier, like buttons */
  background: var(--paper); /* white field */
  color: var(--ink); /* primary text */
  font: inherit; /* controls don't inherit the page font by default */
  font-size: 1rem; /* 16px stops iOS zooming on focus */
}

/* Textarea grows vertically only */
.field textarea {
  resize: vertical; /* sideways resizing would break the layout */
}

/* The note explaining the form opens the visitor's email app */
.form-note {
  font-size: 0.9375rem; /* small print */
  color: var(--ink-soft); /* secondary */
}

/* Office card rows (address, phone) */
.office-lines {
  display: grid; /* stacked lines */
  gap: 6px; /* tight */
  margin: 0; /* dl default margin */
}

/* Office detail labels, visually secondary */
.office-lines dt {
  font-size: 0.875rem; /* small label */
  color: var(--ink-soft); /* secondary */
}

/* Office detail values */
.office-lines dd {
  margin: 0 0 8px; /* dd indent removed, gap before the next label */
}

/* Business hours as a two-column ledger */
.hours {
  display: grid; /* day and time columns */
  grid-template-columns: 1fr auto; /* day stretches, time hugs the right */
  margin: 0; /* dl default margin */
}

/* Each day and time cell sits on a ruled line */
.hours dt,
.hours dd {
  margin: 0; /* dd default indent */
  padding-block: 10px; /* row height */
  border-top: 1px solid var(--rule); /* ledger rule per row */
}

/* Times in tabular numerals, right aligned */
.hours dd {
  font-weight: 600; /* firmer than the day */
  text-align: right; /* times align on their right edge */
  font-variant-numeric: tabular-nums; /* digits align */
}

/* Office column blocks stack with a gap */
.office-stack {
  display: grid; /* stacked cards */
  gap: 24px; /* space between office card and hours card */
  margin-top: 24px; /* gap under the heading */
}

/* Emergency contact numbers: large, so they're findable at a glance */
.emergency-value {
  font-size: 1.25rem; /* larger than body */
  font-weight: 750; /* heavy */
  overflow-wrap: anywhere; /* the email wraps on narrow cards */
}

/* --------------------------------------------------------------------------
   7. Blog index
   -------------------------------------------------------------------------- */

/* The single card pointing to the blog on aczen.in: wider than a grid card, since it stands alone */
.blog-card {
  max-width: 640px; /* a lone card shouldn't stretch the full column */
  padding: 32px; /* more room than a grid card */
}

/* --------------------------------------------------------------------------
   8. Spacing helpers (replace inline styles so every rule stays commented here)
   -------------------------------------------------------------------------- */

/* Standard gap between a section heading and the block under it */
.gap-top {
  margin-top: 32px; /* same step as .patent-record's gap under the lede */
}

/* Larger gap before a sub-heading that starts a new group */
.gap-top-lg {
  margin-top: 48px; /* clearly separates the claims from the stats above */
}