/*
Theme Name: CREATERIUM Passion
Theme URI: https://createrium.co.jp/
Description: CREATERIUMの業務改善・AI活用コンサルティングとインターネット業務支援サービスのサイト。既存Createrium Themeの業務処理を引き継ぐ子テーマ。
Author: CREATERIUM株式会社
Template: createrium-theme
Version: 1.3.1
Text Domain: createrium-passion
*/

/* ==========================================================================
   CREATERIUM — 「熾火と設計図」 warm precision
   Paper and sumi are the ground of trust; heat is a point.

   01 Tokens            06 Hero (typographic statement + process band)
   02 Base              07 Capability strip
   03 Typography        08 Sections: services / usecases / philosophy /
   04 Layout (one           process / faq / company / contact
      12-column grid)   09 Footer
   05 Header, nav,      10 WordPress admin bar
      buttons, links    11 Responsive: 1100 / 900 / 650 / 360
                        12 Accessibility, motion, engine
                           and contrast-mode fallbacks
   ========================================================================== */


/* 01 Tokens
   ========================================================================== */

:root {
  /* Colour — 朱 × 墨 × 生成り. Every colour used below comes from this list.
     --struct = sumi used structurally (header CTA, rules, open states); --dark = kogecha band ground;
     --heat = THE brand vermilion (white text 4.9:1); --heat-strong for small vermilion text. */
  --cool:         #3F5563;   /* 藍鼠 — charts / notes only, <= 5% */
  --paper:        #FBF8F3;
  --paper-2:      #F3EDE3;
  --surface:      #FFFFFF;
  --ink:          #1F1A17;
  --ink-2:        #5E554E;
  --ink-3:        #6B625A;
  --struct:        #1F1A17;
  --dark:   #2A1D19;
  --chip:   #F3EDE3;
  --heat:         #CD3C15;
  --heat-strong:  #A52C12;
  --heat-tint:    #F9E3D4;
  --heat-on-dark: #EE6A40;
  --line:         #E3DACD;
  --line-strong:  #C9BFB2;
  --line-on-dark: rgba(255, 255, 255, .16);
  --field-line:   #8A8178;
  --on-dark:      #F6F1E9;
  --on-dark-2:    #C9BFB2;
  --mask-on:      #000;      /* opaque stop for mask gradients — never painted */

  /* Shape */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-rest: 0 1px 2px rgba(31, 26, 23, .05);             /* sumi #1F1A17, never a tinted black */
  --shadow-card: 0 1px 2px rgba(31, 26, 23, .04), 0 12px 32px -12px rgba(31, 26, 23, .14);

  /* Spacing scale — plus two fixed insets: 20 is the phone gutter, repeated
     as the sheets' inner margin so text starts at x = 40; 40 pads the large
     desktop panels. */
  --sp-4: 4px;    --sp-8: 8px;    --sp-12: 12px;  --sp-16: 16px;  --sp-24: 24px;
  --sp-32: 32px;  --sp-48: 48px;  --sp-64: 64px;  --sp-96: 96px;  --sp-128: 128px;
  --sp-20: 20px;  --sp-40: 40px;

  /* Type */
  --font-sans:  "DM Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-latin: "CREATERIUM Arrow", "DM Sans", system-ui, sans-serif;
  --fs-display:   clamp(2rem, 0.9rem + 5.6vw, 5.5rem);      /* home h1 */
  --fs-h1:        clamp(1.5rem, 0.55rem + 5vw, 4.5rem);     /* inner-page h1 */
  --fs-h2:        clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --fs-statement: clamp(1.875rem, 1.3rem + 1.95vw, 3rem);   /* philosophy h2 — always above --fs-h2 */
  --fs-h3:        1.375rem;
  --fs-lead:      clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-small:     .875rem;
  --fs-legal:     .75rem;

  /* Layout */
  --header-h:   72px;
  --adminbar-h: 0px;                                         /* 32 / 46px when logged in (section 10) */
  --grid-gap:   24px;                                        /* gutter of the 12-column grid */
  --gutter:     clamp(var(--sp-20), 5vw, 72px);
  --shell:      min(1200px, 100% - 2 * var(--gutter));      /* content width */
  --shell-pad:  calc((100% - var(--shell)) / 2);            /* the same grid, as padding */
  --section-y:  clamp(72px, 9vw, 128px);
}


/* 02 Base
   ========================================================================== */

/* The signature arrow. Google's DM Sans subsets carry ↑ and ↓ but not →, so
   every 「→」 used to fall through to the system font and change shape per
   platform. This face is DM Sans Medium (opsz 14) cut down to that one glyph
   (U+2192, 624 bytes, SIL OFL) — it sits first in --font-latin and its
   unicode-range keeps it away from every other character. */
@font-face {
  font-family: "CREATERIUM Arrow";
  font-style: normal;
  font-weight: 100 1000;
  font-display: block;
  src: url("data:font/woff;base64,d09GRgABAAAAAAJwAAoAAAAAAmQABAEGAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABZAAAAEcAAABggk117GNtYXAAAAG0AAAAKgAAADQADCHlZ2x5ZgAAAegAAAA0AAAANEvNjrloZWFkAAAA9AAAADYAAAA2KXkRMGhoZWEAAAEsAAAAHgAAACQG8gH/aG10eAAAAawAAAAIAAAACAUvAHNsb2NhAAAB4AAAAAYAAAAGABoAAG1heHAAAAFMAAAAFwAAACAABAALbmFtZQAAAhwAAABAAAAAQgNuC15wb3N0AAACXAAAABMAAAAg/58AMgABAAAABAEGl8ARP18PPPUAAwPoAAAAAOB5IHAAAAAA5tWsJwAq/+cC5gLJAAAABgACAAAAAAAAeJxjYGRgYH7w7xSQ5GHQYlBjesYAFEEBTABqGAP3AAB4nGNgZGBgYGLgYgDRDFASCQAAAZcAEAB4nGNgYTJi/MLAysDA1MUUwcDA4A2hGeMYjBj1GfAAd39/d4YDipMUJzE/+HeKgYH5C6MZUJgRJMf4g2kPkFJgkAAAI3oNJgACIwBJAwwAKnicY2BgYGJgYGAGYhEgyQimWRgUgDQLEAL5ipP+/4eQ9/LB8gwAXBIHDwAAAAAAAAAaAAAAAQAq/+cC5gLJAAkAAFM1IQE3ARUBJwEqAi7+6T8BZv6aPwEVASlcAQRA/qs3/qpAAQIAeJwtyC0SQFAYQNHzHkURRWMbuqqwAsEoxhg/+/cF7dyLrFVIZSVp+J3VUYNRZ7Y43KHe6TFZbV57/OsDgK4G1XicY2BmAIP/cxiMGLAAACqDAdEA") format("woff");
  unicode-range: U+2192;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.95;
  line-break: strict;
  word-break: auto-phrase;     /* progressive: Japanese breaks between phrases, never inside a word */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { border-radius: 2px; color: inherit; text-decoration: none; }   /* radius: focus rings follow it */
a:active { opacity: .72; }

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

button { cursor: pointer; }

/* Running text breaks BETWEEN PHRASES in every engine: the templates carry
   <wbr> at each phrase boundary (BudouX + a protected-word list; regenerate with
   tools/patch_wbr.py after editing copy), and keep-all forbids every other break
   inside Japanese. Safari / iOS / Firefox have no `word-break: auto-phrase`, and
   Chrome's auto-phrase mis-splits a few words of this copy (一つ|ひとつ, 確認方|法). */
p,
dd,
dt,
li,
summary,
h1,
h2,
h3,
h4,
figcaption { word-break: keep-all; overflow-wrap: anywhere; }

p,
dd,
li,
summary { text-wrap: pretty; }

/* Leads are written as short clauses, each of which fits its measure at
   every width (swept 320–1440): they break only after 、。・」 — the same
   lines in every engine, with or without auto-phrase. */
.hero-description,
.hero-sub,
.inner-intro,
.company-intro,
.contact-inner > div:first-child > p:not(.eyebrow) { word-break: keep-all; }

::selection { background: var(--chip); color: var(--ink); }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: calc(var(--adminbar-h) + var(--sp-12));   /* below the WordPress admin bar when logged in */
  left: var(--sp-12);
  z-index: 100;
  padding: var(--sp-12) var(--sp-24);
  border-radius: var(--radius-s);
  background: var(--struct);
  color: var(--surface);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.6;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }


