/* ============================================================
   TENOR — page sections (template-parts/flexible/*.php)
   Ported from the static homepage; shared by front-page.php and the page builder.
   ============================================================ */
/* ===== S1 · HERO — the brandbook cover/divider spread (p.3, p.28): an ink field, the
   concrete mark breaking the right edge, a fragment of the contour pattern behind it ===== */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
  padding:calc(var(--header-h) + clamp(48px,8vh,112px)) 0 clamp(150px,16vw,230px); }
.hero .t-pattern{ opacity:.26; }
.hero-render{ right:max(-4vw,-60px); bottom:clamp(70px,9vw,140px); width:clamp(320px,44vw,700px);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.hero-grid{ position:relative; z-index:2; }
.hero-copy{ max-width:min(800px,62%); }
.hero-copy h1{ font-size:clamp(34px,4.3vw,64px); }
.hero-copy h1{ color:#fff; }
.hero-copy h1 .sun{ color:var(--sun); }
.hero-sub{ margin:clamp(20px,2.2vw,28px) 0 0; max-width:50ch;
  font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:rgba(255,255,255,.76); }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:clamp(28px,3vw,40px); }
.hero-tel{ font-family:var(--f-display); font-weight:500; font-size:clamp(17px,1.35vw,20px);
  color:#fff; text-decoration:none; padding-bottom:3px; border-bottom:2px solid var(--blue);
  transition:border-color var(--t-quick) var(--e-out); }
.hero-tel:hover{ border-color:var(--sun); }
.hero-note{ margin:16px 0 0; font-size:13px; color:var(--ink-3); }
.hero-proof{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(40px,5vw,72px); }
.hero-proof span{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-xs);
  background:rgba(255,255,255,.07); font-size:12.5px; font-weight:700; color:rgba(255,255,255,.86); }
.hero-proof span::before{ content:""; width:8px; height:8px; background:var(--blue); clip-path:var(--house); }
@media (max-width:900px){
  .hero{ padding-bottom:clamp(120px,30vw,170px); }
  .hero-copy{ max-width:none; }
  .hero-render{ position:relative; display:block; right:auto; bottom:auto; width:min(78vw,380px);
    margin:44px -6vw 0 auto; }
}

/* ===== the stage — a white slab that rises out of the hero, holding the brand film ===== */
.film-stage{ position:relative; z-index:3;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 30px 80px rgba(13,8,56,.16), 0 4px 14px rgba(13,8,56,.06);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,4vw,64px); align-items:center; padding:clamp(22px,3vw,44px); }
.film-stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--blue); }
@media (max-width:880px){ .film-stage{ grid-template-columns:1fr; } }
/* height drives the box so the 9:16 source is never cropped */
.film{ position:relative; aspect-ratio:9/16; height:min(62vh,560px); width:auto;
  margin-inline:auto; border-radius:var(--r); overflow:hidden; background:var(--ink); }
@media (max-width:880px){ .film{ height:min(70vh,520px); } }
.film-v{ width:100%; height:100%; object-fit:cover; display:block; }
.film-play{ position:absolute; inset:0; margin:auto; width:76px; height:76px; border:0; cursor:pointer;
  border-radius:50%; background:var(--sun); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 0 0 10px rgba(255,195,115,.22);
  transition:transform var(--t-quick) var(--e-out), box-shadow var(--t-base) var(--e-out); }
.film-play svg{ width:26px; height:26px; margin-left:3px; }
.film-play:hover{ transform:scale(1.06); box-shadow:0 0 0 16px rgba(255,195,115,.18); }
.film[data-playing] .film-play, .film[data-playing] .film-cap{ opacity:0; pointer-events:none; }
.film-cap{ position:absolute; left:14px; bottom:12px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.8);
  transition:opacity var(--t-quick) var(--e-out); }
.fs-side .t-label{ margin-bottom:18px; }
.fs-lede{ margin:0 0 clamp(20px,2.4vw,30px); font-size:clamp(18px,1.6vw,23px); font-weight:700; line-height:1.4; max-width:30ch; }
.fs-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fs-list li{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r);
  background:#F4F4F6; font-size:15.5px; font-weight:700; }
