/* =======================================================================
JEPRA — Access the Japanese Market, Simply.
Global stylesheet for the WordPress theme.
AIRLINE-INSPIRED COLOR SYSTEM (ANA / JAL feel — no black, no cream)
- White & pale sky-blue backgrounds (clean, trustworthy, premium)
- Deep navy #0a1f4d primary brand colour, "ANA" feel
- Crane red #c8102e accent, "JAL" feel
- Champagne gold #bfa46f premium accent (ANA Mileage tone)
- Sky tints #f3f7fc / #e7eef9 soft sections & subtle dividers
The brand sits on white so the JEPRA logo's navy + red letters never
blend into the background. Motion is preserved everywhere (reveal-on-
scroll, marquee, animated flight route in the hero, hover lifts, etc.).
======================================================================= */
:root {
--bg: #ffffff; /* main page background — clean cabin white */
--bg-warm: #f3f7fc; /* soft sky for "soft" sections (alias kept) */
--bg-cream: #f8fafd; /* very faint sky for "cream" sections (alias kept) */
--bg-sky: #e7eef9; /* slightly deeper sky for hero gradient bottom */
--surface: #ffffff;
--surface-2: #f8fafd;
--ink: #0a1530;
--ink-soft: #1c2a4f;
--muted: #5a6781;
--muted-soft: #8892a8;
--line: #d9e1ee; /* sky-tinted dividers */
--line-soft: #eaf0f8;
--primary: #0a1f4d; /* ANA-style deep navy */
--primary-alt: #14387f;
--primary-deep:#061640;
--accent: #c8102e; /* JAL crane red */
--accent-soft: #e21834;
--accent-deep: #8a0b22;
--gold: #bfa46f; /* champagne gold (ANA Mileage Club tone) */
--gold-soft: #d8c294;
--success: #1f8f5a;
--shadow-sm: 0 2px 8px rgba(10, 31, 77, 0.06);
--shadow-md: 0 24px 60px -24px rgba(10, 31, 77, 0.22);
--shadow-lg: 0 40px 80px -32px rgba(10, 31, 77, 0.28);
--shadow-xl: 0 60px 120px -40px rgba(6, 22, 64, 0.45);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* iOS Safari ignores overflow-x:hidden on body alone, so pin it on
too. This also prevents the small sideways scroll that showed
up from absolute-positioned decorative elements. */
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
font-family: "Inter", "Segoe UI", -apple-system, sans-serif;
font-weight: 400;
color: var(--ink);
background: var(--bg);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
em {
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-style: italic;
font-weight: 500;
}
.container { width: min(1240px, 92vw); margin: 0 auto; }
.container-narrow { width: min(860px, 92vw); margin: 0 auto; }
/* ====================== decorative ambient background ================== */
.page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.45; animation: drift 22s ease-in-out infinite alternate; }
.orb-red { width: 520px; height: 520px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(200, 16, 46, 0.22), rgba(200, 16, 46, 0)); }
.orb-blue { width: 700px; height: 700px; top: 32%; left: -240px; background: radial-gradient(circle, rgba(10, 31, 77, 0.22), rgba(10, 31, 77, 0)); animation-duration: 28s; }
.orb-gold { width: 480px; height: 480px; bottom: -200px; right: 18%; background: radial-gradient(circle, rgba(191, 164, 111, 0.22), rgba(191, 164, 111, 0)); animation-duration: 32s; }
.grid-lines {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(10, 31, 77, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 31, 77, 0.05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 60px) scale(1.1); } }
/* ============================== header ================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid rgba(217, 225, 238, 0.7);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: -0.01em; }
.brand-logo { display: block; height: 48px; width: auto; max-width: 220px; object-fit: contain; }
@media (min-width: 781px) { .brand-logo { height: 54px; max-width: 260px; } }
/* fallback text-mark used only when no logo image is available */
.brand-mark {
position: relative; width: 40px; height: 40px;
display: grid; place-content: center; border-radius: 12px;
background: var(--primary); color: #fff;
font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
font-size: 1.35rem; line-height: 1; overflow: hidden;
}
.brand-mark::after {
content: ""; position: absolute; bottom: 5px; left: 5px;
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 10px rgba(200, 16, 46, 0.6);
}
.brand-text { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1; }
.brand-name { font-size: 1.55rem; color: var(--ink); letter-spacing: 0.02em; }
.brand-tag {
font-family: "Inter", sans-serif; font-size: 0.62rem; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.menu {
display: flex; align-items: center; gap: 2rem;
font-size: 0.88rem; font-weight: 500; color: var(--ink-soft);
list-style: none; margin: 0; padding: 0;
}
.menu li { list-style: none; }
.menu a { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; transition: color 0.3s var(--ease); }
.menu-num { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.78rem; color: var(--accent); letter-spacing: 0.05em; }
.menu li a:not(.button)::after,
.menu a:not(.button)::after {
content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px;
background: var(--primary); transform: scaleX(0); transform-origin: right;
transition: transform 0.4s var(--ease);
}
.menu li.current-menu-item a:not(.button)::after,
.menu li.current_page_item a:not(.button)::after,
.menu li a:not(.button):hover::after,
.menu a:not(.button):hover::after,
.menu a.is-current::after { transform: scaleX(1); transform-origin: left; }
.menu li.current-menu-item > a, .menu li.current_page_item > a, .menu a.is-current { color: var(--primary); }
.lang-switch {
display: inline-flex; gap: 0.3rem; padding: 0.35rem 0.55rem;
border: 1px solid var(--line); border-radius: 999px;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
background: rgba(255, 255, 255, 0.7);
}
.lang-switch .is-active { color: var(--primary); }
/* ========================== hamburger menu ============================= */
.burger {
display: none; position: relative; width: 42px; height: 42px;
background: transparent; border: 1px solid var(--line); border-radius: 12px;
cursor: pointer;
transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
/* Kill the legacy 300ms tap delay on iOS Safari and suppress the native
grey tap highlight so the button feels instant. touch-action keeps the
browser from reserving any time waiting to see if this is a double-tap
zoom gesture. */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.burger:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--primary); }
.burger span {
position: absolute; left: 10px; right: 10px; height: 1.5px;
background: var(--primary); border-radius: 2px;
transition: transform 0.18s var(--ease), top 0.18s var(--ease), opacity 0.12s var(--ease);
}
/* On phones, skip the span transition entirely — iOS Safari's compositor
queue can stretch even a 180ms transition into ~1s when other layers
are visible. Instant state change dodges the queue altogether. */
@media (max-width: 780px) {
.burger span { transition: none !important; }
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }
.is-menu-open .burger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.is-menu-open .burger span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
/* When the menu is open, keep the sticky header visually the same but drop
the expensive blur backdrop. Continuously re-rasterising a full-width
backdrop-filter on top of the animating menu panel is what was making
the X laggy on iPhone Safari. */
.is-menu-open .site-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.96);
}
/* Guarantee the burger always sits above the mobile panel so the X is
tappable as soon as the class flips. */
.is-menu-open .burger {
position: relative;
z-index: 2;
}
/* The mobile drawer is hidden via `visibility` (plus a class) instead of
* an opacity transition. iOS Safari was painting a viewport-sized gradient
* fade-in on top of the hero / orbs while the X's own transform was also
* queued — those two composites kept blocking the tap response. Removing
* the transition makes the panel appear in a single frame, freeing the
* main thread immediately so the X responds the moment it's tapped.
*
* We also use a solid colour on mobile (cheaper first paint than a
* 100vh gradient) and only restore the gradient on tablet+.
*/
.mobile-menu {
position: fixed; inset: 0; top: 0; z-index: 90;
background: var(--primary-deep);
color: #e7eef9;
padding: 7rem 2rem 3rem;
visibility: hidden;
pointer-events: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.is-menu-open .mobile-menu {
visibility: visible;
pointer-events: auto;
}
@media (min-width: 781px) {
/* Keep the richer gradient on tablets/desktop where the compositor
isn't a bottleneck. */
.mobile-menu { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%); }
}
/* Lock the page behind the menu so the browser stops repainting the hero
(airplane loop, orbs, etc.) while the panel is open. This is the biggest
contributor to the "the X freezes for a second" feeling on mobile.
JS adds .is-menu-open to so iOS Safari (which ignores overflow
hidden on body alone) also freezes. */
html.is-menu-open,
body.is-menu-open {
overflow: hidden;
touch-action: none;
}
/* Stop the animated hero while the menu is open. */
.is-menu-open .hero::after,
.is-menu-open .hero-pass-plane { animation: none !important; }
.mobile-menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.mobile-menu-list li { list-style: none; }
.mobile-menu-list li a {
display: flex; align-items: baseline; gap: 1rem;
padding: 1rem 0.5rem; border-bottom: 1px solid rgba(231, 238, 249, 0.12);
font-family: "Cormorant Garamond", serif; font-size: 2rem; letter-spacing: -0.01em;
color: #e7eef9;
}
.mobile-menu-list li a span,
.mobile-menu-list li a .menu-num {
font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.14em; color: var(--gold-soft);
}
.mobile-menu-list li a:hover { color: var(--gold-soft); }
.mobile-cta { margin-top: 2.5rem; display: grid; gap: 0.8rem; }
.mobile-cta .button { justify-content: center; }
/* ============================== buttons ================================ */
.button {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.55rem; padding: 0.9rem 1.4rem;
border-radius: 999px; border: 1px solid transparent;
background: var(--primary); color: #fff;
font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
cursor: pointer;
transition: transform 0.3s var(--ease), background 0.3s var(--ease),
box-shadow 0.3s var(--ease), opacity 0.3s var(--ease), color 0.3s var(--ease);
box-shadow: 0 10px 30px -12px rgba(10, 31, 77, 0.45);
white-space: nowrap;
text-decoration: none;
}
.button:hover { transform: translateY(-2px); background: var(--primary-alt); box-shadow: 0 18px 42px -14px rgba(10, 31, 77, 0.55); color: #fff; }
.button .arrow { transition: transform 0.3s var(--ease); }
.button:hover .arrow { transform: translateX(4px); }
.button-sm { padding: 0.55rem 1rem; font-size: 0.84rem; }
.button-lg { padding: 1.05rem 1.7rem; font-size: 0.98rem; }
.button-outline { background: transparent; border-color: var(--primary); color: var(--primary); box-shadow: none; }
.button-outline:hover { background: var(--primary); color: #fff; }
.button-accent { background: var(--accent); box-shadow: 0 10px 30px -12px rgba(200, 16, 46, 0.55); }
.button-accent:hover { background: var(--accent-soft); box-shadow: 0 18px 42px -14px rgba(200, 16, 46, 0.55); }
.button-ghost { background: transparent; border-color: var(--primary); color: var(--primary); box-shadow: none; }
.button-ghost:hover { background: var(--primary); color: #fff; }
.button-ghost-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; box-shadow: none; }
.button-ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.link-arrow {
display: inline-flex; align-items: center; gap: 0.5rem;
font-weight: 600; font-size: 0.95rem; color: var(--primary);
border-bottom: 1px solid currentColor; padding-bottom: 3px;
transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.link-arrow:hover { gap: 0.75rem; color: var(--accent); }
.link-arrow .arrow { transition: transform 0.3s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
/* ============================== hero =================================== */
.hero {
position: relative;
padding: 3rem 0 2rem;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, var(--bg-sky) 100%);
}
/* Faint dotted "flight route" between Tokyo and Europe drawn as an SVG bg.
This is the key visual cue that JEPRA bridges two continents. */
.hero::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
z-index: 1;
}
/* Animated little plane that follows the route arc (left → up → right). */
.hero::after {
content: "✈";
position: absolute;
top: 22%; left: 4%;
font-size: 22px; line-height: 1;
color: var(--accent);
filter: drop-shadow(0 4px 10px rgba(200, 16, 46, 0.45));
pointer-events: none;
z-index: 1;
animation: jepra-fly 18s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes jepra-fly {
0% { transform: translate(0vw, 18vh) rotate(-30deg) scale(0.55); opacity: 0; }
8% { opacity: 1; }
25% { transform: translate(20vw, 4vh) rotate(-12deg) scale(1); }
50% { transform: translate(45vw, -8vh) rotate( 0deg) scale(1.05); }
75% { transform: translate(70vw, 2vh) rotate( 15deg) scale(1); }
92% { opacity: 1; }
100% { transform: translate(86vw, 22vh) rotate( 32deg) scale(0.55); opacity: 0; }
}
/* ---------------------------------------------------------------------
* Mobile: drop ALL continuous hero-area animations so iOS Safari's
* compositor isn't fighting a 120px-blur orb drift + arcing airplane +
* boarding pass float when the user taps the menu. The airplane is kept
* as a still decorative accent in the top-right corner so the page still
* feels branded.
* ------------------------------------------------------------------- */
@media (max-width: 780px) {
/* Kill the animated page-background orbs and soften the 120px blur so
iOS Safari can cache it as a single static layer instead of churning
GPU every frame while anything else moves on the page. */
.page-bg .orb {
animation: none !important;
filter: blur(70px);
opacity: 0.35;
}
/* Marquee track runs an infinite translate on the x-axis — it's the
other big continuous compositor job. Stop it on phones. */
.marquee-track { animation: none !important; }
/* Kill the boarding-pass internals (the hero-pass card is already
hidden on mobile, but belt-and-braces). */
.hero-pass-plane,
.hero-pass { animation: none !important; }
/* Replace the arcing ✈ with a still icon pinned to the top-right of
the hero, just below the burger button. No keyframes on mobile. */
.hero::after {
animation: none !important;
top: 24px;
left: auto;
right: 20px;
font-size: 22px;
opacity: 0.9;
transform: rotate(-18deg);
filter: drop-shadow(0 3px 8px rgba(200, 16, 46, 0.35));
}
}
/* Respect the user's reduced-motion preference on every viewport. */
@media (prefers-reduced-motion: reduce) {
.hero::after,
.page-bg .orb,
.hero-pass-plane,
.marquee-track { animation: none !important; }
}
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 3rem 0 4rem; }
.hero-tag {
display: inline-flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.95rem; background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--line); border-radius: 999px;
font-size: 0.82rem; font-weight: 500; color: var(--ink-soft);
width: fit-content; backdrop-filter: blur(8px);
box-shadow: var(--shadow-sm);
}
.dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.18);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(200, 16, 46, 0); } }
.hero-title {
margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-weight: 400;
font-size: clamp(2.8rem, 8.5vw, 7.8rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--ink);
}
.hero-title .line { display: block; }
.hero-title em { font-style: italic; color: var(--primary); }
.hero-title .accent-word { position: relative; font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--accent); font-weight: 500; }
.hero-title .accent-word::after {
content: ""; position: absolute; left: -4px; right: -4px; bottom: 0.15em;
height: 6px; background: var(--gold-soft); z-index: -1; opacity: 0.7;
}
.hero-meta { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: end; margin-top: 1rem; }
.hero-sub { margin: 0; max-width: 52ch; font-size: 1.08rem; color: var(--muted); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; justify-content: flex-end; }
.hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
margin-top: 3rem; padding: 2rem 0 0;
border-top: 1px solid var(--line); background: var(--line);
}
.hero-stats > div { background: var(--surface); padding: 1.4rem 1.2rem 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.stat-num { font-family: "Cormorant Garamond", serif; font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1; color: var(--primary); font-weight: 500; }
.stat-label { font-size: 0.78rem; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.4; }
.hero-watermark {
position: absolute; bottom: -1.2rem; right: -2rem;
font-family: "Cormorant Garamond", serif; font-style: italic;
font-size: clamp(4rem, 14vw, 12rem); color: rgba(10, 31, 77, 0.05);
letter-spacing: -0.02em; pointer-events: none; white-space: nowrap; font-weight: 500;
z-index: 2;
}
/* ====================== hero boarding-pass card ======================== */
/* Floating "boarding pass" card on the top-right of the hero (desktop only).
Hidden on mobile so the headline has full breathing room. The plane
animation that flies across the screen still works on mobile. */
.hero-pass { display: none; }
@media (min-width: 1100px) {
.hero-pass {
display: block;
position: absolute;
top: 9rem;
right: max(4vw, 2.5rem);
z-index: 3;
width: 290px;
padding: 1.1rem 1.25rem 1.25rem;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 30px 60px -28px rgba(10, 31, 77, 0.25);
font-family: "Inter", sans-serif;
color: var(--ink);
transform: rotate(2.5deg);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
animation: pass-float 7s ease-in-out infinite alternate;
}
.hero-pass:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 40px 80px -28px rgba(10, 31, 77, 0.35); }
.hero-title { max-width: 78%; }
}
@keyframes pass-float {
from { transform: rotate(2.5deg) translateY(0); }
to { transform: rotate(2.5deg) translateY(-8px); }
}
.hero-pass::before,
.hero-pass::after {
content: ""; position: absolute; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; border-radius: 50%;
background: var(--bg-sky);
border: 1px solid var(--line);
}
.hero-pass::before { left: -8px; }
.hero-pass::after { right: -8px; }
.hero-pass-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 0.85rem; margin-bottom: 0.95rem;
border-bottom: 1px dashed var(--line);
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase;
}
.hero-pass-brand { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--primary); }
.hero-pass-brand .jepra-icon { color: var(--accent); }
.hero-pass-id { color: var(--muted); }
.hero-pass-route {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 0.5rem; margin-bottom: 1rem;
}
.hero-pass-city { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1; }
.hero-pass-city:last-child { text-align: right; }
.hero-pass-code {
font-family: "Cormorant Garamond", serif; font-weight: 500;
font-size: 1.85rem; color: var(--primary); letter-spacing: -0.01em;
}
.hero-pass-city:last-child .hero-pass-code { color: var(--accent); }
.hero-pass-name {
font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted); margin-top: 0.3rem;
}
.hero-pass-arc {
position: relative; height: 28px; min-width: 60px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%; background-repeat: no-repeat;
}
.hero-pass-plane {
position: absolute; top: 0; left: -10px; color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
animation: pass-plane 5s linear infinite;
}
@keyframes pass-plane {
0% { left: -10px; top: 14px; transform: rotate(-25deg); opacity: 0; }
10% { opacity: 1; }
50% { left: 50%; top: -4px; transform: translateX(-50%) rotate(0deg); }
90% { opacity: 1; }
100% { left: calc(100% - 8px); top: 14px; transform: rotate(25deg); opacity: 0; }
}
.hero-pass-meta {
margin: 0; padding-top: 0.85rem;
border-top: 1px dashed var(--line);
display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
}
.hero-pass-meta > div { display: flex; flex-direction: column; gap: 0.25rem; }
.hero-pass-meta dt {
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted);
}
.hero-pass-meta dd {
margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink);
display: inline-flex; align-items: center; gap: 0.4rem;
}
.hero-pass-meta .dot { width: 6px; height: 6px; }
/* ===================== section heading + side image ==================== */
/* Wraps a section-head and a small section-figure side-by-side on desktop,
stacked on mobile. The image is intentionally small — it accents the
heading rather than dominating it. */
.section-intro {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
align-items: center;
}
@media (min-width: 900px) {
.section-intro {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 3.5rem;
align-items: center;
}
.section-intro .section-head { margin-bottom: 0; }
}
/* ===================== generic section figure ========================== */
/* One image per section. Compact "side" variant designed to sit beside
the heading. Stays small on mobile so it doesn't take over the screen. */
.section-figure {
display: block;
margin: 0;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-warm);
box-shadow: 0 24px 48px -28px rgba(10, 31, 77, 0.18);
position: relative;
}
.section-figure > img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.9s var(--ease);
}
.section-figure:hover > img { transform: scale(1.03); }
.section-figure.is-placeholder > img { object-fit: contain; padding: 6% 8%; opacity: 0.85; }
.section-figure figcaption {
padding: 0.7rem 1.1rem;
font-size: 0.74rem; color: var(--muted);
letter-spacing: 0.08em; text-transform: uppercase;
border-top: 1px solid var(--line-soft);
background: #fff;
}
/* Side variant — used by every front-page section image */
.section-figure-side {
max-width: 480px;
margin: 0 auto;
}
.section-figure-side > img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
.section-figure-side {
max-width: none;
margin: 0;
}
.section-figure-side > img { aspect-ratio: 4 / 3; }
}
/* Dark-section variant (Services) */
.section-figure-dark {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.55);
}
.section-figure-dark.is-placeholder { background: rgba(255, 255, 255, 0.05); }
/* About-side image — taller & narrower to fit beside the commitments card */
.about-side { display: flex; flex-direction: column; gap: 1.4rem; }
.about-figure { margin: 0; }
.about-figure > img { aspect-ratio: 4 / 3; }
/* CTA band gets an optional background image set inline by the shortcode. */
.cta-band.has-bg-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ====================== shared icon styling ============================ */
.jepra-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Bento icons appear in every "Why JEPRA" card. Refines the existing
.bento-icon container so the SVG sits cleanly inside it. */
.bento-icon { color: var(--primary); transition: transform 0.4s var(--ease), background 0.4s var(--ease); }
.bento-card:hover .bento-icon { transform: rotate(-6deg) scale(1.05); }
.accent-card .bento-icon, .dark-card .bento-icon { color: #fff; }
/* Service-card watermark icon (top-right corner of each big service card). */
.service-icon {
position: absolute; top: 1.6rem; right: 1.6rem; z-index: 1;
display: grid; place-content: center;
width: 56px; height: 56px; border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(231, 238, 249, 0.14);
color: var(--gold-soft);
transition: transform 0.5s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.service-card:hover .service-icon { transform: rotate(-8deg) scale(1.05); background: rgba(255, 255, 255, 0.14); border-color: var(--gold); }
.service-card-accent .service-icon { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
/* ============================ marquee ================================== */
.marquee {
background: linear-gradient(90deg, var(--primary-deep) 0%, var(--primary) 50%, var(--primary-deep) 100%);
color: #e7eef9;
padding: 1.1rem 0; overflow: hidden; position: relative;
border-top: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.marquee::before, .marquee::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--primary-deep), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--primary-deep), transparent); }
.marquee-track {
display: inline-flex; gap: 2rem; white-space: nowrap;
animation: marquee 40s linear infinite;
font-family: "Cormorant Garamond", serif; font-style: italic;
font-size: 1.3rem; letter-spacing: 0.01em;
}
.marquee-track span:nth-child(even) { color: var(--gold-soft); font-style: normal; font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.85rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ============================ sections ================================= */
.section { padding: 7rem 0; position: relative; }
.section-sm { padding: 5rem 0; }
.section-soft { background: var(--bg-warm); }
.section-cream { background: var(--bg-cream); }
.section-dark {
background: linear-gradient(165deg, var(--primary) 0%, var(--primary-deep) 100%);
color: #e7eef9; overflow: hidden; position: relative;
}
.section-dark::before {
content: ""; position: absolute; top: -120px; right: -120px;
width: 520px; height: 520px; border-radius: 50%;
background: radial-gradient(circle, rgba(191, 164, 111, 0.2), transparent 60%); pointer-events: none;
}
.section-dark::after {
content: ""; position: absolute; bottom: -160px; left: -100px;
width: 480px; height: 480px; border-radius: 50%;
background: radial-gradient(circle, rgba(200, 16, 46, 0.16), transparent 60%); pointer-events: none;
}
.section-head { max-width: 760px; margin-bottom: 4rem; position: relative; z-index: 2; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
display: inline-flex; align-items: center; gap: 0.65rem;
font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
color: var(--muted); margin-bottom: 1.25rem;
}
.kicker-num { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1rem; color: var(--accent); letter-spacing: 0; text-transform: none; }
.section-head.light .kicker { color: var(--gold-soft); }
.section-head.light .kicker-num { color: var(--gold); }
.section-head h2 {
margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-weight: 400;
font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em;
}
.section-head em { color: var(--accent); }
.section-head.light em { color: var(--gold-soft); }
.section-lead { margin: 1.2rem 0 0; max-width: 56ch; color: var(--muted); font-size: 1.05rem; }
.section-head.centered .section-lead { margin-left: auto; margin-right: auto; }
/* ============================ page header ============================== */
.page-header {
position: relative; padding: 6rem 0 4rem;
background: linear-gradient(180deg, #ffffff 0%, var(--bg-sky) 100%);
border-bottom: 1px solid var(--line); overflow: hidden;
}
.page-header::before {
content: ""; position: absolute; top: -200px; right: -120px;
width: 600px; height: 600px; border-radius: 50%;
background: radial-gradient(circle, rgba(191, 164, 111, 0.22), transparent 60%); pointer-events: none;
}
.page-header::after {
content: ""; position: absolute; bottom: -150px; left: -100px;
width: 460px; height: 460px; border-radius: 50%;
background: radial-gradient(circle, rgba(10, 31, 77, 0.14), transparent 60%); pointer-events: none;
}
.page-header-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: end; }
.breadcrumb {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem;
}
.breadcrumb a { color: inherit; transition: color 0.3s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span.sep { opacity: 0.5; }
.page-title { margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 5.2rem); line-height: 1; letter-spacing: -0.015em; }
.page-title em { color: var(--accent); }
.page-intro { margin-top: 1.6rem; font-size: 1.1rem; color: var(--ink-soft); line-height: 1.65; max-width: 56ch; }
.page-header-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; padding-bottom: 0.5rem; }
.page-header-chip {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 1rem; background: rgba(255, 255, 255, 0.75);
border: 1px solid var(--line); border-radius: 999px;
font-size: 0.82rem; color: var(--ink-soft); backdrop-filter: blur(8px);
}
.page-header-search {
display: inline-flex; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem;
background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); border-radius: 999px;
align-items: center; min-width: 260px;
}
.page-header-search input {
flex: 1; background: transparent; border: none; padding: 0.5rem 0.2rem;
font-size: 0.92rem; color: var(--ink); box-shadow: none;
}
.page-header-search input:focus { outline: none; }
.page-header-search .button { padding: 0.55rem 1rem; font-size: 0.84rem; }
/* ============================ bento grid =============================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 1rem; }
.bento-card {
position: relative; padding: 1.75rem 1.55rem 1.55rem;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
overflow: hidden;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.bento-lg { grid-column: span 2; }
.bento-icon { display: grid; place-content: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 1.2rem; background: var(--bg-sky); color: var(--primary); }
.bento-icon svg { width: 22px; height: 22px; }
.bento-index { display: inline-block; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.1rem; color: var(--accent); margin-bottom: 1.6rem; letter-spacing: 0.05em; }
.bento-card h3 { margin: 0 0 0.7rem; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.bento-card p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.65; }
.bento-card.accent-card { background: linear-gradient(155deg, var(--accent) 0%, var(--accent-soft) 100%); color: #fff; border-color: transparent; }
.accent-card .bento-index, .accent-card h3, .accent-card p { color: #fff; }
.accent-card .bento-index { color: rgba(255, 255, 255, 0.78); }
.accent-card p { color: rgba(255, 255, 255, 0.9); }
.accent-card .bento-icon { background: rgba(255,255,255,0.18); color: #fff; }
.bento-card.dark-card { background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%); color: #e7eef9; border-color: transparent; }
.dark-card .bento-index { color: var(--gold-soft); }
.dark-card h3 { color: #fff; }
.dark-card p { color: rgba(231, 238, 249, 0.82); }
.dark-card .bento-icon { background: rgba(255,255,255,0.1); color: var(--gold-soft); }
/* ===================== service intro (featured banner) ================ */
/* Large introductory banner shown between the hero and the "Why JEPRA"
strengths grid. Declares the headline service before visitors meet the
eight strength rows. Uses the ivory/gold base tones with a thin accent
rail so it feels editorial rather than like a promo block. */
.section-service-intro {
position: relative;
padding-top: clamp(4rem, 8vw, 6.5rem);
padding-bottom: clamp(4rem, 8vw, 6.5rem);
background:
radial-gradient(circle at 85% 0%, rgba(191, 164, 111, 0.10), transparent 55%),
radial-gradient(circle at 10% 100%, rgba(28, 56, 106, 0.08), transparent 55%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-cream) 100%);
overflow: hidden;
}
.section-service-intro::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.10) 35%, rgba(15, 23, 42, 0.10) 65%, transparent 100%);
}
.service-intro-watermark {
position: absolute;
right: -0.04em;
top: 50%;
transform: translateY(-50%);
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-style: italic;
font-size: clamp(7rem, 18vw, 16rem);
line-height: 1;
color: rgba(15, 23, 42, 0.035);
letter-spacing: -0.02em;
user-select: none;
pointer-events: none;
z-index: 0;
}
.service-intro {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
.service-intro.service-intro-single {
grid-template-columns: 1fr;
max-width: 72rem;
margin: 0 auto;
text-align: center;
}
.service-intro.service-intro-single .service-intro-copy { max-width: 56rem; margin: 0 auto; }
.service-intro.service-intro-single .service-intro-lead { margin-left: auto; margin-right: auto; }
.service-intro.service-intro-single .service-intro-actions { justify-content: center; }
.service-intro.service-intro-single .kicker { justify-content: center; }
.service-intro.service-intro-single .service-intro-card { text-align: left; }
@media (min-width: 960px) {
.service-intro:not(.service-intro-single) {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(3rem, 5vw, 5rem);
}
}
.service-intro-copy .kicker { margin-bottom: 1.2rem; }
.service-intro-title {
margin: 0 0 1rem;
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--ink);
}
.service-intro-title em {
font-style: italic;
color: var(--accent);
}
.service-intro-lead {
margin: 0 0 1.8rem;
font-size: clamp(1rem, 1.25vw, 1.1rem);
line-height: 1.75;
color: var(--muted);
max-width: 40em;
}
/* ---------------------------------------------------------------------
* Compact A / B service cards inside the "Our Service" intro.
* Always a 2-column grid (including phones) so both services are visible
* side-by-side above the fold and the text density stays low.
* ------------------------------------------------------------------- */
.service-intro-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
margin: 0 0 2rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
}
.service-intro-cards.service-intro-cards-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
.service-intro-cards.service-intro-cards-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
}
@media (max-width: 420px) {
.service-intro-cards.service-intro-cards-3 {
grid-template-columns: 1fr;
}
}
.service-intro-card {
position: relative;
display: grid;
grid-template-rows: auto auto auto 1fr auto;
gap: 0.4rem;
padding: 1.1rem 1.1rem 1rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
color: inherit;
text-decoration: none;
transition:
transform 0.3s var(--ease),
border-color 0.3s var(--ease),
box-shadow 0.3s var(--ease),
background 0.3s var(--ease);
overflow: hidden;
}
.service-intro-card::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent);
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.service-intro-card:hover {
transform: translateY(-3px);
border-color: var(--primary);
box-shadow: 0 18px 30px -24px rgba(15, 23, 42, 0.3);
background: #fff;
}
.service-intro-card:hover::before { opacity: 1; }
.service-intro-card.is-b::before { background: var(--primary); }
.service-intro-card.is-c::before { background: var(--gold, #c39b3d); }
.service-intro-card-tag {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 0.95rem;
color: var(--accent);
letter-spacing: 0.05em;
}
.service-intro-card.is-b .service-intro-card-tag { color: var(--primary); }
.service-intro-card.is-c .service-intro-card-tag { color: var(--gold, #c39b3d); }
.service-intro-card-icon {
display: grid;
place-content: center;
width: 36px; height: 36px;
border-radius: 10px;
background: var(--bg-sky);
color: var(--primary);
}
.service-intro-card-icon svg { width: 18px; height: 18px; }
.service-intro-card.is-b .service-intro-card-icon {
background: rgba(200, 16, 46, 0.08);
color: var(--accent);
}
.service-intro-card.is-c .service-intro-card-icon {
background: rgba(195, 155, 61, 0.12);
color: var(--gold, #c39b3d);
}
.service-intro-card-name {
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.2;
color: var(--ink);
letter-spacing: -0.005em;
}
.service-intro-card-desc {
font-size: 0.84rem;
line-height: 1.55;
color: var(--muted);
}
.service-intro-card-arrow {
justify-self: end;
align-self: end;
margin-top: 0.4rem;
font-size: 1rem;
color: var(--accent);
transition: transform 0.3s var(--ease);
}
.service-intro-card:hover .service-intro-card-arrow { transform: translateX(3px); }
@media (max-width: 520px) {
.service-intro-cards { gap: 0.6rem; }
.service-intro-card {
padding: 0.9rem 0.85rem 0.85rem;
border-radius: 12px;
}
.service-intro-card-icon { width: 32px; height: 32px; border-radius: 8px; }
.service-intro-card-icon svg { width: 16px; height: 16px; }
.service-intro-card-tag { font-size: 0.82rem; }
.service-intro-card-name { font-size: 1rem; line-height: 1.22; }
.service-intro-card-desc { font-size: 0.76rem; line-height: 1.5; }
.service-intro-card-arrow { font-size: 0.9rem; }
}
.service-intro-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.4rem;
}
/* Figure panel */
.service-intro-figure {
position: relative;
margin: 0;
border-radius: 22px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.25);
aspect-ratio: 4 / 3;
}
.service-intro-figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s var(--ease);
}
.service-intro-figure:hover img { transform: scale(1.03); }
.service-intro-figure.is-placeholder img {
object-fit: contain;
padding: 18%;
background: linear-gradient(160deg, var(--bg-cream) 0%, var(--bg-sky) 100%);
opacity: 0.55;
}
.service-intro-figure-tag {
position: absolute;
left: 1.2rem;
bottom: 1.2rem;
display: inline-flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.7rem 1rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.service-intro-figure-tag strong {
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-style: italic;
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
}
@media (max-width: 780px) {
.section-service-intro { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.service-intro-figure { aspect-ratio: 5 / 4; }
.service-intro-figure-tag { left: 0.9rem; bottom: 0.9rem; padding: 0.55rem 0.8rem; }
.service-intro-actions { gap: 0.8rem 1.2rem; }
}
/* ===================== strengths · zig-zag rows ======================== */
/* Eight alternating image + text rows. On desktop every other row flips
horizontally so the reading rhythm stays fresh. On mobile every row
stacks text-on-top / image-below regardless of the desktop direction. */
.section-strengths .strengths-rows {
display: grid;
gap: clamp(3rem, 6vw, 5.5rem);
margin-top: 1rem;
}
.strength-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.6rem;
align-items: center;
}
@media (min-width: 900px) {
.strength-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 4.5vw, 4.5rem);
}
.strength-row.is-reverse .strength-copy { order: 2; }
.strength-row.is-reverse .strength-figure { order: 1; }
}
.strength-copy { max-width: 36em; }
.strength-index {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
margin-bottom: 0.9rem;
padding: 0.35rem 0.8rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
}
.strength-index-num {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 1.05rem;
color: var(--accent);
letter-spacing: 0.04em;
}
.strength-index-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
}
.strength-title {
margin: 0 0 0.9rem;
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
}
.strength-text {
margin: 0;
font-size: 1rem;
line-height: 1.75;
color: var(--muted);
}
.strength-figure {
position: relative;
margin: 0;
border-radius: 20px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 24px 50px -36px rgba(15, 23, 42, 0.22);
aspect-ratio: 5 / 4;
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.strength-figure:hover {
transform: translateY(-4px);
box-shadow: 0 32px 60px -36px rgba(15, 23, 42, 0.3);
}
.strength-figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s var(--ease);
}
.strength-figure:hover img { transform: scale(1.03); }
.strength-figure.is-placeholder img {
object-fit: contain;
padding: 18%;
background: linear-gradient(160deg, var(--bg-cream) 0%, var(--bg-sky) 100%);
opacity: 0.55;
}
/* ---- Mobile: compact 2-col × 4-row grid of strength cards ---------- */
/* On phones the single-column zig-zag gets very tall, so we switch to a
tighter 2 × 4 grid. Each card stacks vertically: pill + title + body
on top (per the original spec) and image on the bottom, regardless of
the desktop is-normal / is-reverse direction. */
@media (max-width: 780px) {
.section-strengths .strengths-rows {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.4rem 0.9rem;
}
.strength-row {
grid-template-columns: 1fr;
gap: 0.85rem;
padding: 1rem 0.95rem 1.1rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.25);
}
/* Always text-on-top / image-below even on the reversed desktop rows. */
.strength-row.is-reverse .strength-copy,
.strength-row.is-normal .strength-copy { order: 1; }
.strength-row.is-reverse .strength-figure,
.strength-row.is-normal .strength-figure { order: 2; }
.strength-copy { max-width: none; }
.strength-index {
margin-bottom: 0.5rem;
padding: 0.2rem 0.55rem;
gap: 0.3rem;
background: transparent;
border-color: var(--line);
}
.strength-index-num { font-size: 0.9rem; }
.strength-index-label { font-size: 0.58rem; letter-spacing: 0.14em; }
.strength-title {
margin-bottom: 0.5rem;
font-size: 1.02rem;
line-height: 1.25;
}
.strength-text {
font-size: 0.82rem;
line-height: 1.6;
color: var(--muted);
}
.strength-figure {
aspect-ratio: 4 / 3;
border-radius: 12px;
box-shadow: none;
}
}
/* Narrower phones: tighten the gap so the two cards still fit comfortably. */
@media (max-width: 380px) {
.section-strengths .strengths-rows { gap: 1.1rem 0.7rem; }
.strength-row { padding: 0.85rem 0.75rem 0.95rem; }
.strength-title { font-size: 0.95rem; }
}
/* ============================ services ================================= */
.service-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-bottom: 2rem; }
.service-layout.service-layout-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
/* Single-card variant — center one wide card on the stage. */
.service-layout.is-solo {
grid-template-columns: minmax(0, 1fr);
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.service-card-solo { padding: clamp(2.4rem, 4vw, 3.2rem) clamp(2rem, 3vw, 2.8rem); }
.service-card {
position: relative; padding: 2.6rem 2.2rem; border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(231, 238, 249, 0.16);
transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
overflow: hidden; display: flex; flex-direction: column;
}
.service-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(191, 164, 111, 0.18), transparent 55%); pointer-events: none; }
.service-card:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255, 255, 255, 0.08); }
.service-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.service-tag { display: grid; place-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.5rem; flex-shrink: 0; }
.service-card-accent .service-tag { background: var(--accent); border-color: var(--accent); color: #fff; }
.service-card-dark .service-tag { background: var(--primary); border-color: var(--primary); color: #fff; }
.service-card h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: #fff; letter-spacing: -0.005em; line-height: 1.15; }
.service-layout-3 .service-card h3 { font-size: clamp(1.35rem, 1.8vw, 1.65rem); }
.service-lead { margin: 0 0 1.6rem; color: rgba(231, 238, 249, 0.82); font-size: 0.98rem; line-height: 1.7; }
.service-list { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 0.3rem; }
.service-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(231, 238, 249, 0.12); }
.service-list li:last-child { border-bottom: none; }
.list-label { font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(231, 238, 249, 0.6); max-width: 48%; }
.list-value { font-family: "Cormorant Garamond", serif; font-size: 1.05rem; color: #fff; text-align: right; line-height: 1.25; }
.list-value .service-num {
font-family: "Cormorant Garamond", serif;
font-style: normal;
font-weight: 500;
font-size: 1.9em;
line-height: 1;
color: var(--gold, #c39b3d);
letter-spacing: -0.01em;
margin-right: 0.15em;
vertical-align: baseline;
}
.list-value small {
display: block;
font-family: "Inter", sans-serif;
font-size: 0.72rem;
color: rgba(231, 238, 249, 0.55);
letter-spacing: 0.02em;
margin-top: 0.15rem;
}
.service-card-accent .list-value .service-num { color: #ffd27a; }
.service-card-dark .list-value .service-num { color: #ffe2aa; }
.service-card .button { margin-top: auto; align-self: flex-start; }
.currency-note { margin: 0; text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.1rem; color: var(--gold-soft); }
/* Services 3-col: tighten padding a touch */
.service-layout-3 .service-card { padding: 2rem 1.6rem; }
.service-layout-3 .service-tag { width: 44px; height: 44px; font-size: 1.25rem; }
/* =========================== 7-step chart ============================== */
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; position: relative; }
.step {
position: relative; padding: 1.6rem 1.2rem 1.3rem;
background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.step-num { display: inline-flex; align-items: baseline; gap: 0.35rem; font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--accent); font-size: 0.95rem; margin-bottom: 0.8rem; letter-spacing: 0.03em; }
.step-num strong { font-size: 2.4rem; line-height: 1; font-weight: 500; color: var(--primary); font-style: normal; }
.step h4 { margin: 0 0 0.55rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
.step p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
.step-arrow {
position: absolute; right: -0.85rem; top: 50%; transform: translateY(-50%); z-index: 2;
width: 26px; height: 26px; display: grid; place-content: center;
background: var(--primary); color: #fff; border-radius: 50%; font-size: 0.72rem; font-weight: 700;
}
.step:last-child .step-arrow { display: none; }
.step-callout {
margin-top: 2.2rem; padding: 1.5rem 1.8rem;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
color: #fff; border-radius: var(--radius-md);
display: flex; gap: 1.2rem; align-items: flex-start; box-shadow: var(--shadow-md);
}
.step-callout .icon { display: grid; place-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; }
.step-callout strong { display: block; margin-bottom: 0.3rem; font-size: 1.05rem; }
.step-callout p { margin: 0; font-size: 0.95rem; line-height: 1.6; opacity: 0.95; }
/* Icon badge above the step number. Gives each step a visual identity so
the 7-step workflow reads at a glance, without making the cards taller. */
.step-icon {
display: grid; place-content: center;
width: 44px; height: 44px; border-radius: 12px;
margin-bottom: 0.9rem;
background: linear-gradient(135deg, rgba(10, 31, 77, 0.08), rgba(200, 16, 46, 0.08));
color: var(--primary);
border: 1px solid var(--line-soft);
transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.step-icon svg { width: 22px; height: 22px; display: block; }
.step:hover .step-icon {
transform: translateY(-2px);
background: linear-gradient(135deg, var(--primary), var(--primary-alt));
border-color: transparent;
color: #fff;
}
/* ============================== pricing table ========================== */
.price-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.price-table caption { caption-side: top; text-align: left; padding: 0 0 1rem; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.1rem; color: var(--muted); }
.price-table th, .price-table td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.price-table thead th { background: var(--bg-warm); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: none; }
.price-table tr.total-row { background: var(--primary); color: #e7eef9; }
.price-table tr.total-row th, .price-table tr.total-row td { background: var(--primary); color: #fff; font-family: "Cormorant Garamond", serif; font-size: 1.1rem; }
.price-table .val-accent { color: var(--accent); font-weight: 600; }
/* ========================= pricing side-card =========================== */
/* Used on the Procurement page to pair the invoice-example table with a
narrative summary. The summary sits on the left (or above on mobile) and
restates the three cost buckets with coloured dots, so visitors get the
shape of the invoice even before reading the numbers. */
.price-wrap {
display: grid;
grid-template-columns: 0.9fr 1.3fr;
gap: 2rem;
align-items: start;
}
.price-meta {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 20px;
padding: 1.75rem 1.6rem;
box-shadow: 0 18px 40px -28px rgba(10, 31, 77, 0.2);
}
.price-meta-icon {
display: grid; place-content: center;
width: 48px; height: 48px; border-radius: 14px;
margin-bottom: 1.1rem;
background: linear-gradient(135deg, var(--primary), var(--primary-alt));
color: #fff;
}
.price-meta-icon svg { width: 24px; height: 24px; display: block; }
.price-meta h3 {
margin: 0 0 1rem;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 500;
font-size: 1.45rem; line-height: 1.25;
color: var(--primary);
}
.price-meta-list {
list-style: none; padding: 0; margin: 0 0 1.25rem;
display: flex; flex-direction: column; gap: 0.55rem;
font-size: 0.92rem; color: var(--ink-soft);
}
.price-meta-list li { display: flex; align-items: center; gap: 0.6rem; }
.price-meta-list .dot {
width: 9px; height: 9px; border-radius: 50%;
box-shadow: none; animation: none;
flex-shrink: 0;
}
.price-meta-list .dot-navy { background: var(--primary); }
.price-meta-list .dot-gold { background: var(--gold); }
.price-meta-list .dot-red { background: var(--accent); }
.price-meta-foot {
margin: 0; padding-top: 1rem;
border-top: 1px dashed var(--line);
font-size: 0.84rem; color: var(--muted); line-height: 1.6;
}
@media (max-width: 900px) {
.price-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* ========================= zig-zag alt-feature ========================= */
/* Alternating text/image rows used on the Procurement page for "Honest
limits & commitments". Desktop: 1st row text left / image right, 2nd
row flipped, etc. Mobile: every row becomes text-on-top / image-below. */
.alt-feature {
display: flex;
flex-direction: column;
gap: 4.5rem;
margin-top: 1rem;
}
.alt-feature-row {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3.5rem;
align-items: center;
}
.alt-feature-row.is-reversed .alt-feature-copy { order: 2; }
.alt-feature-row.is-reversed .alt-feature-media { order: 1; }
.alt-feature-kicker {
display: inline-flex;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 0.9rem;
letter-spacing: 0.06em;
color: var(--accent);
margin-bottom: 0.75rem;
}
.alt-feature-copy h3 {
margin: 0 0 1rem;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 500;
font-size: clamp(1.7rem, 2.8vw, 2.2rem);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--primary);
}
.alt-feature-copy p {
margin: 0 0 1.25rem;
color: var(--muted);
line-height: 1.75;
}
.alt-feature-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0.55rem;
font-size: 0.95rem; color: var(--ink-soft);
}
.alt-feature-list li {
position: relative; padding-left: 1.6rem;
}
.alt-feature-list li::before {
content: "";
position: absolute; left: 0; top: 0.6em;
width: 14px; height: 2px;
background: var(--accent);
}
/* Image side — a simple rounded frame so uploaded photos or the bundled
placeholder.svg both look polished without any extra styling in the
editor. The subtle gradient tint on the frame ensures a plain grey
placeholder never looks flat next to the copy. */
.alt-feature-media {
margin: 0;
border-radius: 24px;
aspect-ratio: 5 / 4;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, var(--bg-warm), var(--bg-sky));
box-shadow: 0 30px 60px -30px rgba(10, 31, 77, 0.3);
}
.alt-feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s var(--ease-out);
}
.alt-feature-row:hover .alt-feature-media img { transform: scale(1.03); }
/* Mobile: stack text-on-top, image-on-bottom for every row. */
@media (max-width: 860px) {
.alt-feature { gap: 3rem; }
.alt-feature-row,
.alt-feature-row.is-reversed {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.alt-feature-row.is-reversed .alt-feature-copy { order: 1; }
.alt-feature-row.is-reversed .alt-feature-media { order: 2; }
.alt-feature-media { aspect-ratio: 16 / 10; }
}
/* ============================ pricing cards ============================ */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.price-card { padding: 2.2rem 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.featured { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%); color: #e7eef9; border-color: transparent; }
.price-card .price-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.price-card.featured .price-label { color: var(--gold-soft); }
.price-card .price-amount { margin: 0.6rem 0 0.3rem; font-family: "Cormorant Garamond", serif; font-size: 3.2rem; line-height: 1; color: var(--primary); font-weight: 500; }
.price-card.featured .price-amount { color: #fff; }
.price-card .price-note { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.3rem; }
.price-card.featured .price-note { color: rgba(231, 238, 249, 0.72); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.6rem; }
.price-card li { display: flex; gap: 0.6rem; font-size: 0.93rem; line-height: 1.5; color: var(--ink-soft); }
.price-card.featured li { color: rgba(231, 238, 249, 0.86); }
.price-card li::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }
.price-card.featured li::before { color: var(--gold-soft); }
/* ============================== badges ================================= */
.guarantee-badge { position: relative; display: inline-flex; align-items: center; gap: 0.9rem; padding: 1rem 1.4rem 1rem 1rem; background: var(--surface); border: 1px solid var(--gold); border-radius: 999px; box-shadow: var(--shadow-sm); font-weight: 600; color: var(--ink); }
.guarantee-badge .seal { display: grid; place-content: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold)); color: var(--ink); font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.5rem; flex-shrink: 0; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15); }
.guarantee-badge small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* ============================ about ==================================== */
.about { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: start; }
.about-copy h2 { margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-weight: 400; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1; letter-spacing: -0.015em; }
.about-copy em { color: var(--accent); }
.about-copy .lead { margin-top: 2rem; font-size: 1.15rem; color: var(--ink-soft); line-height: 1.7; }
.about-copy p { color: var(--muted); line-height: 1.8; }
.jp-quote { margin-top: 2rem; padding: 1.4rem 1.6rem; border-left: 2px solid var(--accent); font-family: "Noto Serif JP", serif; font-style: italic; font-size: 1.05rem; color: var(--ink); background: rgba(231, 238, 249, 0.45); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.about-card { position: sticky; top: 110px; padding: 2.2rem 2rem; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%); color: #e7eef9; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.about-card::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(191, 164, 111, 0.32), transparent 70%); }
.about-card header { position: relative; margin-bottom: 1.8rem; }
.badge { display: inline-block; padding: 0.4rem 0.85rem; background: rgba(191, 164, 111, 0.18); color: var(--gold-soft); border: 1px solid rgba(191, 164, 111, 0.45); border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.about-card ul { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.about-card li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.97rem; line-height: 1.55; color: rgba(231, 238, 249, 0.92); }
.check { display: grid; place-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--primary-deep); font-size: 0.72rem; font-weight: 700; margin-top: 3px; }
/* ============================ timeline / flow ========================== */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.timeline li { position: relative; padding: 2rem 1.3rem 1.8rem; background: var(--bg-warm); transition: background 0.3s var(--ease); }
.timeline li:hover { background: var(--surface); }
.tl-num { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 2.2rem; color: var(--accent); margin-bottom: 1rem; line-height: 1; }
.timeline h3 { margin: 0 0 0.55rem; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.timeline p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
/* ============================ cases grid =============================== */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.case { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.case:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.case-link { color: inherit; display: contents; }
.case-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.case-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10, 31, 77, 0.32) 100%); z-index: 2; }
.case-media img, .case-media .case-visual { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.case:hover .case-media img, .case:hover .case-visual { transform: scale(1.05); }
.case-tag { position: absolute; top: 1rem; left: 1rem; z-index: 3; padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.96); color: var(--primary); border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.case-body { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; flex-grow: 1; }
.case-title { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.case-desc { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.6; flex-grow: 1; }
.case-meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: 0.82rem; color: var(--muted); }
.case-meta strong { color: var(--primary); font-family: "Cormorant Garamond", serif; font-size: 1rem; }
/* Fallback colour blocks for cases without a cover image. v-cream is kept
as a CPT meta option but is now rendered as a soft sky/silver tone. */
.case-visual { background: linear-gradient(135deg, #0a1f4d, #14387f); position: relative; }
.case-visual.v-red { background: linear-gradient(135deg, #c8102e, #8a0b22); }
.case-visual.v-gold { background: linear-gradient(135deg, #bfa46f, #8a6e2a); }
.case-visual.v-ink { background: linear-gradient(135deg, #1c2a4f, #061640); }
.case-visual.v-cream { background: linear-gradient(135deg, #e7eef9, #b3c4de); }
.case-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 50%), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.2), transparent 50%); }
.case-visual .case-label { position: absolute; inset: 0; display: grid; place-content: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 3rem; color: rgba(255,255,255,0.92); letter-spacing: -0.02em; text-align: center; z-index: 1; padding: 1rem; }
.case-visual.v-cream .case-label { color: var(--primary); }
/* ============================ contact ================================== */
.section-contact { background: linear-gradient(180deg, #ffffff 0%, var(--bg-sky) 100%); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
.contact-intro h2 { margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; }
.contact-intro em { color: var(--accent); }
.contact-intro > p { margin-top: 1.5rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 44ch; }
.contact-meta { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.contact-meta > div { background: var(--surface); padding: 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.meta-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.meta-value { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; color: var(--ink); }
/* native HTML form (only used on the static contact form fallback) */
.contact-form { display: grid; gap: 1.2rem; padding: 2.4rem 2.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.contact-form label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
input, select, textarea { width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: 400 1rem "Inter", sans-serif; letter-spacing: 0; text-transform: none; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(10, 31, 77, 0.1); }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
textarea { resize: vertical; min-height: 140px; }
fieldset { margin: 0; padding: 1.3rem 1.2rem 0.85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
fieldset legend { padding: 0 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.check-option { display: flex; flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.55rem 0; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; }
.check-option input[type="checkbox"], .check-option input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.contact-form .button { justify-self: start; }
.form-note { margin: 0; font-size: 0.82rem; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
/* ============================ Contact Form 7 styling =================== */
.contact-form-wrap {
padding: 2.4rem 2.2rem; background: var(--surface);
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.contact-form-wrap .wpcf7 form > p,
.contact-form-wrap .wpcf7 form .wpcf7-form-control-wrap { display: block; margin: 0; }
.contact-form-wrap .wpcf7 form > p {
margin-bottom: 1.2rem;
display: flex; flex-direction: column; gap: 0.5rem;
font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted);
}
.contact-form-wrap .wpcf7 .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form-wrap .wpcf7 .row-2 > p { margin-bottom: 0; }
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap input[type="url"],
.contact-form-wrap input[type="number"],
.contact-form-wrap textarea,
.contact-form-wrap select { width: 100%; }
.contact-form-wrap .wpcf7-radio,
.contact-form-wrap .wpcf7-checkbox {
display: flex; flex-direction: column; gap: 0.4rem;
padding: 1rem 1.1rem; border: 1px solid var(--line);
border-radius: 14px; background: var(--surface-2);
text-transform: none; letter-spacing: 0; font-weight: 500;
font-size: 0.92rem; color: var(--ink);
}
.contact-form-wrap .wpcf7-list-item { margin: 0; display: flex; align-items: center; gap: 0.55rem; }
.contact-form-wrap .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.contact-form-wrap .wpcf7-list-item input { width: auto; accent-color: var(--accent); }
.contact-form-wrap input[type="submit"] {
display: inline-flex; align-items: center; justify-content: center;
padding: 1.05rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
background: var(--accent); color: #fff;
font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
cursor: pointer; box-shadow: 0 10px 30px -12px rgba(200, 16, 46, 0.55);
transition: transform 0.3s var(--ease), background 0.3s var(--ease);
width: auto; text-transform: none;
}
.contact-form-wrap input[type="submit"]:hover { transform: translateY(-2px); background: var(--accent-soft); }
.contact-form-wrap .wpcf7-not-valid-tip { font-size: 0.78rem; color: var(--accent); letter-spacing: 0; text-transform: none; font-weight: 500; }
.contact-form-wrap .wpcf7-response-output { margin: 1rem 0 0 !important; border-radius: 12px; padding: 0.95rem 1rem !important; font-size: 0.92rem; text-transform: none; letter-spacing: 0; }
.contact-form-wrap .wpcf7-spinner { margin-left: 0.6rem; }
/* ============================ terms content ============================ */
.terms-grid { display: grid; grid-template-columns: 260px 1fr; gap: 4rem; align-items: start; }
.terms-nav { position: sticky; top: 110px; display: grid; gap: 0.4rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.terms-nav a { padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.88rem; color: var(--muted); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.terms-nav a:hover, .terms-nav a.is-active { background: var(--bg-sky); color: var(--primary); }
.terms-content h3 { margin: 2.5rem 0 1rem; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.8rem; color: var(--primary); scroll-margin-top: 100px; }
.terms-content h3:first-child { margin-top: 0; }
.terms-content p, .terms-content li { color: var(--ink-soft); line-height: 1.75; }
.terms-content ul, .terms-content ol { padding-left: 1.4rem; }
.terms-content li { margin-bottom: 0.5rem; }
.terms-content strong { color: var(--ink); }
/* payment icons */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.2rem 0 2rem; padding: 1.2rem 1.4rem; background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pay-row .pay-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-right: 0.5rem; }
.pay-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1rem; min-height: 42px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-family: "Inter", sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--ink); letter-spacing: 0.02em; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.pay-icon:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.pay-icon.paypal { color: #003087; }
.pay-icon.paypal i { color: #009cde; font-style: normal; }
.pay-icon.wise { color: #163300; background: #9fe870; border-color: #8bd45c; }
.pay-icon.payoneer { color: #ff4b34; }
/* ============================ CTA band ================================= */
.cta-band {
position: relative; padding: 5rem 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
color: #e7eef9; overflow: hidden;
}
.cta-band::before { content: ""; position: absolute; top: -200px; right: -150px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(191, 164, 111, 0.26), transparent 60%); }
.cta-band::after { content: ""; position: absolute; bottom: -160px; left: -120px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 16, 46, 0.22), transparent 60%); }
/* a thin animated route line across the CTA — echoes the hero arc */
.cta-band .container { position: relative; z-index: 2; }
.cta-band-route {
position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%; background-repeat: no-repeat;
}
.cta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.cta-inner h2 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; color: #fff; }
.cta-inner h2 em { color: var(--gold-soft); }
.cta-inner p { margin-top: 1rem; color: rgba(231, 238, 249, 0.78); line-height: 1.7; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-end; }
/* ============================ footer =================================== */
.site-footer { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 100%); color: rgba(231, 238, 249, 0.72); padding: 4rem 0 2rem; margin-top: 0; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--accent) 70%, transparent 100%); opacity: 0.55; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.8fr; gap: 2.5rem; align-items: start; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(231, 238, 249, 0.12); }
.footer-brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.footer-brand .brand-logo { filter: brightness(0) invert(1); opacity: 0.95; height: 44px; max-width: 220px; }
.footer-brand .brand-mark { background: var(--gold); color: var(--primary-deep); }
.footer-brand .brand-mark::after { background: var(--accent); }
.footer-brand .brand-name { color: #fff; font-size: 1.55rem; }
.footer-brand .brand-tag { color: rgba(231, 238, 249, 0.55); }
.footer-grid h4 { margin: 0 0 1.2rem; font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.footer-grid p { margin: 0; font-size: 0.95rem; color: rgba(231, 238, 249, 0.65); line-height: 1.65; }
.footer-links { display: grid; gap: 0.7rem; font-size: 0.92rem; list-style: none; padding: 0; margin: 0; }
.footer-links li { list-style: none; }
.footer-links a { color: rgba(231, 238, 249, 0.78); transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--gold-soft); }
.footer-pay { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.footer-pay .pay-icon { padding: 0.4rem 0.75rem; min-height: 34px; font-size: 0.8rem; }
.footer-bottom { position: relative; margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.82rem; color: rgba(231, 238, 249, 0.5); }
.footer-bottom a { transition: color 0.3s var(--ease); }
.footer-bottom a:hover { color: var(--gold-soft); }
/* ============================ search empty ============================= */
.search-empty { text-align: center; padding: 3rem 1rem; }
.search-empty h2 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 2rem; margin: 0 0 1rem; color: var(--primary); }
.search-empty p { color: var(--muted); margin: 0.5rem 0; }
.search-empty .button + .button { margin-left: 0.5rem; }
/* ============================ utility ================================== */
.stack-lg > * + * { margin-top: 2rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* ============================ responsive =============================== */
@media (max-width: 1100px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-lg { grid-column: span 2; }
.timeline { grid-template-columns: repeat(2, 1fr); }
.about { grid-template-columns: 1fr; }
.about-card { position: static; }
.contact-grid { grid-template-columns: 1fr; gap: 3rem; }
.hero-meta { grid-template-columns: 1fr; gap: 1.5rem; }
.hero-actions { justify-content: flex-start; }
.steps { grid-template-columns: repeat(4, 1fr); }
.step-arrow { display: none; }
.cases { grid-template-columns: repeat(2, 1fr); }
.page-header-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.page-header-side { align-items: flex-start; }
.cta-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.cta-actions { justify-content: flex-start; }
.terms-grid { grid-template-columns: 1fr; gap: 2rem; }
.terms-nav { position: static; display: flex; flex-wrap: wrap; }
.contact-form-wrap .wpcf7 .row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.section-intro { gap: 1.6rem; }
.section-intro .section-figure { max-width: 320px; margin-left: auto; margin-right: auto; }
}
/* ====================== generic page typography ========================= */
/* Used by page.php — wraps editor output (`the_content()`) so any raw HTML
from the WordPress editor inherits the JEPRA tone of voice and layout
rhythm.
Layout is a 3-column CSS grid that gives us Gutenberg-style "full-width
breakout":
• body copy (paragraphs, headings, lists, tables, images…) is locked
to a comfortable ~860px reading column,
• full-bleed elements (``, `.cta-band`, `.alignfull`,
`.wp-block-cover`, …) span the entire viewport,
• side gutters scale with the viewport so it always feels balanced.
This means a page like About can keep its narrative width, then break
out into a full-width CTA at the bottom — without needing any wrapper
tweaks in the editor. */
/* Section wrapper for default page template — establishes a soft, sky-toned
background that matches the FAQ page tone and keeps generic page bodies
feeling intentional rather than empty. */
.section-page {
position: relative;
padding: 0;
background:
radial-gradient(ellipse at 12% 0%, rgba(217, 230, 250, 0.55) 0%, transparent 55%),
radial-gradient(ellipse at 88% 110%, rgba(255, 222, 215, 0.4) 0%, transparent 55%),
#ffffff;
}
.section-page::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(10, 31, 77, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 31, 77, 0.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
opacity: 0.5;
}
.entry-content {
--content-width: 860px;
--gutter: max(1.5rem, 4vw);
position: relative;
display: grid;
grid-template-columns:
[full-start] minmax(var(--gutter), 1fr)
[content-start] min(var(--content-width), 100% - (var(--gutter) * 2)) [content-end]
minmax(var(--gutter), 1fr) [full-end];
font-size: 1.02rem;
line-height: 1.85;
color: #1c1f2e;
padding: 5rem 0 6rem;
}
.entry-content > * { grid-column: content; }
.entry-content > * + * { margin-top: 1.25rem; }
/* Full-bleed children — anything that already provides its own internal
container (sections, cover blocks, the CTA shortcode) breaks out to the
full viewport so it can act as a true page-section. */
.entry-content > section,
.entry-content > .cta-band,
.entry-content > .alignfull,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-group.alignfull {
grid-column: full;
width: 100%;
margin-top: 4rem;
}
.entry-content > section:first-child,
.entry-content > .cta-band:first-child { margin-top: 0; }
/* "Wide" alignment — between content-width and full. Useful for tables,
figures and image galleries that need a bit more room than text. */
.entry-content > .alignwide,
.entry-content > .wp-block-table.alignwide,
.entry-content > figure.alignwide {
grid-column: full;
width: min(1100px, calc(100% - (var(--gutter) * 2)));
margin-left: auto;
margin-right: auto;
}
/* All typography below uses :where() so it has zero specificity. This means
the editor cascade NEVER overrides nested components (CTA bands,
.button, .service-card, etc.) — those keep their own colours and
layout. We also restrict structural rules to direct children where it
matters, so a `.cta-band` inside content stays untouched. */
:where(.entry-content) :where(h1, h2, h3, h4) {
font-family: var(--font-serif);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--primary);
line-height: 1.2;
}
:where(.entry-content) :where(h1) { font-size: clamp(2rem, 4vw, 2.6rem); margin-top: 2.5rem; }
:where(.entry-content) :where(h2) {
font-size: clamp(1.55rem, 2.6vw, 1.95rem);
margin-top: 3rem;
}
.entry-content > h2 {
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--line-soft);
}
:where(.entry-content) :where(h3) { font-size: clamp(1.2rem, 1.9vw, 1.4rem); margin-top: 2.2rem; }
:where(.entry-content) :where(h4) { font-size: 1.05rem; margin-top: 1.8rem; color: var(--ink); }
:where(.entry-content) :where(h2 + h3, h3 + h4) { margin-top: 1rem; }
:where(.entry-content) :where(p) { margin: 0; }
:where(.entry-content) :where(p, li) > a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.2s;
}
:where(.entry-content) :where(p, li) > a:hover { color: var(--primary); }
:where(.entry-content) :where(strong) { font-weight: 600; color: var(--primary); }
:where(.entry-content) :where(em) { font-style: italic; }
:where(.entry-content) :where(ul, ol) {
padding-left: 1.4rem;
margin: 0;
}
:where(.entry-content) :where(ul) { list-style: disc; }
:where(.entry-content) :where(ol) { list-style: decimal; }
:where(.entry-content) :where(li + li) { margin-top: 0.5rem; }
:where(.entry-content) :where(li)::marker { color: var(--accent); }
:where(.entry-content) :where(blockquote) {
margin: 0;
padding: 1.4rem 1.6rem;
border-left: 3px solid var(--accent);
background: var(--bg-soft);
color: var(--ink);
border-radius: 0 14px 14px 0;
font-style: italic;
}
:where(.entry-content) :where(blockquote) :where(p + p) { margin-top: 0.8rem; }
:where(.entry-content) :where(blockquote) :where(cite) {
display: block;
margin-top: 0.8rem;
font-style: normal;
font-size: 0.8rem;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
:where(.entry-content) :where(hr) {
border: none;
height: 1px;
background: var(--line-soft);
margin: 2.5rem 0;
}
:where(.entry-content) :where(img, figure) {
border-radius: 16px;
max-width: 100%;
height: auto;
}
:where(.entry-content) :where(figure) { margin: 0; }
:where(.entry-content) :where(figure img) { display: block; }
:where(.entry-content) :where(figcaption) {
margin-top: 0.6rem;
font-size: 0.82rem;
color: var(--muted);
text-align: center;
}
:where(.entry-content) :where(code, kbd) {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.92em;
background: var(--bg-soft);
border: 1px solid var(--line-soft);
padding: 0.1em 0.45em;
border-radius: 6px;
}
:where(.entry-content) :where(pre) {
background: var(--primary);
color: #f4f6fb;
padding: 1.2rem 1.4rem;
border-radius: 14px;
overflow-x: auto;
font-size: 0.9rem;
line-height: 1.65;
}
:where(.entry-content) :where(pre code) {
background: transparent;
border: 0;
padding: 0;
color: inherit;
}
:where(.entry-content) :where(table) {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--line-soft);
border-radius: 14px;
overflow: hidden;
font-size: 0.95rem;
}
:where(.entry-content) :where(table th, table td) {
padding: 0.95rem 1.1rem;
border-bottom: 1px solid var(--line-soft);
text-align: left;
vertical-align: top;
}
:where(.entry-content) :where(table th) {
background: var(--bg-soft);
font-weight: 600;
color: var(--primary);
letter-spacing: 0.02em;
font-size: 0.78rem;
text-transform: uppercase;
}
:where(.entry-content) :where(table tr:last-child th, table tr:last-child td) { border-bottom: 0; }
:where(.entry-content) :where(table tr:nth-child(even) td) { background: rgba(244, 247, 252, 0.45); }
:where(.entry-content) :where(.wp-block-table) { margin: 1.25rem 0; }
:where(.entry-content) :where(.wp-block-table > table) { margin: 0; }
/* Aligned images / figures from the editor. */
.entry-content .alignleft {
float: left;
margin: 0.4rem 1.5rem 1rem 0;
max-width: 50%;
}
.entry-content .alignright {
float: right;
margin: 0.4rem 0 1rem 1.5rem;
max-width: 50%;
}
.entry-content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.entry-content::after { content: ""; display: table; clear: both; }
@media (max-width: 700px) {
.entry-content {
--gutter: 1.25rem;
font-size: 0.98rem;
line-height: 1.8;
padding: 3rem 0 3.5rem;
}
.entry-content h1 { font-size: 1.8rem; margin-top: 2rem; }
.entry-content h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.entry-content h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.entry-content .alignleft,
.entry-content .alignright {
float: none;
margin: 0;
max-width: 100%;
}
.entry-content table { font-size: 0.88rem; }
.entry-content table th,
.entry-content table td { padding: 0.75rem 0.85rem; }
.entry-content > section,
.entry-content > .cta-band,
.entry-content > .alignfull { margin-top: 2.5rem; }
}
/* ============================== News slider =============================
* Deep-navy band that sits just above the global CTA. Uses a horizontal
* scroll-snap track with two circular nav buttons. The watermark and route
* accents echo the hero, so the section feels like the same aircraft motif
* seen throughout the site.
* ======================================================================= */
.section-news {
position: relative;
padding: 6rem 0 6.5rem;
background: linear-gradient(165deg, var(--primary) 0%, var(--primary-deep) 100%);
color: #e7eef9;
overflow: hidden;
isolation: isolate;
}
.section-news::before,
.section-news::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.section-news::before {
top: -140px; right: -120px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(191, 164, 111, 0.18), transparent 60%);
}
.section-news::after {
bottom: -170px; left: -120px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.14), transparent 60%);
}
.news-inner { position: relative; z-index: 2; }
.news-watermark {
position: absolute;
right: clamp(-80px, -6vw, -30px);
top: 58%;
transform: translateY(-50%);
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 500;
font-size: clamp(10rem, 22vw, 18rem);
color: rgba(255, 255, 255, 0.05);
letter-spacing: -0.04em;
pointer-events: none;
user-select: none;
line-height: 1;
z-index: 1;
}
.news-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
margin-bottom: 3rem;
}
.news-head .kicker,
.kicker-light {
color: rgba(216, 194, 148, 0.85);
}
.news-head .kicker-num { color: var(--gold-soft); }
.news-title {
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-size: clamp(2.2rem, 4.2vw, 3.2rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
color: #fff;
}
.news-lead {
margin: 0.8rem 0 0;
color: rgba(231, 238, 249, 0.72);
max-width: 520px;
line-height: 1.7;
}
.news-view-all {
align-self: center;
}
/* ---- scroll track ---------------------------------------------------- */
.news-slider {
position: relative;
}
.news-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(240px, 24vw, 300px);
gap: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0;
scrollbar-width: none;
padding-bottom: 0.75rem;
/* Let cards peek past the container edges so the slider feels alive. */
padding-right: 4rem;
}
.news-track::-webkit-scrollbar { display: none; }
.news-card {
scroll-snap-align: start;
background: #ffffff;
color: var(--ink);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 18px 40px -24px rgba(6, 22, 64, 0.45);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
display: flex;
flex-direction: column;
min-height: 340px;
}
.news-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px -24px rgba(6, 22, 64, 0.55);
}
.news-card-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.news-card-media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-sky);
overflow: hidden;
}
.news-card-img,
.news-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease-out);
}
.news-card:hover .news-card-img { transform: scale(1.05); }
.news-card-visual {
position: absolute;
inset: 0;
display: grid;
place-content: center;
background: linear-gradient(135deg, #0a1f4d, #14387f);
color: rgba(255, 255, 255, 0.92);
padding: 1.25rem;
}
.news-card-visual.v-red { background: linear-gradient(135deg, #c8102e, #8a0b22); }
.news-card-visual.v-gold { background: linear-gradient(135deg, #bfa46f, #8a6e2a); }
.news-card-visual.v-ink { background: linear-gradient(135deg, #1c2a4f, #061640); }
.news-card-visual::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
radial-gradient(circle at 75% 80%, rgba(0, 0, 0, 0.2), transparent 55%);
}
.news-card-label {
position: relative;
z-index: 1;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-style: italic;
font-size: 1.25rem;
letter-spacing: -0.01em;
text-align: center;
line-height: 1.3;
max-width: 20ch;
}
.news-card-body {
padding: 1.25rem 1.4rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 1;
}
.news-card-date {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 0.85rem;
color: var(--muted);
letter-spacing: 0.02em;
}
.news-card-title {
margin: 0;
font-family: "Inter", "Noto Sans JP", -apple-system, sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-desc {
margin: 0;
font-size: 0.86rem;
line-height: 1.65;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- nav buttons ----------------------------------------------------- */
.news-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2.25rem;
}
.news-nav-btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.04);
color: #e7eef9;
display: grid;
place-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
}
.news-nav-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
}
.news-nav-btn.is-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.news-empty {
color: rgba(231, 238, 249, 0.65);
background: rgba(255, 255, 255, 0.06);
border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 18px;
padding: 2rem;
text-align: center;
}
@media (max-width: 780px) {
.section-news { padding: 4.5rem 0 5rem; }
.news-head { grid-template-columns: 1fr; align-items: flex-start; }
.news-view-all { justify-self: flex-start; }
.news-track { grid-auto-columns: 78%; padding-right: 1.5rem; }
.news-watermark { font-size: 12rem; right: -60px; top: 62%; }
}
/* ============================ News archive ============================= */
.section-news-archive { padding: 5rem 0 6rem; }
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.75rem;
margin-bottom: 3rem;
}
.news-pagination {
display: flex;
justify-content: center;
gap: 0.4rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.news-pagination .page-numbers {
padding: 0.55rem 1rem;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--ink-soft);
font-size: 0.9rem;
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.news-pagination .page-numbers:hover,
.news-pagination .page-numbers.current {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.news-pagination .dots { border: 0; }
/* ============================ News single ============================== */
.section-news-single { padding: 5rem 0 6rem; }
.news-single-media {
margin: 0 0 3rem;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: 0 30px 70px -30px rgba(10, 31, 77, 0.35);
}
.news-single-media img,
.news-single-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-single-media-fallback { background: var(--bg-sky); }
.news-single-media-fallback .news-card-visual { position: relative; width: 100%; height: 100%; }
.news-single-media-fallback .news-card-label { font-size: 2.2rem; }
.news-single-back {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--line-soft);
}
/* ============================ Recommended shops ========================
* Light, flat grid of brand logos. Uses a soft cream/sky background so it
* feels connected to the About snippet above it. Logos sit on rounded
* white cards with a subtle shadow; hover tilts them slightly upward.
* ======================================================================= */
.section-shops {
background: linear-gradient(180deg, var(--bg-warm) 0%, #ffffff 100%);
padding: 5.5rem 0 6rem;
position: relative;
}
.shops-head {
max-width: 720px;
margin: 0 auto 3rem;
text-align: center;
}
.shops-head .kicker { justify-content: center; }
.shops-head h2 {
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 0.9rem;
color: var(--primary);
}
.shops-head .section-lead {
color: var(--muted);
line-height: 1.7;
}
.shops-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
}
.shops-item { display: flex; }
.shops-card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.55rem;
text-decoration: none;
color: var(--ink);
background: #ffffff;
border: 1px solid var(--line-soft);
border-radius: 18px;
padding: 1.4rem 1.1rem;
min-height: 120px;
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
box-shadow: 0 10px 24px -18px rgba(10, 31, 77, 0.25);
position: relative;
overflow: hidden;
}
a.shops-card:hover {
transform: translateY(-4px);
border-color: var(--primary-alt);
box-shadow: 0 20px 40px -20px rgba(10, 31, 77, 0.35);
}
a.shops-card::after {
content: "↗";
position: absolute;
top: 0.6rem;
right: 0.75rem;
font-size: 0.8rem;
color: var(--muted-soft);
opacity: 0;
transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
a.shops-card:hover::after {
opacity: 1;
color: var(--accent);
}
.shops-logo {
max-width: 140px;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.shops-logo-text {
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-style: italic;
font-size: 1.2rem;
color: var(--primary);
letter-spacing: -0.01em;
text-align: center;
}
.shops-name {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
}
@media (max-width: 780px) {
.section-shops { padding: 4rem 0 4.5rem; }
.shops-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.shops-card { min-height: 100px; padding: 1.1rem 0.8rem; }
.shops-logo { max-height: 44px; max-width: 110px; }
}
/* =============================== FAQ page ============================== */
/* The FAQ uses native / so it works with zero JS, prints
nicely, and is keyboard- + screen-reader-friendly out of the box. The
Gutenberg editor exposes each Q&A as a "Details" block, so adding a new
one is a matter of pressing + → Details. */
.section-faq { padding-top: 4.5rem; }
.faq-list {
max-width: 880px;
margin: 0 auto;
display: grid;
gap: 0.85rem;
}
.faq-list .wp-block-details,
.faq-list details {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 0;
box-shadow: 0 18px 40px -28px rgba(10, 31, 77, 0.15);
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
overflow: hidden;
}
.faq-list .wp-block-details:hover,
.faq-list details:hover {
border-color: var(--primary-alt);
box-shadow: 0 24px 48px -28px rgba(10, 31, 77, 0.28);
}
.faq-list .wp-block-details[open],
.faq-list details[open] {
border-color: var(--primary);
box-shadow: 0 28px 60px -30px rgba(10, 31, 77, 0.32);
}
.faq-list summary {
list-style: none;
position: relative;
padding: 1.35rem 4rem 1.35rem 1.6rem;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 500;
font-size: clamp(1.1rem, 2.4vw, 1.45rem);
color: var(--ink);
cursor: pointer;
user-select: none;
line-height: 1.45;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { display: none; }
.faq-list summary:focus-visible { outline: 2px solid var(--primary-alt); outline-offset: 4px; border-radius: 14px; }
/* Circular +/− indicator. The "+" is drawn with two crossed gradients
inside a circle. When the parent is [open], the vertical bar
collapses to 0 height, leaving just the "−" minus sign, and the circle
inverts colour for clearer feedback. */
.faq-list summary::after {
content: "";
position: absolute;
top: 50%; right: 1.4rem;
width: 32px; height: 32px;
border-radius: 50%;
transform: translateY(-50%);
background:
linear-gradient(var(--primary), var(--primary)) center/14px 2px no-repeat,
linear-gradient(var(--primary), var(--primary)) center/2px 14px no-repeat,
var(--bg-sky);
transition: background-size 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.faq-list .wp-block-details[open] > summary::after,
.faq-list details[open] > summary::after {
background:
linear-gradient(#fff, #fff) center/14px 2px no-repeat,
linear-gradient(#fff, #fff) center/2px 0 no-repeat,
var(--primary);
transform: translateY(-50%) rotate(180deg);
}
/* Answer body — styles the paragraphs Gutenberg puts inside */
.faq-list details > *:not(summary) {
padding: 0 1.6rem;
color: var(--ink-soft);
line-height: 1.75;
margin: 0 0 1rem;
animation: faq-open 0.35s var(--ease);
}
.faq-list details > *:not(summary):first-of-type {
margin-top: 0.2rem;
}
.faq-list details > *:not(summary):last-child {
padding-bottom: 1.4rem;
}
.faq-list details > p:not(summary) { font-size: 1rem; }
.faq-list details a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.faq-list details ul { padding-left: 1.4rem; margin: 0.6rem 0; }
.faq-list details ul li { margin-bottom: 0.35rem; }
/* Answer wrapper produced by the [jepra_faq] shortcode (Classic Editor
friendly). Inherits the padding rule above; we only need to clean up the
inner paragraphs that wpautop adds. */
.faq-list .jepra-faq-answer { font-size: 1rem; color: var(--ink-soft); }
.faq-list .jepra-faq-answer p { margin: 0 0 0.8rem; }
.faq-list .jepra-faq-answer p:last-child { margin-bottom: 0; }
@keyframes faq-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* "Still asking?" footer card on the FAQ page */
.faq-still-asking {
margin: 4rem auto 0;
max-width: 880px;
border-radius: 22px;
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-sky) 100%);
border: 1px solid var(--line);
padding: 2.6rem 2.2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.faq-still-asking::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%; pointer-events: none;
}
.faq-still-asking-inner { position: relative; z-index: 1; display: grid; gap: 0.8rem; justify-items: center; }
.faq-still-asking h2 {
margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}
.faq-still-asking p { margin: 0 0 1rem; color: var(--muted); max-width: 520px; }
.faq-header .page-header-chip { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 780px) {
.menu { display: none; }
.lang-switch { display: none; }
.burger { display: block; }
.nav { min-height: 72px; }
.hero { padding-top: 2rem; }
/* Smaller, faster, fits the shorter mobile hero. The animation itself is
defined globally — we only re-tune position/size here. */
.hero::after {
top: 9%;
font-size: 18px;
animation-duration: 14s;
}
.hero-inner { padding: 1rem 0 3rem; }
.hero-stats { grid-template-columns: repeat(2, 1fr); }
.service-layout { grid-template-columns: 1fr; }
.service-layout.service-layout-3 { grid-template-columns: 1fr; gap: 1.1rem; }
.service-layout-3 .service-card { padding: 1.8rem 1.4rem; }
.section { padding: 5rem 0; }
.page-header { padding: 4rem 0 3rem; }
.bento { grid-template-columns: 1fr; }
.bento-lg { grid-column: span 1; }
.timeline { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.contact-meta { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.price-grid { grid-template-columns: 1fr; }
.cases { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.hero-stats { grid-template-columns: 1fr 1fr; }
.contact-form, .contact-form-wrap { padding: 1.6rem 1.3rem; }
.service-card { padding: 2rem 1.5rem; }
.hero-title { font-size: clamp(2.4rem, 13vw, 3.8rem); }
.brand-tag { display: none; }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ============================ initial hero reveal ====================== */
@media (prefers-reduced-motion: no-preference) {
.hero-tag, .hero-title .line, .hero-sub, .hero-actions, .hero-stats {
opacity: 0; transform: translateY(18px); animation: reveal 0.9s var(--ease) forwards;
}
.hero-tag { animation-delay: 0.05s; }
.hero-title .line:nth-child(1) { animation-delay: 0.15s; }
.hero-title .line:nth-child(2) { animation-delay: 0.3s; }
.hero-sub { animation-delay: 0.5s; }
.hero-actions { animation-delay: 0.65s; }
.hero-stats { animation-delay: 0.8s; }
}
@media (prefers-reduced-motion: reduce) {
.hero::after, .marquee-track, .orb, .dot { animation: none !important; }
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
/* ============================ wp gutenberg overrides =================== */
.wp-caption,
.alignwide,
.alignfull { max-width: 100%; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden; }
/* =====================================================================
* Product showcase — auto-scrolling horizontal strip under Strengths
* ================================================================== */
.section-showcase {
position: relative;
padding-top: clamp(3rem, 6vw, 5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
background: linear-gradient(180deg, var(--bg-cream) 0%, #ffffff 60%, var(--bg-cream) 100%);
overflow: hidden;
}
.section-showcase::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
pointer-events: none;
}
.showcase-head {
position: relative;
z-index: 1;
text-align: center;
max-width: 46rem;
margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}
.showcase-head .kicker { margin-bottom: 0.8rem; justify-content: center; }
.showcase-title {
margin: 0 0 0.6rem;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 400;
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.15;
}
.showcase-title em { font-style: italic; color: var(--accent); font-weight: 500; }
.showcase-lead { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.7; }
.showcase-marquee {
position: relative;
overflow: hidden;
width: 100%;
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.showcase-marquee-track {
display: flex;
gap: 1.1rem;
width: max-content;
padding: 0.4rem 0;
animation: jepra-showcase-scroll 28s linear infinite;
will-change: transform;
}
.showcase-marquee:hover .showcase-marquee-track { animation-play-state: paused; }
@keyframes jepra-showcase-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.showcase-item {
position: relative;
flex: 0 0 auto;
width: clamp(160px, 18vw, 240px);
aspect-ratio: 4 / 5;
margin: 0;
border-radius: 16px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.25);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.showcase-item:hover {
transform: translateY(-4px);
box-shadow: 0 22px 40px -24px rgba(15, 23, 42, 0.35);
}
.showcase-item img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s var(--ease);
}
.showcase-item:hover img { transform: scale(1.04); }
.showcase-item.is-placeholder img {
object-fit: contain;
padding: 24%;
background: linear-gradient(160deg, var(--bg-cream) 0%, var(--bg-sky) 100%);
opacity: 0.6;
}
.showcase-item figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 0.7rem 0.9rem;
background: linear-gradient(180deg, transparent, rgba(10, 31, 77, 0.78));
color: #fff;
font-size: 0.8rem;
letter-spacing: 0.02em;
line-height: 1.35;
}
@media (max-width: 780px) {
.showcase-item { width: 44vw; }
.showcase-marquee-track { gap: 0.7rem; animation-duration: 22s; }
}
@media (prefers-reduced-motion: reduce) {
.showcase-marquee-track { animation: none !important; }
}
/* =====================================================================
* Procurement / Sales-agency — pricing block (.jp-pricing)
* Paste-in HTML uses these classes; styling lives here in the theme.
* ================================================================== */
.jp-pricing {
margin: clamp(2.5rem, 5vw, 4rem) 0;
padding: clamp(2rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.5rem);
background: linear-gradient(180deg, var(--bg-sky) 0%, #ffffff 100%);
border: 1px solid var(--line);
border-radius: 22px;
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.25);
}
.jp-pricing::before {
content: "";
position: absolute; top: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(195, 155, 61, 0.22), transparent 60%);
pointer-events: none;
}
.jp-pricing-kicker {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent); font-weight: 600;
margin: 0 0 0.6rem;
}
.jp-pricing-kicker::before {
content: ""; width: 22px; height: 1px; background: var(--accent);
}
.jp-pricing h2, .jp-pricing .jp-pricing-title {
margin: 0 0 0.4rem;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 400;
font-size: clamp(1.7rem, 3.2vw, 2.3rem);
color: var(--ink);
line-height: 1.2;
letter-spacing: -0.01em;
}
.jp-pricing h2 em, .jp-pricing .jp-pricing-title em { font-style: italic; color: var(--accent); }
.jp-pricing-lead {
margin: 0 0 1.6rem;
color: var(--muted);
font-size: 0.98rem;
line-height: 1.75;
max-width: 42em;
}
.jp-pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 0 0 1.2rem;
}
.jp-pricing-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jp-price-card {
position: relative;
padding: 1.4rem 1.3rem 1.3rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
display: flex; flex-direction: column; gap: 0.5rem;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.jp-price-card:hover {
transform: translateY(-3px);
border-color: var(--primary);
box-shadow: 0 18px 30px -22px rgba(15, 23, 42, 0.3);
}
.jp-price-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
font-weight: 600;
}
.jp-price-amount {
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-size: clamp(2.2rem, 4vw, 3rem);
line-height: 1;
color: var(--accent);
letter-spacing: -0.01em;
}
.jp-price-amount .unit {
font-size: 0.48em;
color: var(--ink);
margin-left: 0.25em;
font-weight: 400;
vertical-align: 0.15em;
}
.jp-price-note {
margin: 0;
font-size: 0.82rem;
color: var(--muted);
line-height: 1.55;
}
.jp-pricing-meta {
margin: 1rem 0 0;
padding: 0.9rem 1.1rem;
background: rgba(10, 31, 77, 0.04);
border-radius: 12px;
font-size: 0.88rem;
color: var(--ink);
line-height: 1.7;
}
.jp-pricing-meta strong { color: var(--accent); }
.jp-pricing-cta { margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 720px) {
.jp-pricing-grid,
.jp-pricing-grid.is-two { grid-template-columns: 1fr; }
.jp-price-card { padding: 1.2rem 1.1rem; }
}
/* =====================================================================
* Procurement — genres / examples block (.jp-genres)
* ================================================================== */
.jp-genres {
margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.jp-genres-head {
max-width: 46rem;
margin: 0 auto clamp(1.5rem, 3vw, 2.2rem);
text-align: center;
}
.jp-genres-kicker {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent); font-weight: 600;
margin: 0 0 0.6rem;
}
.jp-genres-kicker::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.jp-genres h2, .jp-genres-title {
margin: 0 0 0.4rem;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 400;
font-size: clamp(1.7rem, 3.2vw, 2.3rem);
line-height: 1.2;
color: var(--ink);
}
.jp-genres h2 em, .jp-genres-title em { font-style: italic; color: var(--accent); }
.jp-genres-lead { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.7; }
.jp-genres-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
}
.jp-genre {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.jp-genre:hover {
transform: translateY(-4px);
border-color: var(--primary);
box-shadow: 0 24px 40px -28px rgba(15, 23, 42, 0.3);
}
.jp-genre-figure {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(160deg, var(--bg-cream), var(--bg-sky));
}
.jp-genre-figure img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s var(--ease);
}
.jp-genre-figure img[src*="placeholder.svg"] {
object-fit: contain;
padding: 20%;
opacity: 0.55;
}
.jp-genre:hover .jp-genre-figure img { transform: scale(1.04); }
.jp-genre-figure::after {
content: "";
position: absolute; inset: auto 0 0 0; height: 40%;
background: linear-gradient(180deg, transparent, rgba(10, 31, 77, 0.25));
pointer-events: none;
}
.jp-genre-body { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: 0.4rem; }
.jp-genre-tag {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 0.9rem;
color: var(--accent);
letter-spacing: 0.04em;
}
.jp-genre h3, .jp-genre-title {
margin: 0;
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-weight: 500;
font-size: 1.2rem;
color: var(--ink);
line-height: 1.25;
}
.jp-genre-examples {
margin: 0.2rem 0 0;
padding: 0;
list-style: none;
display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem;
}
.jp-genre-examples li {
font-size: 0.78rem;
padding: 0.25rem 0.6rem;
background: var(--bg-sky);
border-radius: 999px;
color: var(--primary);
border: 1px solid rgba(10, 31, 77, 0.08);
}
@media (max-width: 900px) {
.jp-genres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.jp-genres-grid { grid-template-columns: 1fr; }
}