/* 03 Typography
   ========================================================================== */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  letter-spacing: .02em;
  text-wrap: balance;
}

/* Where 「・」 separates two things (業務の可視化・改善設計, Web制作・運用) "palt"
   would squeeze it into a fat bullet — those headings keep full-width metrics. */
.service-card h3,
.web-support > strong,
.pricing-note > span { font-feature-settings: normal; }

h1 { font-size: var(--fs-h1); line-height: 1.35; }
h2 { font-size: var(--fs-h2); line-height: 1.45; letter-spacing: .04em; }   /* palt closes up 、。 mid-line; */
h3 { font-size: var(--fs-h3); line-height: 1.55; letter-spacing: .04em; }   /* a little more air keeps them legible */

/* The word 熱量 — the only vermilion in a headline. */
.heat { color: var(--heat); }

/* Eyebrow: spark dot, Japanese label first, quiet Latin echo after a slash. */
.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-12);
  margin: 0 0 var(--sp-24);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--heat);
}

.eyebrow-ja { font-feature-settings: "palt" 1; }

.eyebrow-en {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  color: var(--ink-3);
  font-family: var(--font-latin);
  font-size: var(--fs-legal);
  font-weight: 500;
  letter-spacing: .02em;       /* sentence case, quiet — never uppercase + wide tracking */
}

.eyebrow-en::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--line-strong);
  transform: skewX(-18deg);
}

.little-line { display: none; }   /* the spark dot replaces the old rule */

/* <br class="desktop-only"> stays a line break at every width: each one opens
   a sentence (「中小企業の…」「必要な仕組みを…」), and a sentence that starts its
   own line cannot be split inside its first word. */
.desktop-only { display: inline; }


/* 04 Layout
   ========================================================================== */

/* One grid for everything. Sections are full-bleed; their content sits on the
   shell; the header uses the same padding, so logo left edge = content left
   edge and header CTA right edge = content right edge.

   Inside the shell every two-part layout is placed on the same 12 columns
   (24px gutters). At 1440 the column lines fall on x = 120 · 528 · 834:
     col 1   headings, lists, cards
     col 5   FAQ list, company table, note-row copy, second card
     col 8   side paragraphs, hero sub-copy, journey sheet, philosophy copy,
             contact actions                                                  */
.section-shell {
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

.section-space {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.hero-copy,
.section-heading,
.usecase-layout,
.philosophy,
.faq,
.company,
.contact-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.section-heading {
  align-items: end;
  margin-bottom: var(--sp-64);
}

.section-heading > div { grid-column: 1 / span 7; }

.section-heading > p {
  grid-column: 8 / -1;
  margin: 0 0 var(--sp-8);
  color: var(--ink-2);
}

.section-footnote {
  margin: var(--sp-48) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-legal);
  line-height: 1.8;
  text-wrap: balance;          /* on phones: never 「ご利用 / 環境」 */
}


/* 05 Header, navigation, buttons, links
   ========================================================================== */

.site-header {
  position: sticky;
  top: var(--adminbar-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-32);
  height: var(--header-h);
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* The logo (logo.svg, 1131 × 159: 「CREATERIUM」 in its brackets) is sized by height and
   never squeezed: 30px here, 26px from 900px down, easing to 24px at 353px. logo.svg is
   never shown below 24px — narrower screens take logo-small.svg (section 11). */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}

.brand img {
  width: auto;
  height: 30px;
}

/* The sticky header lies inside the root's scroll-padding, so focusing one of
   its controls made the browser "scroll it into view" — half a screen up.
   Cancelling the padding for these controls keeps the page where it is. */
.site-header :is(a, button) { scroll-margin-top: calc(-1 * var(--header-h)); }

.site-header nav {
  display: flex;
  flex: none;
  margin-left: auto;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-16);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: text-decoration-color .2s ease;
}

.site-header nav a:hover { text-decoration-color: var(--ink); }

/* Buttons — the primary button is the single heat fill in a view. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  min-height: 56px;
  padding: var(--sp-12) var(--sp-24);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--heat);
  color: var(--surface);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  transition: background-color .2s ease, transform .2s ease;
}

.button > span[aria-hidden="true"] {
  font-family: var(--font-latin);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
}

.button:hover  { background: var(--heat-strong); transform: translateY(-1px); }
.button:active { background: var(--heat-strong); transform: none; opacity: 1; }

.button-small {
  flex: none;
  gap: var(--sp-12);
  min-height: 44px;
  padding: var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-20);
  font-size: var(--fs-small);
}

.header-cta,
.header-cta:active { background: var(--struct); }
.header-cta:hover  { background: var(--dark); }

.cta-short { display: none; }

.button-light {
  background: var(--paper);
  color: var(--ink);
}

.button-light > span[aria-hidden="true"] { color: var(--heat); }

.button-light:hover,
.button-light:active { background: var(--surface); }

.text-link,
.card-link,
.pricing-note a {
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

/* inline-block (not flex) so the underline stops before the arrow */
.text-link,
.pricing-note a {
  display: inline-block;
  padding: 10px 0;                    /* 24px line + 20px = 44px target */
  text-decoration: underline var(--ink-3);   /* 5:1 — the underline itself says "link" */
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .2s ease;
}

.text-link > span,
.pricing-note a > span {
  display: inline-block;
  margin-left: var(--sp-8);
}

.text-link:hover,
.pricing-note a:hover { text-decoration-color: var(--ink); }

.text-link > span,
.card-link > span,
.pricing-note a > span {
  color: var(--heat-strong);         /* a 17px glyph, also on paper-2: 深緋 (朱 is 4.24:1 there) */
  font-family: var(--font-latin);
  font-size: 1.0625rem;
  line-height: 1;
  transition: transform .2s ease;
}

.text-link:hover > span,
.card-link:hover > span,
.pricing-note a:hover > span { transform: translateX(3px); }

.hero-actions .text-link:hover > span { transform: translateY(3px); }

/* Menu toggle + mobile navigation (shown from 900px down).
   Open, the menu is a full-height paper panel under the header: it covers
   the page (no hero CTA peeking through) and scrolls inside itself. Every
   row is a plain text row — the contact row too; the header already carries
   the one sumi button. */
.menu-toggle { display: none; }

.mobile-nav {
  position: fixed;
  top: calc(var(--header-h) + var(--adminbar-h));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-8) var(--shell-pad) var(--sp-48);
  background: var(--paper);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}