.fs-list .b{ width:30px; height:30px; padding:7px; border-radius:8px; flex:none; background:var(--blue); color:#fff; }

.sec-head{ display:block; margin-bottom:calc(var(--u)*2); }
.sec-head h2{ max-width:24ch; }
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); }
@media (max-width:900px){ .split-2{ grid-template-columns:1fr; } }
/* positioning lockup — title left, proposition + the two advantages right */
.pos-head{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,84px); align-items:start; }
.pos-lede .body-lg{ margin:0 0 clamp(26px,3vw,38px); max-width:34ch; color:var(--ink); font-weight:700; }
.pos-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
.pos-cols > div{ background:#F4F4F6; border-radius:var(--r); padding:22px 22px 24px; }
.pos-cols .k{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--blue); margin-bottom:10px; }
.pos-cols .k::before{ content:""; width:4px; height:14px; border-radius:2px; background:var(--blue); }
.pos-cols p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-1); }
@media (max-width:900px){
  .pos-head{ grid-template-columns:1fr; gap:26px; }
  .pos-cols{ grid-template-columns:1fr; }
}
/* numbers band — the p.17 swatch steps: each figure sits on its own tint */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(52px,6vw,88px);
  border-radius:var(--r-lg); overflow:hidden; }
@media (max-width:900px){ .stats-band{ grid-template-columns:1fr 1fr; } }
.stat-cell{ padding:clamp(24px,2.6vw,38px); background:var(--ink); color:#fff; }
.stat-cell:nth-child(2){ background:var(--ink-raise); }
.stat-cell:nth-child(3){ background:var(--blue); }
.stat-cell:nth-child(4){ background:var(--sun); color:var(--ink); }
.stat-cell .n{ display:block; font-family:var(--f-display); font-weight:700; line-height:1; font-size:clamp(38px,4.4vw,64px); }
.stat-cell .l{ display:block; margin-top:14px; font-weight:700; font-size:13px; line-height:1.45; max-width:19ch; opacity:.82; }
/* chain */
.chain-wrap{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.chain-svg{ width:100%; height:auto; display:block; overflow:visible; }
.chain-path{ stroke:var(--blue-1); stroke-width:2.5; fill:none; stroke-linejoin:round; }
.chain-nodes{ display:grid; grid-template-columns:repeat(var(--n,6),1fr); gap:16px; margin:24px 0 0; padding:0; list-style:none; }
.chain-node{ position:relative; padding-top:16px; }
.chain-node::before{ content:""; position:absolute; top:0; left:0; width:20px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22); transition:background-color .3s, width .3s var(--e-out); }
.chain-node[data-on="true"]::before{ background:var(--sun); width:48px; }
.chain-node .n-idx{ font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--blue-2); display:block; margin-bottom:6px; }
.chain-node[data-on="true"] .n-idx{ color:var(--sun); }
.chain-node .n-name{ font-weight:700; font-size:14px; line-height:1.38; }
.chain-counter{ display:block; margin-top:24px; font-family:var(--f-display); font-weight:500; font-size:13px; color:var(--ink-3); }
@media (max-width:767px){ .chain-nodes{ grid-template-columns:1fr 1fr; } }
/* services preview — copy on top, the brandbook's 3D marks (p.27) grounded at the bottom */
.reasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1100px){ .reasons{ grid-template-columns:1fr 1fr; gap:22px; } }
@media (max-width:640px){ .reasons{ grid-template-columns:1fr; } }
.reason{ --pad-x:clamp(24px,2.2vw,34px);
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(28px,2.6vw,40px) var(--pad-x) 0; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#F4F4F6 0%,#ECECEF 100%);
  text-decoration:none; color:inherit;
  transition:transform .45s var(--e-out), box-shadow .45s var(--e-out), background-color .45s var(--e-out); }
.reason::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:var(--ink);
  clip-path:inset(100% 0 0 0); transition:clip-path .55s var(--e-out); }
.reason:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(13,8,56,.16); }
.reason:hover::after{ clip-path:inset(0 0 0 0); }
.reason > *{ position:relative; z-index:1; transition:color .45s var(--e-out); }
.reason .r-idx{ font-family:var(--f-display); font-weight:700; font-size:14px; color:var(--blue); }
.reason h3{ margin:14px 0 10px; font-weight:700; font-size:18px; line-height:1.3; }
.reason p{ margin:0 0 clamp(20px,2vw,28px); font-size:14.5px; line-height:1.55; color:var(--ink-1); }
.reason:hover h3{ color:#fff; }
.reason:hover p{ color:rgba(255,255,255,.74); }
.reason:hover .r-idx{ color:var(--sun); }
.r-visual{ margin-top:auto; height:clamp(170px,14vw,220px); display:grid; place-items:end center; }
.r-visual img{ width:auto; height:100%; max-width:100%; object-fit:contain; object-position:50% 100%;
  transform:translateY(14%); filter:drop-shadow(0 18px 24px rgba(13,8,56,.22));
  transition:transform .55s var(--e-out); }
.reason:hover .r-visual img{ transform:translateY(6%); }
/* press */
.press{ padding-block:calc(var(--pad-section)*.6); }
.press-box{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--sun-4);
  padding:clamp(32px,5vw,72px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; }
.press-box .t-label{ background:var(--sun); }
.press-title{ margin:0 0 clamp(18px,2vw,26px); max-width:none; }
.press blockquote{ position:relative; margin:0 0 20px; max-width:46ch; font-size:clamp(19px,2vw,26px); font-weight:700; line-height:1.45; }
.press .src{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:700; font-size:13px;
  letter-spacing:.06em; color:var(--blue); text-decoration:none; }
.press .src .arw{ width:13px; height:13px; }
.press .src:hover{ color:var(--ink); }
@media (max-width:860px){ .press-box{ grid-template-columns:1fr; } }
/* blog teaser */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
@media (max-width:1100px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .blog-grid{ grid-template-columns:1fr; } }
/* market block — title left, the argument right */
.mr-lock{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,84px); align-items:start; }
.mr-texts{ display:grid; gap:clamp(16px,1.8vw,24px); }
.mr-texts p{ margin:0; }
@media (max-width:900px){ .mr-lock{ grid-template-columns:1fr; gap:26px; } }
.market{ overflow:hidden; }
.market--joined{ padding-bottom:0; }
.market .watermark{ right:-10%; top:-18%; width:min(52vw,720px); height:auto; }