.mobile-nav a::after {
  content: "→";
  color: var(--ink-3);
  font-family: var(--font-latin);
}

.mobile-nav a:last-child { color: var(--struct); font-weight: 700; }
.mobile-nav a:last-child::after { color: var(--struct); }
.mobile-nav a:active { background: var(--chip); opacity: 1; }

/* While the menu is open the page beneath does not scroll, the header turns
   opaque so nothing shows through it, and everything the panel covers leaves
   the tab order: focus cycles header → menu, never into the hidden page. */
html:has(.mobile-nav:not([hidden])) { overflow: hidden; }
html:has(.mobile-nav:not([hidden])) .site-header { background: var(--paper); border-bottom-color: var(--line); animation: none; }
html:has(.mobile-nav:not([hidden])) :is(main, .footer, .skip-link) { visibility: hidden; }


/* 06 Hero — a typographic statement, then the work shown as a process line
   ========================================================================== */

/* Tight above, so that on a 1440 × 800 laptop the first view already shows
   the band's title and its 01 → 02 → 03 line under the statement. */
.hero {
  display: grid;
  row-gap: var(--sp-40);
  padding-top: clamp(28px, 2.8vw, 40px);
  padding-bottom: var(--sp-64);
}

.hero-copy { position: relative; }               /* the rule under the statement spans this box */
.hero .eyebrow { margin-bottom: var(--sp-16); }  /* the 「 bar reaches up: first view stays as tall as before */
.hero-copy > * { grid-column: 1 / -1; }

/* 「熱量で向き合い、技術で動かす。」 — the one place the site speaks in the logo's
   own brackets (kagi-kakko = 深く聞く: we receive words that carry heat).
   The h1 shrinks to its text and draws 「 top-left and 」 bottom-right as four
   sumi bars on its own background, in em so they scale with the type:
     vertical stroke : horizontal stroke = 1 : .833 (the logo's stem : E-arm)
     vertical arm = half the framed height · horizontal arm = 2/3 of that
     square ends, two brackets only, never vermilion.
   Do not repeat this on other headings: one bracket moment per screen. */
.hero h1 {
  --kagi-c:   var(--ink);                                    /* sumi on a light ground — never vermilion */
  --kagi-v:   .15em;                                         /* vertical stroke = the stem of the type it frames, as in the logo */
  --kagi-h:   calc(var(--kagi-v) * .833);                    /* horizontal stroke */
  --kagi-t:   .14em;                                         /* frame above the two lines … */
  --kagi-b:   .06em;                                         /* … and below: the glyphs sit high in their line box, so the ink ends up centred */
  --kagi-box: calc(2 * 1.35em + var(--kagi-t) + var(--kagi-b));   /* framed height: two lines of 1.35 */
  --kagi-arm: calc(var(--kagi-box) / 3);                     /* horizontal arm = 2/3 x (box / 2) */
  justify-self: start;
  margin-bottom: 53px;                                       /* 」 · 28 · rule · 24 · explanation */
  padding: var(--kagi-t) calc(var(--kagi-v) + .12em) var(--kagi-b) calc(var(--kagi-v) + .22em);   /* 、 ends the line light: optically equal gaps */
  background:
    linear-gradient(var(--kagi-c), var(--kagi-c)) left top / var(--kagi-v) 50% no-repeat,
    linear-gradient(var(--kagi-c), var(--kagi-c)) left top / var(--kagi-arm) var(--kagi-h) no-repeat,
    linear-gradient(var(--kagi-c), var(--kagi-c)) right bottom / var(--kagi-v) 50% no-repeat,
    linear-gradient(var(--kagi-c), var(--kagi-c)) right bottom / var(--kagi-arm) var(--kagi-h) no-repeat;
  font-size: var(--fs-display);
}

/* statement above, explanation below: the hairline keeps the full column
   width although the h1 is now only as wide as its text — it is placed at
   its static position (under the last line) and stretched to .hero-copy */
.hero h1::after {
  content: "";
  display: block;                                            /* a block's static position: under the last line */
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: calc(var(--kagi-b) + 28px);                    /* clear of the 」 bar: two parallels need air */
  background: var(--line-strong);
}

.hero-description {
  grid-column: 1 / span 7;
  align-self: baseline;
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
}

.hero-sub {
  grid-column: 8 / -1;
  align-self: baseline;
  margin: 0;
  color: var(--ink-2);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-16) var(--sp-32);
  margin-top: var(--sp-40);
}

/* The band: a paper-2 drawing sheet. Process line on the left; on the right the
   ember sealed in glass — a seamless loop that always plays (muted, inline).
   Poster and loop share ONE framing (3:2; the poster is the loop's first frame),
   so the video simply covers the poster at the same position.
   From 1024px up the loop leaves the band and stands beside the statement, in
   the first view — see the imagery rules at the end of the file. */
.hero-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--paper-2);
}

.hero-art {
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  background: url("assets/hero-loop.webp") 50% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-on) 34%);
  mask-image: linear-gradient(to right, transparent, var(--mask-on) 34%);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;                          /* the poster shows until the first frame is painted */
  pointer-events: none;
  transition: opacity .6s ease;
}

.hero-video.is-ready { opacity: 1; }

/* Process line */
.workflow-card {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 36px var(--sp-64) 36px var(--sp-48);
}

.workflow-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  line-height: 1.6;
}

.workflow-heading strong {
  font-size: 1.0625rem;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  letter-spacing: .02em;
}

.example-label {
  order: -1;
  padding-right: var(--sp-16);
  border-right: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.workflow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-list li {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--sp-16);
}

/* numeral in a drawn circle — shared grammar with the journey sheet */
.workflow-list li > span,
.journey-step-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--struct);
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
}

/* hairline connector to the next step, with a drawn arrowhead */
.workflow-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 52px;
  right: -12px;
  height: 1px;
  background: var(--line-strong);
}

.workflow-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  right: -12px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--ink-3);
  border-right: 1px solid var(--ink-3);
  transform: rotate(45deg);
}

/* Step 03 is the human step — the one heat marker in each diagram:
   a heat-outlined numeral, and the spark (heat dot, soft halo) after its
   title. The same spark opens the legend line underneath. */
.workflow-list li:last-child > span,
.journey-step:nth-last-child(2) .journey-step-icon {
  border-color: var(--heat);
  background: var(--heat-tint);
  color: var(--heat-strong);
}

.workflow-list li:last-child strong::after,
.journey-step:nth-last-child(2) strong::after,
.workflow-footer::before,
.journey-note::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--heat);
  box-shadow: 0 0 0 4px var(--heat-tint);
}

.workflow-list li:last-child strong::after,
.journey-step:nth-last-child(2) strong::after {
  display: inline-block;
  margin-left: var(--sp-12);
  vertical-align: .06em;
}

.workflow-list strong {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.workflow-list p {
  margin: var(--sp-4) 0 0;
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.7;
}

/* Legend line: the spark means "a person decides here". */
.workflow-footer,
.journey-note {
  position: relative;
  margin: 0;
  padding: var(--sp-16) 0 0 var(--sp-24);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.8;
}

.workflow-footer {
  min-height: 62px;                    /* room for the two-line voice beside it */
  border-top-color: var(--line-strong);
  font-weight: 500;
}

.workflow-footer::before,
.journey-note::before {
  position: absolute;
  top: calc(var(--sp-16) + .9em - 4px);
  left: var(--sp-4);
}

/* The voice: no card, no shadow — it is the sheet's title block, docked at
   the right end of the legend line, clear of the glass. */
.voice-card {
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  margin: 0 var(--sp-64) 36px 0;
  line-height: 1.6;
  text-align: right;
}

.voice-card strong {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  letter-spacing: .02em;
}

.voice-card span {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--fs-legal);
}


/* 07 Capability strip — paper, two hairlines, three items
   ========================================================================== */

/* Three columns on the page grid: the labels start on the same lines as the
   three service cards below; the dividers stand in the middle of the gutters. */
.capability-strip,
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.capability-strip {
  width: var(--shell);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.capability-strip > div,
.principles span {
  margin-left: calc(var(--grid-gap) / -2);
  padding-left: calc(var(--grid-gap) / 2 - 1px);
  border-left: 1px solid var(--line);
}

.capability-strip > div:first-child,
.principles span:first-child {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.capability-strip > div {
  display: flex;
  align-items: baseline;
  gap: var(--sp-16);
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-24);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
}

.capability-strip span {
  color: var(--heat-strong);         /* small vermilion text is always 深緋 */
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .08em;
}


/* 08 Sections
   ========================================================================== */

/* Grounds — neighbours never share one; the dark kogecha is kept for the two bands
   that carry the voice: philosophy and the closing contact. */
.services,
.process,
.company   { background: var(--paper); }

.usecases,
.faq       { background: var(--paper-2); }

.philosophy,
.contact   { background: var(--dark); color: var(--on-dark); }

/* The sheet — one surface grammar for service cards, the journey diagram and
   the contact aside (inner-pages.css): white, a 2px sumi rule across a
   square top edge, rounded bottom corners, no outline. */
.service-card,          /* .service-featured included: all three are equal */
.journey-panel,
.inquiry-contact-card {
  border-top: 2px solid var(--struct);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-rest);
}

/* Services — paper -------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-32);
  transition: box-shadow .25s ease, transform .25s ease;
}

.service-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}

.service-index {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-12);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.service-index .num {
  color: var(--heat-strong);
  font-family: var(--font-latin);
  font-weight: 500;
  letter-spacing: .08em;
}

.service-icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--struct);
}

/* One line per title: the longest, 「業務の可視化・改善設計」, is 11.5em wide and
   the card's text column is 30vw − 80px, so between 1100 and 1195px the size
   eases down just enough to hold it (21.6 → 24px). Narrower three-column
   cards set their titles on two lines instead (11 Responsive, 1100). */
.service-card h3 {
  margin: var(--sp-32) 0 var(--sp-16);
  font-size: min(1.5rem, calc((30vw - 80px) / 11.6));
}

.service-card h3 br { display: none; }
.service-card:not(:nth-of-type(3)) h3 br { display: inline; }

.service-card > p {
  margin: 0 0 var(--sp-24);
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.9;
}

/* Tags are labels, not buttons: no border, no hover. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: auto;
}

.tag-list span {
  padding: var(--sp-4) 10px;
  border-radius: var(--radius-s);
  background: var(--chip);
  color: var(--struct);               /* sumi on the 砂 chip */
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: 56px;
  margin: var(--sp-24) 0 calc(-1 * var(--sp-16));
  border-top: 1px solid var(--line);
}

/* Note rows — 「Web制作・運用」 and 「費用について」 are one component: a quiet
   paper-2 panel whose copy starts on column 5 of the page grid, like the FAQ
   list and the company table. */
.web-support,
.pricing-note {
  --row-pad: var(--sp-32);
  display: grid;
  grid-template-columns:
    calc((100% + 2 * var(--row-pad) + var(--grid-gap)) / 3 - var(--row-pad) - var(--grid-gap))
    minmax(0, 1fr)
    auto;
  column-gap: var(--grid-gap);
  align-items: center;
  padding: var(--sp-24) var(--row-pad);
  border-radius: var(--radius-m);
  background: var(--paper-2);
}

.web-support  { margin-top: var(--sp-48); }
.pricing-note { margin-top: var(--sp-64); }

.web-support > strong,
.pricing-note > span {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.web-support > p,
.pricing-note > p {
  margin: 0;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.9;
}

/* Use cases — paper-2 ------------------------------------------------------ */

.usecase-layout { align-items: start; }

.usecase-list { grid-column: 1 / span 6; }

.usecase-list article {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;               /* numeral and category label share a baseline */
  padding: var(--sp-32) 0 var(--sp-40);
  border-top: 1px solid var(--line-strong);
}

.usecase-list article:last-child { border-bottom: 1px solid var(--line-strong); }

.case-number {
  color: var(--heat-strong);   /* small numerals on the paper-2 band: 6.0:1 (the brand vermilion is 4.24:1 there) */
  font-family: var(--font-latin);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
}

.case-category {
  display: block;
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}

.usecase-list h3 { margin: var(--sp-12) 0 var(--sp-16); }

.usecase-list p {
  margin: 0;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.9;
}

/* The journey diagram: a sheet on the paper-2 band, same notation as the
   hero band (drawn numerals, heat on the human step, spark legend). */
.journey-panel {
  grid-column: 8 / -1;
  position: sticky;
  top: calc(var(--header-h) + var(--adminbar-h) + var(--sp-32));
  padding: var(--sp-40);
  box-shadow: var(--shadow-card);
}

.journey-label {
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}

.journey-panel h3 {
  margin: var(--sp-8) 0 var(--sp-32);
  font-size: 1.5rem;
}

.journey-step {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.journey-step strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-wrap: balance;
}

.journey-step p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.7;
}

.journey-connector {
  width: 1px;
  height: var(--sp-24);
  margin: var(--sp-4) 0 var(--sp-4) var(--sp-20);   /* under the 40px numeral's centre */
  background: var(--line-strong);
}

.journey-note {
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  color: var(--ink-2);
}

.journey-note::before { top: calc(var(--sp-24) + .9em - 4px); }

/* Philosophy — kogecha dark, the emotional core ------------------------------ */

.philosophy > div:first-child {
  grid-column: 1 / span 7;
  grid-row: 1 / span 3;
}

.philosophy h2 { font-size: var(--fs-statement); }

/* Dark-band voice, shared with the contact band */
.philosophy .heat { color: var(--heat-on-dark); }

.philosophy .eyebrow,
.contact .eyebrow { color: var(--on-dark); }

.philosophy .eyebrow::before,
.contact .eyebrow::before { background: var(--heat-on-dark); }

.philosophy .eyebrow-en,
.contact .eyebrow-en { color: var(--on-dark-2); }

.philosophy .eyebrow-en::before,
.contact .eyebrow-en::before { background: var(--on-dark-2); opacity: .5; }

/* .philosophy-copy dissolves so the three behaviours can span the full row */
.philosophy-copy { display: contents; }

.philosophy-copy > p {
  grid-column: 8 / -1;
  margin: 0 0 var(--sp-16);
  color: var(--on-dark-2);
}

.philosophy-copy > .philosophy-lead {
  margin-top: calc(var(--fs-small) * 1.6 + var(--sp-24));   /* eyebrow height: level with the h2 */
  margin-bottom: var(--sp-32);
  color: var(--on-dark);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  font-feature-settings: "palt" 1;
  line-height: 1.7;
  letter-spacing: .04em;               /* as h2/h3: palt closes up 、。 mid-line */
}