/* partner projects — subgrid keeps plate / rule / credit / title / meta / link on shared rows */
.prj-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(28px,4vw,64px); row-gap:0;
  grid-template-rows:auto auto auto auto auto auto; }
.prj{ display:grid; grid-row:span 6; grid-template-rows:subgrid; }
@media (max-width:700px){ .prj-grid{ grid-template-columns:1fr; } .prj{ margin-bottom:52px; } }
.prj-plate{ position:relative; display:block; text-decoration:none; }
.prj-logo{ position:absolute; left:16px; bottom:16px; z-index:3;
  width:clamp(76px,6.6vw,104px); aspect-ratio:1; border-radius:var(--r);
  display:grid; place-items:center; overflow:hidden; background:#fff;
  box-shadow:0 10px 26px rgba(13,8,56,.34); }
.prj-logo img{ width:100%; height:100%; object-fit:cover; }
.prj-logo .pl-txt{ font-weight:700; font-size:12.5px; color:var(--ink); }
.prj .crop{ aspect-ratio:3/2; }
.prj-rule{ position:relative; height:2px; margin-top:26px; overflow:hidden; align-self:end; border-radius:1px; }
.prj-rule::before{ content:""; position:absolute; inset:0; background:#fff; opacity:.16; }
.prj-rule .fill{ position:absolute; inset:0; background:var(--sun); transform:scaleX(0); transform-origin:left center; transition:transform .55s var(--e-out); }
.prj:hover .prj-rule .fill{ transform:scaleX(1); }
.prj-top{ display:flex; align-items:baseline; gap:14px; margin:20px 0 12px; }
.prj-dev{ font-weight:700; font-size:13px; color:#fff; }
.prj-role{ margin-left:auto; font-size:12.5px; color:var(--sun); font-weight:700; }
.prj h3{ margin:0 0 16px; color:#fff; align-self:start; }
.prj-meta{ display:grid; gap:0; margin-bottom:20px; align-content:start; }
.prj-meta div{ display:flex; align-items:baseline; gap:12px; font-size:14px; padding:9px 0; border-top:1px solid rgba(255,255,255,.1); }
.prj-meta .k{ font-size:13px; color:var(--ink-3); }
.prj-meta .v{ margin-left:auto; color:#fff; font-weight:700; }
.prj .link{ color:#fff; justify-self:start; align-self:start; }

/* ===== WordPress additions: section joins, links, the film panel without a video ===== */
.film-wrap--lift .film-stage{ margin-top:calc(clamp(110px,13vw,190px) * -1); }
.film-wrap:not(.film-wrap--lift){ padding-top:var(--pad-section); }
/* no video yet: the glass mark (p.27) holds the frame */
.film--mark{ display:grid; place-items:center;
  background:radial-gradient(120% 80% at 50% 18%, var(--ink-raise) 0%, var(--ink) 72%); }
.film--mark img{ width:82%; height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.sec-intro{ padding-bottom:clamp(34px,4vw,56px); }
.sec-process .sec-head{ margin-bottom:20px; }
.sec-intro-text{ margin:0 0 40px; }
.sec-link{ margin:38px 0 0; }
.sec-projects--joined{ padding-top:clamp(44px,5.5vw,76px); }
.sec-projects .rule{ margin-bottom:clamp(40px,5vw,68px); }
.sec-posts--joined{ padding-top:0; }
.sec-posts-title{ margin-bottom:clamp(24px,3vw,36px); }