/* The three behaviours: a fully ruled row — hairline above and below, the
   dividers running the whole height between them. */
.principles {
  grid-column: 1 / -1;
  margin-top: var(--sp-64);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.principles span {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding-top: var(--sp-32);
  padding-bottom: var(--sp-32);
  border-left-color: var(--line-on-dark);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  font-feature-settings: "palt" 1;
  line-height: 1.55;
  letter-spacing: .04em;
}

.principles span::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--heat-on-dark);
}

/* Process — paper ---------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  padding-top: var(--sp-32);
  border-top: 1px solid var(--line-strong);
}

/* a 32px heat segment laid over the start of each hairline */
.steps li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--heat);
}

.step-number {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  font-family: var(--font-latin);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

/* English step word: sentence case and quiet, like the eyebrows
   (the markup is upper case). */
.step-number span {
  color: var(--ink-3);
  font-size: var(--fs-small);
  letter-spacing: .02em;
  text-transform: lowercase;
}

.step-number span::first-letter { text-transform: uppercase; }

.steps h3 {
  margin: var(--sp-24) 0 var(--sp-12);
  font-size: 1.125rem;
}

/* Phrase segmentation mis-reads 「確認方法」「操作方法」 as 方|法, and a column-wide
   measure lands a break exactly there at some widths. The measure is set in
   em instead and the lines are balanced: every step then reads as the same
   four whole phrases at every width (swept 320–1440). */
.steps p {
  max-width: 16.5em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.9;
}

/* FAQ — paper-2, heading left / hairline list right ------------------------- */

.faq { align-items: start; }

.faq .section-heading {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header-h) + var(--adminbar-h) + var(--sp-32));
  display: block;
  margin: 0;
}

.faq .section-heading > p { margin-top: var(--sp-24); }

.faq-list {
  grid-column: 5 / -1;
  border-bottom: 1px solid var(--line-strong);
}

.faq-list details { border-top: 1px solid var(--line-strong); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  min-height: 72px;
  padding: var(--sp-16) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: balance;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

.faq-list summary::-webkit-details-marker { display: none; }

/* plus → minus, drawn with two bars of currentColor */
.faq-list summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: var(--sp-4);
  color: var(--ink);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .2s ease;
}

.faq-list summary:hover,
.faq-list summary:active { color: var(--heat-strong); }

/* Open: the question returns to sumi, the plus becomes a heat minus. */
.faq-list details[open] > summary { color: var(--struct); }

.faq-list details[open] > summary::after {
  color: var(--heat);
  background-size: 100% 1.5px, 0 0;
  transform: rotate(180deg);
}

.faq-list details p {
  max-width: 44em;
  margin: 0;
  padding: 0 var(--sp-48) var(--sp-32) 0;
  color: var(--ink-2);
}

/* Company — paper ---------------------------------------------------------- */

.company { align-items: start; }

.company > div:first-child { grid-column: 1 / span 4; }

/* 「事業のこれから。」 is 7.7em wide and must stay whole: below 1120px the four
   columns (30vw − 16px) are narrower than that at the h2 size, so the size
   follows the column (33 → 41px) and the heading keeps its two lines. */
.company h2 { font-size: min(var(--fs-h2), calc((30vw - 16px) / 7.7)); }

.company-intro {
  margin: var(--sp-24) 0 var(--sp-32);
  color: var(--ink-2);
}

.company-logo {
  width: auto;
  height: 28px;
}

/* ruled like the FAQ list and the use cases: --line-strong */
.company-table {
  grid-column: 5 / -1;
  margin: 0;
  border-bottom: 1px solid var(--line-strong);
}

/* 8 columns inside 8 columns of the page grid: the values start on column 7 */
.company-table > div {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--line-strong);
  line-height: 1.8;
}

.company-table dt {
  grid-column: 1 / span 2;
  color: var(--ink-3);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 2.06;        /* sits on the dd's first baseline */
}

.company-table dd {
  grid-column: 3 / -1;
  margin: 0;
}

.registered-purposes {
  margin: 0;
  padding-left: 1.6em;
  list-style: decimal;
  font-size: var(--fs-small);
  line-height: 1.9;
  scroll-margin-top: 120px;
}

.registered-purposes li { padding-left: .25em; }
.registered-purposes li + li { margin-top: .75em; }

/* Contact — kogecha dark, the closing band ----------------------------------- */

.contact-inner {
  align-items: end;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.contact-inner > div:first-child { grid-column: 1 / span 7; }

.contact-inner > div:first-child > p:not(.eyebrow) {
  margin: var(--sp-32) 0 0;
  color: var(--on-dark-2);
}

.contact-actions {
  grid-column: 8 / -1;
  display: grid;
}

.contact-actions .button-light {
  min-height: 72px;
  padding-left: var(--sp-32);
  padding-right: var(--sp-32);
  font-size: 1.0625rem;
}

/* hairline between the button and the mail address; the link below it
   is only as wide as its text, so its focus ring hugs the text */
.contact-actions::after {
  content: "";
  order: 1;
  height: 1px;
  margin: var(--sp-32) 0 var(--sp-16);
  background: var(--line-on-dark);
}

.email-link {
  order: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark-2);
  font-family: var(--font-latin);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.email-link:hover { color: var(--on-dark); }


/* 09 Footer — paper
   ========================================================================== */

.footer {
  padding-top: var(--sp-48);
  padding-bottom: var(--sp-32);
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding-bottom: var(--sp-32);
}

.footer .brand img { height: 28px; }

/* logo | tagline — a hairline between the two */
.footer-top p {
  margin: 0;
  padding-left: var(--sp-24);
  border-left: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
  white-space: nowrap;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--sp-12);
  min-height: 44px;
  margin-left: auto;
  font-size: var(--fs-small);
  font-weight: 500;
}

.back-to-top span { font-family: var(--font-latin); color: var(--ink-3); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.6;
}

.footer-bottom > div {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--sp-12));
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-12);
  color: var(--ink-2);
}

.footer-bottom a:hover,
.back-to-top:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}


/* 10 WordPress admin bar — logged-in offsets only
   ========================================================================== */

/* The sticky header, the mobile menu and the sticky side panels all read
   --adminbar-h; anchors get the same offset as scroll margin. */
body.admin-bar { --adminbar-h: 32px; }

/* every anchor target — sections, #contact, the form's #contact-result */
body.admin-bar [id] { scroll-margin-top: var(--adminbar-h); }

@media (max-width: 782px) {
  body.admin-bar { --adminbar-h: 46px; }
}

@media (max-width: 600px) {
  body.admin-bar #wpadminbar { position: fixed; }
}


/* 11 Responsive — one block per breakpoint
   ========================================================================== */

@media (max-width: 1100px) {
  .site-header { gap: var(--sp-16); }
  .site-header nav a { padding: 0 10px; }      /* at 901px logo + nav + CTA still end on the content edge */

  /* six + six columns: the sub-copy keeps each sentence on one line */
  .hero-description { grid-column: 1 / span 6; }
  .hero-sub { grid-column: 7 / -1; }

  .hero-visual { grid-template-columns: minmax(0, 1fr) 32%; }
  .workflow-card { padding: var(--sp-32) var(--sp-48) var(--sp-32) var(--sp-32); }
  .workflow-list { column-gap: var(--sp-16); }
  .workflow-list li:not(:last-child)::before,
  .workflow-list li:not(:last-child)::after { right: -8px; }
  .workflow-list strong { font-size: var(--fs-small); }
  .voice-card { margin: 0 var(--sp-48) var(--sp-32) 0; }

  /* Narrow three-column cards: the two long titles break where they were
     authored to (「業務の可視化・ / 改善設計」「AI・業務 / システム構築」 — never
     「AI・ / 業務…」); the short one keeps one line in the same two-line block,
     so the three descriptions start level. */
  .service-card { padding: var(--sp-24); }
  .service-card h3 { min-height: 3.1em; font-size: 1.375rem; }
  .service-card:not(:nth-of-type(3)) h3 br { display: inline; }

  .usecase-list { grid-column: 1 / span 7; }
  .journey-panel { padding: var(--sp-32); }

  .philosophy > div:first-child { grid-column: 1 / span 6; }
  .philosophy-copy > p { grid-column: 7 / -1; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-48); }

  .web-support,
  .pricing-note { --row-pad: var(--sp-24); }
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }

  /* Header: logo · compact sumi CTA (text only) · menu toggle. The toggle's
     44px box reaches into the gutter so its bars end on the content edge. */
  .site-header { gap: var(--sp-8); }
  .site-header nav { display: none; }
  /* 26px logo and 14px CTA padding down to 375px; from there both ease off
     (24px at 353 — logo.svg's minimum; from 352 down logo-small.svg, 21px at 320 —
     and 10px at 320) so the wordmark always keeps ≥ 16px clear of the CTA.
     The logo may give way — scaled, never cropped — before the toggle is
     pushed off screen when the reader's default font size is enlarged. */
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand img { min-width: 0; height: clamp(21px, 9.1vw - 8.1px, 26px); object-fit: contain; object-position: left center; }
  .header-cta { margin-left: auto; padding: var(--sp-8) clamp(10px, 7.3vw - 13.4px, 14px); }
  .header-cta > span[aria-hidden="true"],
  .cta-long { display: none; }
  .cta-short { display: inline; }

  .menu-toggle {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -11px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .menu-toggle span {
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }
  .menu-toggle:active { opacity: .6; }

  /* The 12-column layouts fold into one column */
  .hero-copy,
  .section-heading,
  .usecase-layout,
  .philosophy,
  .faq,
  .company,
  .contact-inner { grid-template-columns: minmax(0, 1fr); }

  .hero-description,
  .hero-sub,
  .section-heading > div,
  .section-heading > p,
  .usecase-list,
  .journey-panel,
  .philosophy > div:first-child,
  .philosophy-copy > p,
  .faq .section-heading,
  .faq-list,
  .company > div:first-child,
  .company-table,
  .contact-inner > div:first-child,
  .contact-actions { grid-column: 1 / -1; }

  /* Hero: the band keeps the art on the right, steps run down the left */
  .hero h1 { margin-bottom: 49px; }              /* 24 to the rule + 1 + 24 */
  .hero h1::after { margin-top: calc(var(--kagi-b) + var(--sp-24)); }
  .hero-sub { margin-top: var(--sp-16); }
  .hero-actions { margin-top: var(--sp-32); }

  .hero-visual { grid-template-columns: minmax(0, 1fr) 38%; grid-template-rows: 1fr auto; min-height: 0; }
  /* taller band: the art spans both rows; its framing for 651–1023px (the whole cube,
     centred, faded into the sheet) is set with the imagery rules at the end of the file */
  .hero-art { grid-row: 1 / -1; }
  .workflow-card { padding: var(--sp-32) var(--sp-32) var(--sp-16); }
  .workflow-footer { min-height: 0; }
  .voice-card {
    grid-row: 2;
    align-self: start;
    justify-self: start;
    margin: 0 var(--sp-32) var(--sp-32) calc(var(--sp-32) + var(--sp-24));
    text-align: left;
  }

  .workflow-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-24); }
  .workflow-list li { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-16); align-items: center; }
  .workflow-list strong { font-size: .9375rem; }
  .workflow-list li:not(:last-child)::before {
    top: 44px;
    right: auto;
    bottom: -20px;
    left: 20px;
    width: 1px;
    height: auto;
  }
  .workflow-list li:not(:last-child)::after { display: none; }

  .capability-strip > div { gap: var(--sp-8); font-size: var(--fs-small); }

  /* Sections */
  .section-heading { row-gap: var(--sp-24); margin-bottom: var(--sp-48); }
  .section-heading > p { max-width: 36em; margin-bottom: 0; }

  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card h3 { min-height: 0; margin-top: var(--sp-24); }
  .service-card:not(:nth-of-type(3)) h3 br { display: inline; }   /* Keep the longer service names in meaningful phrases. */
  .service-card > p,
  .usecase-list p,
  .philosophy-copy > p { max-width: 38em; }   /* a readable measure in the single column */

  .web-support,
  .pricing-note { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-4); }
  .web-support > strong,
  .pricing-note > span { grid-column: 1 / -1; }

  .usecase-layout { row-gap: var(--sp-48); }
  .journey-panel { position: static; }

  .philosophy > div:first-child { grid-row: auto; margin-bottom: var(--sp-32); }
  .philosophy-copy > .philosophy-lead { margin-top: 0; }

  .faq { row-gap: var(--sp-48); }
  .faq .section-heading { position: static; }

  .company { row-gap: var(--sp-48); }
  .company h2 { font-size: var(--fs-h2); }

  .contact-inner { row-gap: var(--sp-48); }
  .contact-actions { max-width: 480px; }
}

@media (max-width: 650px) {
  body { line-height: 1.8; }

  .eyebrow { margin-bottom: var(--sp-16); }

  /* Hero: copy + CTA fit one screen. The band becomes the ember loop (always playing,
     no control) on top of a compact vertical diagram; no voice line. */
  .hero { padding-bottom: var(--sp-48); }
  .hero h1 { margin-bottom: var(--sp-24); }
  .hero h1::after { content: none; }             /* no rule on phones */
  .hero-description { font-size: 1.0625rem; line-height: 1.75; letter-spacing: 0; }
  .hero-sub { max-width: 15em; margin-top: var(--sp-12); font-size: .9375rem; }   /* four whole clauses; 「本気で向き合います。」 is never split */
  .hero-actions { gap: var(--sp-8) var(--sp-24); margin-top: var(--sp-24); }
  .hero-actions .button { width: 100%; }

  .hero-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; border-radius: var(--radius-m); }
  /* phones: the ember loop sits on top of the sheet, the compact diagram below it */
  .hero-art {
    grid-column: 1;
    grid-row: 1;
    height: clamp(176px, 50vw, 232px);
    -webkit-mask-image: linear-gradient(to bottom, var(--mask-on) 62%, transparent);
    mask-image: linear-gradient(to bottom, var(--mask-on) 62%, transparent);
  }
  .workflow-card { grid-column: 1; grid-row: 2; }
  .voice-card { display: none; }
  .workflow-card { gap: var(--sp-16); padding: var(--sp-20) var(--sp-20) var(--sp-16); }
  .workflow-heading { flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); }
  .example-label { padding-right: var(--sp-12); }
  .workflow-list { row-gap: var(--sp-12); }
  .workflow-list li { column-gap: var(--sp-12); }
  .workflow-list li:not(:last-child)::before { bottom: -8px; }
  .workflow-list strong { line-height: 1.5; }
  .workflow-list p { margin-top: 0; line-height: 1.6; }
  .workflow-footer { padding-top: var(--sp-12); }
  .workflow-footer::before { top: calc(var(--sp-12) + .9em - 4px); }

  /* The strip repeats the services section — drop it on phones */
  .capability-strip { display: none; }

  .section-heading { row-gap: var(--sp-16); margin-bottom: var(--sp-32); }
  .contact-inner > div:first-child > p:not(.eyebrow) { max-width: 15.5em; }   /* one 「…」 quotation per line */

  /* In a ~20-character measure "pretty" leaves a very ragged edge: card and
     list copy fills its lines instead (breaks stay phrase-aware). */
  .service-card { padding: var(--sp-24) var(--sp-20); }
  .service-card > p,
  .usecase-list p,
  .faq-list details p { text-wrap: wrap; }

  .web-support,
  .pricing-note { --row-pad: var(--sp-20); grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-20); padding-bottom: var(--sp-12); }
  .web-support > a,
  .pricing-note > a { justify-self: start; }
  .web-support  { margin-top: var(--sp-32); }
  .pricing-note { margin-top: var(--sp-48); }

  .usecase-list article { grid-template-columns: 40px minmax(0, 1fr); padding: var(--sp-24) 0 var(--sp-32); }
  .usecase-list h3 { font-size: 1.25rem; }
  .journey-panel { padding: var(--sp-24) var(--sp-20); }   /* every sheet's text starts 20px in, like the service cards */
  .journey-panel h3 { font-size: 1.375rem; margin-bottom: var(--sp-24); }
  .section-footnote { margin-top: var(--sp-32); }

  .philosophy-copy > .philosophy-lead { margin-bottom: var(--sp-24); }
  /* a 21-character measure: the segmenter reads 「一つひとつ」 as 一つ|ひとつ and
     wider phone columns (392–423px) broke the word there */
  .philosophy-copy > p:not(.philosophy-lead) { max-width: 21em; }
  .principles { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-32); border-bottom: 0; }
  .principles span,
  .principles span:first-child {
    margin-left: 0;
    padding: var(--sp-16) 0;
    border-left: 0;
    border-bottom: 1px solid var(--line-on-dark);
  }

  /* Steps: one column on a left rule, heat segment at each start */
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .steps li {
    padding: 0 0 var(--sp-32) var(--sp-24);
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { top: 0; left: -1px; width: 2px; height: 32px; }
  .steps h3 { margin-top: var(--sp-16); margin-bottom: var(--sp-8); }

  .faq-list summary { min-height: 64px; font-size: 1rem; gap: var(--sp-16); }
  /* Two measures at which no answer breaks inside a word: 19em up to 368px
     (the segmenter reads 「連絡方法」 as 方|法 and a 321–328px column broke it
     there), 24.5em above — wider phone columns ended lines inside
     「などによって」 (415px–) and 「利用状況」 (432px–). The middle term only
     switches between the two at 368.5px. */
  .faq-list details p { max-width: clamp(19em, (100vw - 368.5px) * 1000, 24.5em); padding-right: 0; padding-bottom: var(--sp-24); font-size: .9375rem; }

  .company-table > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); padding: var(--sp-16) 0; }
  .company-table dt,
  .company-table dd { grid-column: 1 / -1; }
  .company-table dt { line-height: 1.6; }

  .contact-actions .button-light { min-height: 64px; padding-left: var(--sp-24); padding-right: var(--sp-24); font-size: 1rem; }
  .contact-actions { max-width: none; }

  .footer { padding-top: var(--sp-32); }
  /* logo | tagline stay on one line down to 361px; below that they stack */
  .footer-top { flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); padding-bottom: var(--sp-16); }
  .footer .brand img { height: 24px; }            /* logo.svg's minimum height; 171px wide still fits at 320 */
  .footer-top p { padding-left: var(--sp-12); }
  .footer-top .back-to-top { flex-basis: 100%; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-16); }
  .footer-bottom > div { margin: 0 calc(-1 * var(--sp-12)); }
}

/* logo.svg must not be drawn under 24px: up to 352px the header takes the small-size
   logo (heavier brackets, 深緋 wordmark), which is made for 16–24px. */
@media (max-width: 352px) {
  .site-header .brand img { content: url("assets/logo-small.svg"); }
}

/* Under 320px (a folded phone's cover screen, a very narrow pane) the first line
   「熱量で向き合い、」 is wider than the column at the 2rem floor and would break inside
   向き合い: there the statement follows the width instead (8 glyphs + the bracket padding). */
@media (max-width: 319px) {
  .hero h1 { font-size: calc((100vw - 2 * var(--gutter)) / 8.8); }
}

@media (max-width: 360px) {
  :root { --fs-h2: 1.5rem; }
  .philosophy h2 { font-size: 1.625rem; }
  .philosophy-copy > .philosophy-lead { font-size: 1.125rem; }

  .site-header { gap: var(--sp-4); }
  .header-cta { letter-spacing: .02em; }

  .hero-description { font-size: .9375rem; }   /* two lines from 340px; below that 「使える仕組みに。」 takes a third, whole */
  .workflow-card { padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .workflow-heading { flex-direction: column; align-items: flex-start; gap: 0; }   /* label over title: no rule left dangling */
  .example-label { padding-right: 0; border-right: 0; }

  /* keep 「方針」「連絡方法」 whole (see .steps p); at 15px 「今の課題と、これからの
     方針に合わせて、」 holds one line from 325px instead of stranding 「合わせて、」 */
  .section-heading > p { font-size: .9375rem; text-wrap: wrap; }
  /* 「何を自動化できるかわからなくても、」 is one unbreakable phrase: set like a
     heading (palt) it fits the line instead of leaving 「何を」 alone */
  .faq-list summary { gap: var(--sp-12); font-size: .9375rem; font-feature-settings: "palt" 1; letter-spacing: .02em; }
  .service-card,
  .journey-panel { padding: var(--sp-20); }
  .service-card h3 { font-size: 1.25rem; }     /* 「業務の可視化・改善設計」 stays on one line */
  .tag-list span { white-space: normal; }

  .footer-top p { flex-basis: 100%; padding-left: 0; border-left: 0; }   /* stacked: no divider */
}


/* 12 Accessibility, motion, engine and contrast-mode fallbacks
   ========================================================================== */

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

.philosophy :focus-visible,
.contact :focus-visible { outline-color: var(--heat-on-dark); }

main:focus,
main:focus-visible { outline: none; }

/* Header hairline appears once the page scrolls (where scroll-driven
   animation exists); otherwise it is simply always there. */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-rule linear both;
    animation-timeline: scroll(root);
    animation-range: 0 72px;
  }

  @keyframes header-rule {
    from { border-bottom-color: transparent; }
    to   { border-bottom-color: var(--line); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Safari and Firefox have no auto-phrase. There the headings and the other
   short, punctuated copy take the same clause-level breaks as the leads
   (02 Base) — each clause fits its measure from 320 to 1440px — so no
   headline or first-view text is cut inside a word. Long running copy (cards,
   FAQ, steps) keeps normal Japanese line breaking, with "pretty" on phones
   too: without phrase breaks it costs no rag and keeps 「す。」 from standing
   alone. body's overflow-wrap stays the safety net. */
@supports not (word-break: auto-phrase) {
  :is(.hero, .inner-hero, .section-heading, .usecase-list, .journey-panel, .philosophy, .company, .contact-inner) :is(h1, h2, h3),
  .section-heading > p,
  .section-footnote,
  .philosophy-copy > p,
  .web-support > p,
  .pricing-note > p,
  .inquiry-contact-card > p { word-break: keep-all; }

  .service-card > p,
  .usecase-list p,
  .faq-list details p { text-wrap: pretty; }
}

/* Windows High Contrast: whatever is drawn with a background colour — the
   menu bars, the FAQ plus/minus — is repainted in system colours, and the
   borderless buttons get an outline. */
@media (forced-colors: active) {
  .menu-toggle span,
  .faq-list summary::after { forced-color-adjust: none; }

  .menu-toggle span { background: CanvasText; }

  /* The h1 brackets are gradients, which forced colours would simply drop: the heading
     opts out and is painted in system colours by hand, brackets included. */
  .hero h1 { forced-color-adjust: none; color: CanvasText; --kagi-c: CanvasText; }
  .hero h1 .heat { color: Highlight; }
  .hero h1::after { background: CanvasText; }

  .faq-list summary::after,
  .faq-list details[open] > summary::after { color: CanvasText; }

  .button { border: 1px solid ButtonText; }      /* also .header-cta and .form-submit */
}

/* A dark high-contrast theme turns the canvas black: the sumi brackets of logo.svg
   would vanish, so the header and footer take the on-dark logo. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .brand img { content: url("assets/logo-on-dark.svg"); }
}


/* ==========================================================================
   Imagery — generated still lifes and the hero loop (Higgsfield)
   One art direction: warm paper, clear glass, sumi, a single ember.
   ========================================================================== */

/* Service cards: one still life each, bled to the card edges under the top rule. */
.service-media {
  order: -1;
  margin: calc(-1 * var(--sp-32)) calc(-1 * var(--sp-32)) var(--sp-24);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}
.service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.service-card:hover .service-media img { transform: scale(1.025); }

/* Philosophy band: two glass blocks face each other, an ember between them — the band's
   statement 「熱量は、向き合い方に表れる。」 as one picture. It sits between the copy and the
   three behaviours, full width. `lighten` lets the photograph's darkness dissolve into the
   band, so there is no frame and nothing to mask. (.philosophy-copy is display:contents,
   so its ::after is a grid item of the band; `order` keeps copy → picture → behaviours
   at every breakpoint.) */
.philosophy { position: relative; isolation: isolate; }

.philosophy-copy::after {
  content: "";
  order: 1;
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--sp-48);
  aspect-ratio: 1800 / 737;
  max-height: 440px;
  background: url("assets/band-facing.webp") 50% 50% / cover no-repeat;
  mix-blend-mode: lighten;
  /* the reflections fade out before the picture's lower edge: no cut line */
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-on) 70%, transparent 98%);
  mask-image: linear-gradient(to bottom, var(--mask-on) 70%, transparent 98%);
  pointer-events: none;
}

.principles { order: 2; margin-top: var(--sp-32); }

@media (max-width: 1100px) {
  .service-media { margin: calc(-1 * var(--sp-24)) calc(-1 * var(--sp-24)) var(--sp-24); }
}

/* Desktop, from 1024px — the loop stands in the first view, beside the statement.
   Inside the band it started at y = 668 of a 1440 x 900 screen (half under the fold), while
   the two-line H1 left the right third of the first view empty. From 1024px up that room
   takes the loop as a framed picture (the mastheads' 12px radius, no mask): columns 9–12,
   from the eyebrow's top to the foot of the 」 bracket — so it never reaches the hairline —
   and at least 50px clear of the bracket at every width (52 at 1024, 107 at 1440).
   ONE <video>, ONE DOM position: .hero-art stays a child of the band. .hero takes the page's
   12 columns and the band's box dissolves (display: contents), so the art is placed on
   .hero's own grid, in the copy's row; the sheet is then drawn by .workflow-card. */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .hero-copy { grid-column: 1 / -1; grid-row: 1; }
  .hero-visual { display: contents; }

  .hero-art {
    grid-column: 9 / -1;
    grid-row: 1;
    align-self: start;
    /* eyebrow line (.875rem x 1.6) + its margin + the framed H1 (--kagi-box = 2.9em of the display size) */
    height: calc(1.4rem + var(--sp-16) + 2.9 * var(--fs-display));
    overflow: hidden;
    border-radius: var(--radius-m);
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The sheet without the picture: the page grid again. Title block in columns 1–4 (label
     over title at the top, the voice at the foot), the process line from column 5 — the
     line the FAQ list and the company table start on — so the three steps keep the
     measure they had beside the glass instead of being stretched over 1200px. */
  .workflow-card {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 28px;
    padding: 36px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper-2);
  }
  .workflow-heading {
    grid-column: 1 / span 4;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding-left: var(--sp-48);
  }
  .example-label { padding-right: 0; border-right: 0; }
  .workflow-list,
  .workflow-footer { grid-column: 5 / -1; margin-right: var(--sp-48); }
  .voice-card {
    grid-column: 1 / span 4;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    margin: 0 0 37px var(--sp-48);                /* 36 + the sheet's border: level with the legend line */
    text-align: left;
  }
}

/* Narrow desktop and tablets */
@media (min-width: 651px) and (max-width: 1023px) {
  /* Hero: the art column is narrower than the cube a full-height crop would draw. The art
     box becomes the 3:2 picture itself — column + 150px wide, centred on the column, so
     the whole cube shows — and dissolves into the sheet on the left (mask) and at the
     top and bottom (paper-2 veils). Poster and loop still share this one box. */
  .hero-art {
    align-self: center;
    justify-self: center;
    width: calc(100% + 150px);
    aspect-ratio: 3 / 2;
    -webkit-mask-image: linear-gradient(to right, transparent 9%, var(--mask-on) 24%);
    mask-image: linear-gradient(to right, transparent 9%, var(--mask-on) 24%);
  }
  .hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to bottom, var(--paper-2), transparent 9%),
      linear-gradient(to top, var(--paper-2), transparent 9%);
    pointer-events: none;
  }
}

/* Tablets: one column of cards */
@media (min-width: 651px) and (max-width: 900px) {
  /* Service cards: the still life stands on the left (36%), bled to the card's edges, and
     the text runs beside it — a full-width 3:2 picture per card pushed the three cards'
     copy more than a screen apart. */
  .service-card {
    display: grid;
    grid-template-columns: 36% minmax(0, 1fr);
    column-gap: var(--sp-32);
    align-content: start;
  }
  .service-card > * { grid-column: 2; }
  .service-card > .service-media {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 8;
    margin: calc(-1 * var(--sp-24)) 0 calc(-1 * var(--sp-24)) calc(-1 * var(--sp-24));
    aspect-ratio: auto;
    border-radius: 0 0 0 var(--radius-m);
  }
  .service-media img { position: absolute; inset: 0; }
  .service-card h3 { margin-top: var(--sp-16); }
}

@media (max-width: 650px) {
  .service-media { margin: calc(-1 * var(--sp-24)) -20px 20px; aspect-ratio: 16 / 9; }

  /* Philosophy picture: at the band's 1800:737 it would be a 143px thumbnail. On phones it
     is cut to 3:2 at full height — the two blocks and the ember fill the column; the
     cropped sides are pure dark and vanish under `lighten`. */
  .philosophy-copy::after {
    aspect-ratio: 3 / 2;
    max-height: none;
    background-size: auto 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-media img { transition: none; }
  .service-card:hover .service-media img { transform: none; }
}