/* ========================================= Global Settings & Resets (Unified 6-step type scale) ========================================= */ *, *::before, *::after { box-sizing: border-box; } html { --mobile-scale: 1; scroll-behavior: smooth; } :root{ /* Brand */ --accent: #0076B6; /* ===== 6-step Type Scale (site-wide) ===== */ --fs-xxl: 3rem; /* h1 / hero / brand lockup */ --fs-xl: 2rem; /* h2 / section titles */ --fs-lg: 1.5rem; /* h3 / cards / accordions */ --fs-md: 1.2rem; /* body, buttons, nav, flow text */ --fs-sm: 1rem; /* captions, table cells, small labels */ --fs-xs: 0.875rem; /* tiny legal, footer bottom */ } body { --swatch-1: rgba(0, 0, 0, 0.85); --swatch-2: rgba(0, 0, 0, 0.75); --swatch-3: rgba(0, 0, 0, 0.6); --swatch-4: rgba(0, 0, 0, 0.4); --swatch-5: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; margin: 0; } /* Only normalize elements that truly need it */ bodycopy, media-item { display: block; } a:active, .linked:active, .zoomable::part(media):active { opacity: 0.7; } .page a.active { font-weight: 600; } /* active state */ sub { position: relative; vertical-align: baseline; top: 0.3em; } sup { position: relative; vertical-align: baseline; top: -0.4em; } .small-caps { font-variant: small-caps; text-transform: lowercase; } ol { margin: 0; padding: 0 0 0 2.5em; } ul { margin: 0; padding: 0 0 0 2.0em; } ul.lineated { margin: 0 0 0 3em; padding: 0; list-style-type: none; text-indent: -3em; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(0, 0, 0, 0.75); border: 0; height: 1px; display: block; margin: 0; } .content { border-color: rgba(0,0,0,.85); } /* ========================================= Typography (Diatype + Walter on 6 sizes) ========================================= */ bodycopy { font-family: "Diatype Variable"; font-style: normal; font-weight: 400; /* body */ font-size: var(--fs-md); line-height: 2; letter-spacing: 0; color: #000000; font-variation-settings: 'slnt' 0, 'MONO' 0; margin: 0; } bodycopy > * + * { margin-top: 0rem; } bodycopy a { color: #000000; text-decoration: none; } h1{ font-family: "Diatype Variable"; font-style: normal; font-weight: 600; /* hero weight */ font-size: var(--fs-xxl); line-height: 1.15; color: #000000; letter-spacing: 0; font-variation-settings: 'slnt' 0, 'MONO' 0; margin: 2rem 0 1rem; padding: 0; } .bodycopy-transparent + h1 { margin-top: 0; } h1 a { color: #000000; text-decoration: underline; } h2{ font-family: "Diatype Variable"; font-style: normal; font-weight: 600; /* section title */ font-size: var(--fs-xl); line-height: 1.15; color: #000000; letter-spacing: 0; font-variation-settings: 'slnt' 0, 'MONO' 0; margin: 1.5rem 0 0.75rem; padding: 0; } h2:last-child, h2:last-of-type { margin-bottom: 0; } h2 a { color: #000000; text-decoration: none; } h3{ font-family: "Diatype Variable"; font-style: normal; font-weight: 600; /* subheads */ font-size: var(--fs-lg); line-height: 1.15; letter-spacing: 0; color: #000000; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; margin: 1.25rem 0 0.5rem; } h3 a { color: #000000; text-decoration: none; } .caption{ font-family: "Diatype Mono Variable"; font-style: normal; font-weight: 400; /* caption = body/light */ font-size: var(--fs-sm); line-height: 1.2; letter-spacing: 0; color: #000000; display: block; font-variation-settings: 'slnt' 0, 'MONO' 1; } .caption a { color: #000000; text-decoration: underline; } media-item .caption { margin-top: 1em; } gallery-grid .caption, gallery-columnized .caption, gallery-justify .caption { margin-bottom: 2em; } [thumbnail-index] .caption { text-align: center; } [thumbnail-index] .caption .tags { margin-top: 0.25em; } .small-caption{ --text-style: "Small Caption"; font-family: "Diatype Variable", system-ui, sans-serif; font-style: normal; font-weight: 500; /* small label */ font-size: var(--fs-sm); line-height: 1.5; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .small-caption a { color: #0076b6; text-decoration: none; } .bodycopy-transparent{ --text-style: "Bodycopy Transparent"; font-family: "Diatype Variable"; font-style: normal; font-weight: 400; /* hint */ font-size: var(--fs-lg); line-height: 1; letter-spacing: 0; color: rgba(0, 0, 0, 0.3); display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .bodycopy-transparent a { color: rgba(0, 0, 0, 0.3); text-decoration: none; } .helvetica{ /* class name kept for backwards compatibility */ --text-style: "helvetica"; font-family: Georgia, Georgia, serif, Georgia Bold; font-style: normal; font-weight: bold; /* headline tier */ font-size: var(--fs-xxl); line-height: 1.5; letter-spacing: 0; color: #000000; display: block; } .helvetica a { color: #000000; text-decoration: none; } strong { font-weight: 700; } .hero-title--light { color: #ffffff; } /* ========================================= Layout & Page ========================================= */ .page { justify-content: center; } .page-content { padding: 3rem; text-align: left; padding-top: 5rem; padding-bottom: 5rem; } .page-layout { align-items: flex-start; max-width: 80%; } body.mobile .page-layout { max-width: 100%; } /* ========================================= Media Item ========================================= */ media-item::part(media) { border-radius: 0rem; border: 0; padding: 0rem; } /* ========================================= Quick View ========================================= */ .quick-view { height: 100%; width: 100%; padding: 3rem; margin: auto; } .quick-view-background { background-color: #ffffff; } .quick-view .caption { color: rgba(255, 255, 255, 1.0); padding: 20px 0; text-align: center; transition: 100ms opacity ease-in-out; position: absolute; bottom: 0; left: 0; right: 0; } .quick-view .caption-background { padding: 0.5rem 1rem; display: inline-block; background: rgba(0, 0, 0, 0.5); border-radius: .5rem; text-align: left; max-width: 50rem; } .mobile .quick-view { width: 100%; height: 100%; margin: 0; padding: 10px; } .mobile .quick-view .caption { padding: 10px 0; } /* ========================================= Buttons / Links (global) ========================================= */ .arrow-button { display: inline-flex; align-items: center; gap: 0.75rem; font-family: "Diatype Variable", sans-serif; font-size: var(--fs-md); font-weight: 400; /* button text = body */ color: #000; text-decoration: none; margin-top: 2rem; padding: 0.8rem 1.2rem; border: 1px solid #cccccc; border-radius: 5px; background: transparent; transition: background .18s ease, border-color .18s ease, transform .18s ease; align-self: flex-start; width: max-content; max-width: 100%; } .arrow-button svg { width: 18px; height: 18px; fill: var(--accent, #0076B6); transition: transform .18s ease; } .arrow-button:hover { background: #e9f4fb; border-color: #d6e9f7; } .arrow-button:hover svg { transform: translateX(2px); } /* ========================================= Cards ========================================= */ .services{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(16px, 2vw, 28px); width:100%; margin-top: 0rem; align-items: stretch; } h1 + .services { margin-top: 2.5rem; } .feature2{ grid-column: span 6; display:grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(16px, 2vw, 28px); border:1px solid #cccccc; border-radius:5px; background:#ffffff; color:inherit; text-decoration:none; height:100%; min-height: 170px; } .feature2-text{ min-width:0; display:flex; flex-direction:column; gap:.55rem; align-self:flex-start; } .feature2-text h2{ margin:0; line-height:1.0; font-size: var(--fs-lg); font-weight: 600; /* align with headings */ } .feature2-text bodycopy{ margin-top:1rem; line-height:1.8; max-width:52ch; font-size: var(--fs-md); font-weight: 400; } .feature2-cta{ width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #cccccc; display:inline-flex; align-items:center; justify-content:center; justify-self:end; align-self:center; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .feature2 svg{ width:18px; height:18px; fill:var(--accent); } .feature2:hover .feature2-cta{ background:#e9f4fb; transform: translateX(2px); border-color:#d6e9f7; } .feature2:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); } /* ========================================= Footer v3 — Desktop + Mobile (Centered) ========================================= */ .footer-v3{ width:100%; color:#fff; font-family:"Diatype Variable",sans-serif; text-align:center; margin-top:4rem; } /* top */ .footer-v3-top{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:2rem; } .footer-v3-brand{ font-size: calc(var(--fs-xxl) * 2); font-weight:600; color:#fff; text-decoration:none; margin-bottom:2rem; } .footer-v3-tagline{ font-size:var(--fs-sm); opacity:.8; } /* nav */ .footer-v3-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem 2.2rem; margin:1rem auto 2rem; max-width:1200px; } .footer-v3-nav a{ color:#fff; font-size:var(--fs-sm); text-decoration:none; position:relative; font-weight:500; line-height:1; } /* underline (desktop only) */ .footer-v3-nav a::after{ content:""; position:absolute; left:0; bottom:-0.3em; height:1px; width:0; background:#fff; transition:width .25s ease; } .footer-v3-nav a:hover::after, .footer-v3-nav a:focus-visible::after{ width:100%; } /* address */ .footer-v3-address{ font-style:normal; font-size:var(--fs-xs); line-height:1.6; opacity:.9; margin:0 auto 2rem; line-break: strict; word-break: keep-all; } /* bottom bar */ .footer-v3-bottom{ display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; font-size:var(--fs-xs); opacity:.8; padding:1rem; } .footer-v3-bottom a{ color:#fff; text-decoration:none; position:relative; font-weight:500; } .footer-v3-bottom a::after{ content:""; position:absolute; left:0; bottom:-0.15em; height:1px; width:0; background:#fff; transition:width .25s ease; } .footer-v3-bottom a:hover::after, .footer-v3-bottom a:focus-visible::after{ width:100%; } /* =========================== Mobile (centered, clean) =========================== */ /* =============================== Nav — text-only trigger, smooth, airy =================================*/ .nav2-header{ position:sticky; top:0; left:0; right:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px); background:rgba(255,255,255,.75); border-bottom:1px solid #ccc; } /* wrap */ .nav2-wrap{ display:flex; align-items:center; gap:16px; padding:clamp(16px,2vw,20px) clamp(16px,3vw,28px); margin:0; width:100%; } /* brand */ .nav2-brand{ color:#000; text-decoration:none; font-size: var(--fs-xxl); line-height:1.2; font-weight:600; cursor:pointer; } .nav2-brand:hover{ opacity:.7; transition:opacity .18s ease; } /* rail + list */ .nav2-rail{ font-family:"Diatype Variable",sans-serif; margin-left:auto; } .nav2-root{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(16px,2vw,28px); } .nav2-item{ position:relative; margin:0; padding:0; line-height:1; } /* Top-level label (hitbox = text only) */ .nav2-item > a{ position:relative; display:inline; font-size: var(--fs-md); font-weight:400; color:#000; text-decoration:none; line-height:1; margin:0; padding:0 !important; vertical-align:middle; } /* underline */ .nav2-item > a::after{ content:""; position:absolute; left:0; bottom:-0.15em; height:1px; width:0; background:var(--accent,#0076B6); transition: width 0.3s ease; } .nav2-item > a:hover::after, .nav2-item > a:focus-visible::after{ width:100%; } /* Dropdown panel */ .nav2-menu{ position:absolute; left:0; top:calc(100% + 12px); z-index:1000; display:grid; grid-template-columns:1fr; gap:6px; min-width:260px; padding:14px; background:rgba(255,255,255,.95); border:1px solid #ccc; border-radius:8px; box-shadow:0 16px 40px rgba(0,0,0,.08); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(2px); transition: opacity .14s cubic-bezier(.2,.7,.2,1), transform .16s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; backface-visibility: hidden; } /* dropdown links */ .nav2-menu a{ color:#000; text-decoration:none; font-size: var(--fs-sm); line-height:1.5; padding:8px 10px; border-radius:4px; font-weight:500; /* dropdown item labels */ } .nav2-menu a:hover{ background:#e9f4fb; } /* Behavior */ .nav2-hasmenu:hover > .nav2-menu, .nav2-hasmenu:focus-within > .nav2-menu{ visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); } .nav2-hasmenu:hover > a::after, .nav2-hasmenu:focus-within > a::after{ width:100%; } /* Hover bridge */ .nav2-menu::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:16px; pointer-events:auto; background:transparent; } /* Mobile drawer */ .nav2-toggle{ display:none; } .nav2-burger{ display:none; width:34px; height:26px; position:relative; cursor:pointer; margin-left:auto; } .nav2-burger span,.nav2-burger::before,.nav2-burger::after{ content:""; position:absolute; left:0; right:0; height:1px; background:#000; transition:transform .25s ease, opacity .25s ease; } .nav2-burger span{ top:50%; transform:translateY(-50%); } .nav2-burger::before{ top:0; } .nav2-burger::after{ bottom:0; } /* focus rings */ .nav2-item > a:focus-visible, .nav2-menu a:focus-visible{ outline:2px solid var(--accent,#0076B6); outline-offset:3px; border-radius:4px; } /* =========================== Banner =========================== */ .bannerSweep{ position: relative; display: grid; gap: .5rem; color: #000; margin: 0; padding: 0; isolation: isolate; } /* Eyebrow label (small + subtle divider) */ .bannerSweep__eyebrow{ display: inline-flex; align-items: center; gap: .6rem; font-family: "Diatype Variable", system-ui, sans-serif; font-weight: 600; font-size: var(--fs-sm, 1rem); line-height: 1; color: rgba(0,0,0,.66); } .bannerSweep__eyebrow::before{ content:""; width:6px; height:6px; border-radius:2px; background:#000; opacity:.55; } .bannerSweep__eyebrow::after{ content:""; height:1px; width:72px; background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.08)); } /* Title */ .bannerSweep__title{ margin: 0; padding: .02em .06em; font-family: "Diatype Variable", system-ui, sans-serif; font-weight: 600; line-height: 1.12; letter-spacing: 0; color:#000; font-size: clamp(var(--fs-xl,2rem), 5vw, var(--fs-xxl,3rem)); position: relative; display: inline-block; } /* Gap between banner title and any content embedded inside the banner (e.g. gallery-freeform). Stacks on top of the 0.5rem grid gap → total ≈ 1.25–2rem. No effect when h1 is the last item inside the banner. */ .bannerSweep__title + * { margin-top: clamp(0.75rem, 2vw, 1.5rem); } /* Gap between a standalone bannerSweep block and the sibling content that follows it. Only fires when bannerSweep is NOT the last element — so it never adds to section padding-bottom. */ .bannerSweep + * { margin-top: clamp(1.25rem, 2.5vw, 2rem); } /* =========================== Section Header (flat selectors) =========================== */ .sectionheader .ss1{ margin:.2rem 0 .6rem; font-weight:600; font-size:var(--fs-xl,2rem); line-height:1.25; } .sectionheader .ss2{ margin:.2rem 0 .5rem; font-weight:600; font-size:var(--fs-lg,1.5rem); line-height:1.25; } .sectionheader .dd3{ margin:0 0 .6rem; font-size:var(--fs-md,1.2rem); } /* =========================== Accordion (safety) =========================== */ #safety-accordion details.sacc{ border:1px solid #cccccc; border-radius:8px; background:#fff; margin:0 0 10px; overflow:hidden; font-family:"Diatype Variable",sans-serif; color:#000; } /* clickable header */ #safety-accordion details.sacc > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; font-weight:500; font-size:var(--fs-lg); line-height:1.3; } #safety-accordion details.sacc > summary::-webkit-details-marker{ display:none; } /* +/- icon driven by [open] */ #safety-accordion details.sacc > summary::after{ content:"＋"; font-weight:600; line-height:1; } #safety-accordion details.sacc[open] > summary::after{ content:"−"; } /* hover */ #safety-accordion details.sacc > summary:hover{ background:#e9f4fb; border-bottom-color:#d6e9f7; } /* body */ #safety-accordion .sacc-body{ padding:14px 20px; border-top:1px solid #e1e6eb; background:#fff; font-weight:400; font-size:var(--fs-md); line-height:1.8; } /* =========================== Bilingual title spacing — v3 (Global) =========================== */ .titlepair { display: flex; flex-direction: column; margin: 0 0 .45rem; } .titlepair .small-caption { line-height: 1.2; margin: 0; display: block; font-size: var(--fs-sm, 1rem); letter-spacing: 0.05em; text-transform: uppercase; } .titlepair h2, .titlepair h3 { margin: .35rem 0 0; line-height: 1.5; } .small-caption + h2, .small-caption + h3 { margin-top: .35rem; } /* Gap between any .titlepair block and the content that follows */ .titlepair + * { margin-top: clamp(1rem, 1.8vw, 1.5rem); } /* ========================================= Tables — Clean Card Style (Unified) ========================================= */ .responsive-table{ width:100%; overflow:hidden; border:1px solid #e1e6eb; border-radius:12px; background:#fff; } .responsive-table > table{ width:100%; border-collapse:collapse; background:transparent; table-layout:auto; } .responsive-table thead th { background: linear-gradient(180deg, #f7fbfe, #fff); font-weight: 600; font-size: var(--fs-sm); color: #000; text-align: left; padding: 12px 16px; border-bottom: 1px solid #f0f3f6; white-space: nowrap; } .responsive-table th, .responsive-table td{ padding:12px 16px; font-size:var(--fs-sm); color:#000; border-bottom:1px solid #f0f3f6; text-align:left; word-break:break-word; } .responsive-table tbody th{ font-weight:600; white-space:nowrap; width:22%; } .responsive-table tr:last-child > *{ border-bottom:0; } .responsive-table thead th:first-child { border-top-left-radius: 12px; } .responsive-table thead th:last-child { border-top-right-radius: 12px; } /* Mobile tweaks */ /* =========================== What is Bioremediation? 01 + 02 =========================== */ .bio-better { color:#000; margin:0; font-family:"Diatype Variable", system-ui, sans-serif; } /* --- compare cards --- */ .bio-better-compare { margin:clamp(16px,2.8vw,28px) 0 0; } .bio-better-compare .section-kicker { display:block; margin:0 0 .5rem; color:#5b6b77; } /* Card grid */ .bio-better-compare .cards{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px,2vw,24px); } /* Cards */ .bio-better-compare .card{ border:1px solid #e1e6eb; border-radius:10px; background:#fff; padding:clamp(14px,2vw,20px); box-shadow:0 1px 0 rgba(0,0,0,.03); } .bio-better-compare .card h4{ margin:0 0 0.5rem; font-size:var(--fs-md); font-weight:600; } /* Lists in cards */ .bio-better-compare .card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:var(--fs-sm); line-height:1.6; } .bio-better-compare .card ul li{ display:flex; align-items:flex-start; gap:.55rem; } /* Default = red X icon */ .bio-better-compare .card ul li::before{ content:""; flex:0 0 14px; height:14px; margin-top:.15rem; background:#c64b4b; -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain; mask:url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Primary card = blue check icon */ .bio-better-compare .card.is-primary ul li::before{ background:var(--accent); -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain; mask:url('data:image/svg+xml;utf8,') no-repeat center/contain; } .bio-better-compare .card.is-primary{ border-color:var(--accent); background:linear-gradient(180deg,#e9f4fb,#fff); } .bio-better-compare .card.is-muted{ color:rgba(0,0,0,.55); } /* Responsive */ /* --- tri-features --- */ .bio-better .section-intro{ margin:0 0 clamp(14px, 2.4vw, 22px); } .bio-better .section-intro .titlepair{ margin:0; } .bio-better .tri-features{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 24px); margin:0; padding:0; } .bio-better .tri-features .feat{ position:relative; border:1px solid #e1e6eb; border-radius:10px; background:transparent; padding: clamp(14px, 2vw, 20px); box-shadow:0 1px 0 rgba(0,0,0,.03); display:flex; flex-direction:column; gap: clamp(10px, 1.4vw, 14px); height:100%; overflow:hidden; } /* background image layer */ .bio-better .tri-features .feat-media{ position:absolute; inset:0; margin:0; border:0; padding:0; z-index:0; pointer-events:none; } .bio-better .tri-features .feat-media media-item::part(media), .bio-better .tri-features .feat-media img, .bio-better .tri-features .feat-media video{ width:100%; height:100%; object-fit: fill; filter: brightness(1) contrast(1); } /* overlay */ .bio-better .tri-features .feat::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.80)); z-index:1; } /* content layer */ .bio-better .tri-features .feat-num, .bio-better .tri-features .feat-text{ position:relative; z-index:2; } .bio-better .tri-features .feat-num{ display:flex; align-items:center; justify-content:flex-start; } .bio-better .tri-features .badge{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:8px; border:1px solid #E3E6EA; background:#fff; color:var(--accent, #0076B6); font-weight:600; font-size: var(--fs-xs); } .bio-better .tri-features .feat-text{ display:flex; flex-direction:column; gap:.45rem; } .bio-better .tri-features .feat-text .title{ margin:0; font-weight:600; font-size: var(--fs-lg); line-height:1.3; } .bio-better .tri-features .feat-text .body{ margin:0; font-size: var(--fs-md); line-height:1.75; } /* Bioremediation 01 – intro columns */ .bio-intro column-unit { display:block; } .bio-intro .colv{ display:flex; flex-direction:column; justify-content:center; min-height:100%; } .bio-intro .titlepair{ margin:0; } .bio-intro .lede{ font-size:var(--fs-md); line-height:1.85; margin-top:clamp(12px, 2vw, 22px); } /* Bioremediation 03 – methods */ .bio-methods{color:#000;margin:0;font-family:"Diatype Variable",system-ui,sans-serif;} .bio-methods .section-intro{margin:0 0 clamp(16px,2.6vw,24px);} .bio-methods .section-intro .titlepair{margin:0;} .bio-methods .bio-methods-lede{ margin:clamp(10px,2vw,16px) 0 0; font-size:var(--fs-md); line-height:1.85; max-width:62ch; } /* GRID */ .bio-methods .bio-methods-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin:0; padding:0; } /* CARD */ .bio-methods .bm-card{ position:relative; border:1px solid #e1e6eb; border-radius:12px; background:#fff; padding:clamp(14px,2vw,20px); box-shadow:0 1px 0 rgba(0,0,0,.03); display:grid; grid-auto-rows:max-content; row-gap:.6rem; box-sizing:border-box; width:100%; overflow:hidden; } .bio-methods .bm-card.is-primary{ border-color:var(--accent,#0076B6); background:linear-gradient(180deg,#f3f9fd,#ffffff); } .bio-methods .bm-card.is-muted{ color:rgba(0,0,0,.8); } /* HEAD */ .bio-methods .bm-head{ display:flex; flex-direction:column; gap:.25rem; } .bio-methods .bm-label{ font-weight:500; font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--accent,#0076B6); } .bio-methods .bm-title{ margin:0; font-weight:600; font-size:var(--fs-lg); line-height:1.35; } .bio-methods .bm-tagline{ margin:0; font-size:var(--fs-sm); line-height:1.6; color:rgba(0,0,0,.75); } .bio-methods .bm-card.is-primary .bm-tagline{ color:rgba(0,0,0,.9); } /* BODY */ .bio-methods .bm-body{ font-size:var(--fs-md); line-height:1.85; display:flex; flex-direction:column; gap:.4rem; } .bio-methods .bm-body p{margin:0;} /* ===== IMAGE FIX (FINAL, WORKING, SHADOW-DOM SAFE-ish) ===== */ .bio-methods .bm-media{ margin:.4rem 0 0; width:100%; aspect-ratio:2/1; position:relative; overflow:hidden; border-radius:0; border:0; background:transparent; } .bio-methods .bm-media media-item{ position:absolute; inset:0; width:100%; height:100%; display:block; } .bio-methods .bm-media media-item *{ width:100%!important; height:100%!important; object-fit:cover!important; display:block!important; } .bio-methods .section-intro{ max-width:none; width:100%; } .bio-methods .bio-methods-lede{ max-width:none; } /* =========================== OIL 01 =========================== */ .oil-01{ margin:0; padding:0; display: flow-root; } .oil-01 column-unit{ display:grid; } .oil-01 .oil-intro-col{ align-self:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; } .oil-01 .titlepair{ margin:0; } .oil-01 .oil-intro-lede{ font-size:var(--fs-md); line-height:1.85; margin-top:clamp(12px, 2vw, 22px); } /* Types block */ .oilc{ color:#000; margin:0; } .oil-01 > .oilc-block{ padding:0; margin:clamp(16px,3.2vw,28px) 0; } .oil-01 > .oilc-block:last-child{ margin-bottom:0; } .oil-01 > .oilc-block:last-child > *:last-child{ margin-bottom:0 !important; padding-bottom:0 !important; } .oilc-type{ border:1px solid #e1e6eb; border-radius:12px; background:#fff; padding:clamp(14px,2vw,20px); box-shadow:0 1px 0 rgba(0,0,0,.03); transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } .oilc-type:hover{ border-color:#dbe4ea; box-shadow:0 2px 10px rgba(0,0,0,.04); } .oilc-type.is-primary{ border-color:var(--accent,#0076B6); background:linear-gradient(180deg,#f3f9fd,#ffffff); } .oilc-type .type-head{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; margin:0 0 .5rem; } .oilc-type .type-title{ margin:0; font-weight:700; font-size:var(--fs-lg); line-height:1.25; } .oilc-type .type-icon{ width:30px; height:30px; border-radius:8px; background:#9fbfd6; -webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,') center/contain no-repeat; box-shadow:0 0 0 1px rgba(0,118,182,.22) inset; } .oilc-type.is-primary .type-icon{ background:var(--accent,#0076B6); } .oilc-type .type-tags{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem .9rem; font-size:var(--fs-sm); line-height:1.6; } .oilc-type .type-tags li{ position:relative; padding-left:1.05rem; font-weight:600; color:#000; } .oilc-type .type-tags li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.18; } .oilc-type.is-primary .type-tags li::before{ background:var(--accent,#0076B6); opacity:.9; } /* =========================== OIL 02 (scoped spacing fix) =========================== */ .oil-02{ margin:0; padding:0; display:flow-root; } .oil-02 column-unit{ display:grid; } .oil-02 .oil-intro-col{ align-self:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; } .oil-02 .titlepair{ margin:0; } .oil-02 .oil-intro-lede{ font-size:var(--fs-md); line-height:1.85; margin-top:clamp(12px, 2vw, 22px); } /* block spacing */ .oilc .oilc-block { padding:0; margin:clamp(16px,3.2vw,28px) 0; } .oil-02 > .oilc-block:last-child{ margin-bottom:0; } .oil-02 > .oilc-block:last-child > *:last-child{ margin-bottom:0 !important; padding-bottom:0 !important; } .oil-02 .regs .reg-foot{ margin-top:.25rem; margin-bottom:0; } .oil-02 .regs .reg-foot .oilc-p{ margin:0; } /* copy */ .oilc .oilc-p{ margin:0 0 .6rem; font-size:var(--fs-md); line-height:1.9; } .oilc .oilc-p.muted{ color:rgba(0,0,0,.66); } /* matrix */ .oilc .regs .matrix{ margin-top:clamp(8px,1.2vw,12px); border:1px solid #e1e6eb; border-radius:12px; background:#fff; overflow:hidden; } .oilc .regs .matrix-head, .oilc .regs .mrow{ display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:center; } .oilc .regs .matrix-head{ background:linear-gradient(180deg,#f7fbfe,#fff); border-bottom:1px solid #e1e6eb; } .oilc .regs .mcell{ padding:.7rem .9rem; font-size:var(--fs-sm); } .oilc .regs .col{ font-weight:600; } .oilc .regs .row{ font-weight:600; } .oilc .regs .mrow:not(:last-child){ border-bottom:1px solid #f0f3f6; } /* center data columns */ .oilc .regs .matrix-head .mcell:nth-child(n+2), .oilc .regs .mrow .mcell:nth-child(n+2){ text-align:center; } /* dots */ .oilc .dot{ display:inline-block; width:16px; height:16px; vertical-align:middle; } .oilc .dot::before{ content:""; display:block; width:100%; height:100%; border-radius:50%; border:1.5px solid #9fbfd6; background:transparent; } .oilc .dot.full::before{ background:var(--accent,#0076B6); border-color:var(--accent,#0076B6); } .oilc .dot.hollow::before{ background:transparent; border-color:#66a8cf; } .oilc .dot.none::before{ background:transparent; border-color:#9fbfd6; opacity:.25; } /* legend */ .oilc .regs .reg-legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:.6rem; margin-bottom:0; font-size:var(--fs-sm); color:rgba(0,0,0,.8); } .oilc .regs .reg-legend .dot{ width:14px; height:14px; } /* =========================== OIL 03 =========================== */ .oil-03 column-unit{ display:grid; } .oil-03 .oil-intro-col{ align-self:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; } .oil-03 .titlepair{ margin:0; } .oil-03 .oil-intro-lede{ font-size:var(--fs-md); line-height:1.85; margin-top:clamp(12px, 2vw, 22px); } /* Remove only the final bottom margin on this page */ .oil-03 .oilc-block:last-of-type { margin-bottom:0 !important; } /* Ensure the page wrapper itself has no bottom gap */ .oil-03 { padding-bottom:0 !important; margin-bottom:0 !important; } .oilc-track{ border:1px solid #e1e6eb; border-radius:12px; background:#fff; padding:52px 12px 56px; position:relative; } .oilc-track .bar{ height:34px; margin:10px 0; border-radius:999px; color:#fff; font-weight:700; font-size:var(--fs-sm); display:flex; align-items:center; padding-left:10px; background:linear-gradient(135deg,#89D1E5,#0076B6); width:var(--len); margin-left:var(--start); } .oilc-track .bar:nth-child(2){ background:linear-gradient(135deg,#A6DBEA,#228DC2); } .oilc-track .bar:nth-child(3){ background:linear-gradient(135deg,#7CC3DA,#1C7DB6); } .oilc-track .bar:nth-child(4){ background:linear-gradient(135deg,#409BC4,#0D6AA4); } .oilc-track .bar:nth-child(5){ background:linear-gradient(135deg,#2F86AE,#0A5F8E); } .oilc-track .axis{ position:absolute; left:10px; right:10px; height:22px; font-size:var(--fs-xs); color:rgba(0,0,0,.65); } .oilc-track .axis .line{ position:absolute; left:0; right:0; top:10px; height:6px; border-radius:999px; background:linear-gradient(90deg,#e9edf1,#dfe5ea); } .oilc-track .axis em{ position:absolute; transform:translateX(-50%); top:-2px; white-space:nowrap; font-style:normal; } .oilc-track .axis.bp{ top:10px; } .oilc-track .axis.carbon{ bottom:10px; } .oilc-notes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); margin-top:12px; } .oilc-notes .note{ border:1px solid #e1e6eb; border-radius:10px; background:#fff; padding:clamp(12px,1.4vw,16px); font-size:var(--fs-md); line-height:1.85; } .oilc-notes .note strong{ display:block; margin:0 0 .35rem; } /* =========================== Oppenheimer 01 + 02 =========================== */ .oppenheimer-01 column-unit{ display:grid; } .oppenheimer-01 .opp-intro-col{ align-self:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; } .oppenheimer-01 .titlepair{ margin:0; } .oppenheimer-01 .opp-body{ margin-top:clamp(12px,2vw,22px); font-size:var(--fs-md); line-height:1.85; } /* =========================== Oppenheimer 03 — long-form features =========================== */ .oppenheimer-03 { color:#000; margin:0; padding:0; font-family:"Diatype Variable", system-ui, sans-serif; } .oppenheimer-03 .section-intro{ margin:0 0 clamp(16px, 2.6vw, 24px); } .oppenheimer-03 .section-intro .titlepair{ margin:0; } .oppenheimer-03 .opp-features{ max-width:100%; margin:0 auto; padding:0; } .oppenheimer-03 .opp-features .feat{ display:grid; grid-template-columns:72px minmax(0, 3fr) minmax(0, 2fr); align-items:flex-start; gap:clamp(16px, 2.6vw, 32px); padding:clamp(16px, 2.6vw, 28px) 0; border-top:1px solid #E3E6EA; } .oppenheimer-03 .opp-features .feat:first-child{ border-top:0; padding-top:0; } .oppenheimer-03 .opp-features .feat:last-child{ padding-bottom:0; } .oppenheimer-03 .opp-features .feat.no-media{ grid-template-columns:72px minmax(0, 1fr); } .oppenheimer-03 .opp-features .feat-num{ position:relative; padding-top:4px; } .oppenheimer-03 .opp-features .feat-num::after{ content:""; position:absolute; top:52px; bottom:0; left:50%; width:1px; transform:translateX(-50%); background: linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(0,0,0,0.03)); } .oppenheimer-03 .opp-features .badge{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:9px; border:1px solid #E3E6EA; background:#fff; color:var(--accent, #0076B6); font-weight:600; font-size:var(--fs-sm); } .oppenheimer-03 .opp-features .feat-text{ display:flex; flex-direction:column; gap:.55rem; } .oppenheimer-03 .opp-features .title{ margin:0; font-weight:600; font-size:var(--fs-xl); line-height:1.3; } .oppenheimer-03 .opp-features .body{ margin:0; font-size:var(--fs-md); line-height:1.85; font-weight:400; } .oppenheimer-03 .opp-features .feat-text > .body + .body{ margin-top:.35rem; } .oppenheimer-03 .table-caption{ margin:.8rem 0 .4rem; font-size:var(--fs-sm); font-weight:500; color:rgba(0,0,0,.75); } .oppenheimer-03 .opp-features .responsive-table{ margin-top:.2rem; } .oppenheimer-03 .opp-features .feat-media{ margin:0; border-radius:10px; border:1px solid #E3E6EA; background:#fff; overflow:hidden; min-height:0; aspect-ratio: 3 / 2; display:flex; align-items:center; justify-content:center; } .oppenheimer-03 .opp-features .feat-media media-item::part(media), .oppenheimer-03 .opp-features .feat-media img, .oppenheimer-03 .opp-features .feat-media video{ width:100%; height:100%; object-fit:cover; border:0; border-radius:0; padding:0; } /* =========================== Consulting 01 (tight) =========================== */ .consulting-01{ margin:0; color:#000; font-family:"Diatype Variable", system-ui, sans-serif; } .consulting-01 .c-head{ text-align:center; margin-bottom: clamp(16px, 2vw, 28px); } .consulting-01 .c-head .titlepair{ align-items:center; } .consulting-01 .c-grid{ display:grid; grid-template-columns:1fr; gap: clamp(16px, 2vw, 22px); } @media (min-width:640px){ .consulting-01 .c-grid{ grid-template-columns: repeat(2,1fr); } } @media (min-width:980px){ .consulting-01 .c-grid{ grid-template-columns: repeat(3,1fr); } } .consulting-01 .c-card{ position:relative; min-height:110px; cursor:pointer; outline:none; } .consulting-01 .c-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.6rem; padding:1.1rem 1.25rem; border:1px solid #e0e4e8; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.04); font-size:var(--fs-md); line-height:1.6; text-align:center; transition: opacity .18s ease, box-shadow .18s ease, border-color .18s ease; } .consulting-01 .c-front{ color:#0b0b0b; z-index:1; font-weight:500; } .consulting-01 .c-back{ z-index:2; background:#e9f4fb; color:#000; opacity:0; font-weight:600; } .consulting-01 .c-card:hover .c-back, .consulting-01 .c-card:focus-within .c-back{ opacity:1; } .consulting-01 .c-card:hover .c-front, .consulting-01 .c-card:focus-within .c-front{ opacity:.1; } .consulting-01 .c-card:hover .c-face, .consulting-01 .c-card:focus-within .c-face{ border-color:#d6e9f7; box-shadow:0 4px 12px rgba(0,0,0,.06); } .consulting-01 .ic-bullet{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--accent,#0076B6); opacity:.9; flex:0 0 14px; } .consulting-01 .ic-check{ width:16px; height:16px; flex:0 0 16px; background: var(--accent,#0076B6); -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain; mask:url('data:image/svg+xml;utf8,') no-repeat center/contain; } .consulting-01 .c-card:focus-within .c-front{ outline:2px solid var(--accent,#0076B6); outline-offset:3px; border-radius:10px; } /* =========================== Consulting 02 + 03 (tight) =========================== */ .consulting-02, .consulting-03{ margin:0; color:#000; } .consulting-02 column-unit, .consulting-03 column-unit{ display:grid; align-items:center; justify-items:stretch; } .consulting-02 .con-col, .consulting-03 .con-col{ display:flex; flex-direction:column; justify-content:center; min-height:100%; } .consulting-02 column-unit > media-item, .consulting-03 column-unit > media-item{ align-self:center; display:block; max-width:100%; height:auto; } .consulting-02 .titlepair, .consulting-03 .titlepair{ margin:0; } .consulting-02 .svc-lede, .consulting-03 .svc-lede{ margin-top: clamp(12px, 2vw, 22px); font-size: var(--fs-md); line-height: 1.85; } /* Scoped timeline styles */ .consulting-02 .svc-flow, .consulting-03 .svc-flow{ --accent:#0076B6; --ink:#0b0b0b; --muted:#6f6f6f; } .consulting-02 .svc-flow .svc-flow-title, .consulting-03 .svc-flow .svc-flow-title{ margin: clamp(18px, 3vw, 28px) 0 clamp(8px, 1.2vw, 12px); font-weight: 600; font-size: var(--fs-lg); } .consulting-02 .svc-flow .flow-line, .consulting-03 .svc-flow .flow-line{ list-style:none; margin:0; padding: clamp(10px, 1.8vw, 14px) 0 0; display:grid; grid-template-columns: repeat(var(--steps, 7), minmax(0, 1fr)); gap: clamp(8px, 1vw, 12px); position:relative; } .consulting-02 .svc-flow .flow-line::before, .consulting-03 .svc-flow .flow-line::before{ content:""; position:absolute; left:0; right:0; top: calc(28px + 0.35rem); height:2px; background: linear-gradient(90deg, #dfe5ea, #e9edf1); z-index:0; } .consulting-02 .svc-flow .flow-step, .consulting-03 .svc-flow .flow-step{ display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; position:relative; z-index:1; min-width:0; } .consulting-02 .svc-flow .flow-step .dot, .consulting-03 .svc-flow .flow-step .dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size: var(--fs-sm); line-height:1; color:#fff; background: radial-gradient(60% 60% at 30% 30%, rgba(0,118,182,.28), rgba(0,118,182,0)), linear-gradient(135deg, #228DC2, #0076B6); box-shadow:0 1px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(0,118,182,.25) inset; } .consulting-02 .svc-flow .flow-step .label, .consulting-03 .svc-flow .flow-step .label{ font-weight:500; font-size: var(--fs-sm); color: var(--ink); } .consulting-02 .svc-flow .flow-step.is-done .dot, .consulting-03 .svc-flow .flow-step.is-done .dot{ background: linear-gradient(135deg, #66BAD9, #0076B6); } .consulting-02 .svc-flow .flow-step.is-done .label, .consulting-03 .svc-flow .flow-step.is-done .label{ color:#000; } @keyframes svcPulse{ 0%,100%{ box-shadow:0 1px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(0,118,182,.25) inset; } 50%{ box-shadow:0 1px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(0,118,182,.25) inset, 0 0 0 8px rgba(0,118,182,.12); } } /* Mobile: swipe cards */ .consulting-02 .svc-flow .flow-cards, .consulting-03 .svc-flow .flow-cards{ display:none; } /* Bottom spacing harmony */ .consulting-02 .svc-flow .flow-line, .consulting-02 .svc-flow .flow-cards, .consulting-03 .svc-flow .flow-line, .consulting-03 .svc-flow .flow-cards{ margin:0 0 clamp(6px,1.2vw,10px); } /* ========================================= Testing & Analysis ========================================= */ .testing-hero, .testing-flow, .testing-features, .testing-overview, .testing-pilot{ color:#000; margin-bottom: clamp(24px,6vw,64px); font-family:"Diatype Variable",system-ui,sans-serif; } .testing-flow, .testing-features, .testing-overview, .testing-pilot{ margin-top: clamp(24px,6vw,64px); } .testing-hero column-unit, .testing-overview column-unit, .testing-pilot column-unit{ display:grid; } .testing-hero .t-col, .testing-overview .t-col, .testing-pilot .t-col{ align-self:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; } .testing-hero .titlepair, .testing-overview .titlepair, .testing-pilot .titlepair{ margin:0; } .testing-hero .t-lede, .testing-pilot .t-lede{ margin-top: clamp(12px, 2vw, 22px); font-size: var(--fs-md); line-height: 1.85; } .testing-hero .t-points{ margin:.8rem 0 0; padding-left:1.1rem; font-size:var(--fs-md); line-height:1.8; } .testing-hero .t-points li{ list-style:disc; } .testing-hero media-item::part(media), .testing-overview media-item::part(media), .testing-pilot media-item::part(media){ border:0; border-radius:.5rem; padding:0; } /* FLOW (scoped svc-flow) */ .testing-flow .section-intro{ margin:0 0 clamp(12px,2vw,18px); } .testing-flow .svc-flow{ --accent:#0076B6; --ink:#0b0b0b; --muted:#6f6f6f; } .testing-flow .svc-flow .svc-flow-title{ margin: clamp(18px,3vw,28px) 0 clamp(8px,1.2vw,12px); font-weight: 600; font-size: var(--fs-lg); } .testing-flow .svc-flow .flow-line{ list-style:none; margin:0; padding: clamp(10px,1.8vw,14px) 0 0; display:grid; grid-template-columns:repeat(var(--steps,4), minmax(0,1fr)); gap: clamp(8px,1vw,12px); position:relative; } .testing-flow .svc-flow .flow-line::before{ content:""; position:absolute; left:0; right:0; top: calc(28px + .35rem); height:2px; background:linear-gradient(90deg,#dfe5ea,#e9edf1); } .testing-flow .svc-flow .flow-step{ display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; position:relative; min-width:0; z-index:1; } .testing-flow .svc-flow .dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm); color:#fff; background: radial-gradient(60% 60% at 30% 30%, rgba(0,118,182,.28), rgba(0,118,182,0)), linear-gradient(135deg, #228DC2, #0076B6); box-shadow:0 1px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(0,118,182,.25) inset; } .testing-flow .svc-flow .flow-step.is-done .dot{ background: linear-gradient(135deg, #66BAD9, #0076B6); } .testing-flow .svc-flow .label{ font-weight:500; font-size:var(--fs-sm); color:#0b0b0b; } @keyframes tPulse{ 0%,100%{ box-shadow:0 1px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(0,118,182,.25) inset; } 50%{ box-shadow:0 1px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(0,118,182,.25) inset, 0 0 0 8px rgba(0,118,182,.12); } } /* mobile swipe */ .testing-flow .svc-flow .flow-cards{ display:none; } /* outcome strip */ .testing-flow .t-outcome{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:.6rem 0 0; } .testing-flow .t-outcome > div{ border:1px solid #e1e6eb; border-radius:10px; background:#fff; padding:.75rem .9rem; font-weight:600; font-size:var(--fs-sm); text-align:center; } .testing-flow .t-outcome .ok{ background:linear-gradient(180deg,#e9f4fb,#fff); border-color:var(--accent); } .testing-flow .t-outcome .ng{ color:rgba(0,0,0,.75); } .testing-flow .t-flow-note{ margin:.5rem 0 0; font-size:var(--fs-sm); color:rgba(0,0,0,.7); } /* FEATURES compact */ .testing-features.compact .section-intro{ margin: 0 0 clamp(10px,1.6vw,16px); } .testing-features.compact .t-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap: clamp(12px,1.6vw,16px); } .testing-features.compact .t-card{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; padding: clamp(12px,1.4vw,14px); border:1px solid #E1E6EB; border-radius:10px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.03); min-height:0; } .testing-features.compact .badge{ display:grid; place-items:center; width:36px; height:36px; border-radius:8px; border:1px solid #E3E6EA; background:#fff; color:var(--accent); font-weight:600; font-size:var(--fs-xs); flex:0 0 36px; } .testing-features.compact .t-card-title{ margin:0 0 2px; font-weight:600; font-size: clamp(1.05rem,1.6vw,1.2rem); line-height:1.25; } .testing-features.compact .t-card-body{ margin:0; font-size:var(--fs-sm); line-height:1.7; color:#0b0b0b; } column-set { align-items: center; } /* Contact page: don't vertically center columns */ .contact-hero column-set{ align-items:flex-start; } /* ========================================= STRUCTURAL PAGE-EDGE TRIMS ========================================= */ .testing-flow:last-child { margin-bottom: 0; } .testing-features:first-child { margin-top: 0; } .testing-pilot:last-child { margin-bottom: 0; } .testing-hero:first-child { margin: 0; } .testing-overview:last-child { margin-bottom: 0; } /* ========================================= Monitoring ========================================= */ .monitoring-hero, .monitoring-measure, .monitoring-reporting { color: #000; margin-bottom: clamp(24px, 6vw, 64px); font-family: "Diatype Variable", system-ui, sans-serif; } .monitoring-measure, .monitoring-reporting { margin-top: clamp(24px, 6vw, 64px); } .monitoring-hero column-unit, .monitoring-measure column-unit { display: grid; } .monitoring-hero .m-col, .monitoring-measure .m-col{ align-self: center; display: flex; flex-direction: column; justify-content: center; min-height: 100%; } .monitoring-hero .titlepair, .monitoring-measure .titlepair{ margin: 0; } .monitoring-hero .m-lede{ margin-top: clamp(12px, 2vw, 22px); font-size: var(--fs-md); line-height: 1.85; } .monitoring-hero media-item::part(media){ border: 0; border-radius: .5rem; padding: 0; } .monitoring-measure .m-footnote{ margin-top: .5rem; font-size: var(--fs-sm); color: rgba(0,0,0,.7); } .monitoring-measure .m-sidebox{ border: 1px solid #e1e6eb; border-radius: 12px; background: #fff; padding: clamp(12px, 1.6vw, 16px); box-shadow: 0 1px 0 rgba(0,0,0,.03); font-size: var(--fs-sm); line-height: 1.75; } .monitoring-reporting .section-intro{ margin: 0 0 clamp(12px, 2vw, 18px); } .monitoring-reporting .m-grid.four{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px, 1.6vw, 16px); } .monitoring-reporting .m-card{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: clamp(12px, 1.4vw, 14px); border: 1px solid #E1E6EB; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.03); } .monitoring-reporting .badge{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #dfe7ee; background: #fff; color: var(--accent); font-weight: 600; font-size: var(--fs-xs); flex: 0 0 36px; } .monitoring-reporting .m-card-title{ margin: 0 0 2px; font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.25; } .monitoring-reporting .m-card-body{ margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: #0b0b0b; } .monitoring-measure:last-child{ margin-bottom: 0; } /* ========================================= Products ========================================= */ .bioinputs{ color:#000; margin:0; font-family:"Diatype Variable", system-ui, sans-serif; } .bioinputs .p-block{ margin:0; } .bioinputs column-unit{ display:grid; align-items:center; min-height:100%; } .bioinputs .p-col{ display:flex; flex-direction:column; justify-content:center; align-self:stretch; } .bioinputs .titlepair{ margin:0; } .bioinputs .p-lede{ margin-top: clamp(12px, 2vw, 22px); font-size: var(--fs-md); line-height: 1.85; } .bioinputs media-item::part(media){ border:0; border-radius:.5rem; padding:0; } /* ========================================= Careers ========================================= */ .careers-hero, .careers-message, .careers-application{ color:#000; margin:0; font-family:"Diatype Variable", system-ui, sans-serif; } .careers-hero column-unit, .careers-message column-unit, .careers-application column-unit{ display:block; } .colv{ display:flex; flex-direction:column; justify-content:center; min-height:100%; } .careers-hero .titlepair, .careers-message .titlepair, .careers-application .titlepair{ margin:0; } .careers-hero .lede, .careers-message .lede, .careers-application .lede{ font-size: var(--fs-md); line-height: 1.85; margin-top: clamp(12px, 2vw, 22px); } .mt-tight{ margin-top: .6rem !important; } .careers-hero media-item::part(media), .careers-message media-item::part(media){ border:0; border-radius:.5rem; padding:0; } .careers-application .responsive-table{ width:100%; overflow:hidden; border:1px solid #e1e6eb; border-radius:12px; background:#fff; } .careers-application .responsive-table > table{ width:100%; border-collapse:collapse; background:transparent; table-layout:auto; } .careers-application .responsive-table th, .careers-application .responsive-table td{ padding:12px 16px; font-size:var(--fs-sm); color:#000; text-align:left; border-bottom:1px solid #f0f3f6; word-break:break-word; } .careers-application .responsive-table tbody th{ font-weight:600; white-space:nowrap; width:22%; } .careers-application .responsive-table tr:last-child > *{ border-bottom:0; } /* ========================================= company ========================================= */ .company-page{ color:#000; font-family:"Diatype Variable",system-ui,sans-serif; } .company-page column-unit{ display:grid; } .company-page column-unit > *{ align-self:center; } .company-page .colv{ display:flex; flex-direction:column; justify-content:center; min-height:100%; } .company-page .titlepair{ margin:0; } .company-page .small-caption{ font-size:var(--fs-sm,1rem); font-weight:500; color:var(--accent,#0076B6); line-height:1.2; display:block; letter-spacing:.02em; text-transform:uppercase; } .company-page .titlepair h2{ margin:.35rem 0 0; line-height:1.35; font-size:var(--fs-xl,2rem); font-weight:600; } .company-page .lede{ font-size:var(--fs-md,1.2rem); line-height:1.85; margin-top:clamp(12px,2vw,22px); } .company-message{ margin:0; padding:0; } .company-page .signature{ display:inline-block; margin-top:.2rem; } .company-profile{ margin:0; padding:0; } .company-page .titlepair + .responsive-table{ margin-top: clamp(12px, 2vw, 22px); } .company-page .responsive-table{ width:100%; overflow:hidden; border:1px solid #e1e6eb; border-radius:12px; background:#fff; } .company-page .responsive-table > table{ width:100%; border-collapse:collapse; background:transparent; table-layout:auto; } .company-page .responsive-table th, .company-page .responsive-table td{ padding:12px 16px; font-size:var(--fs-sm,1rem); color:#000; text-align:left; border-bottom:1px solid #f0f3f6; word-break:break-word; } .company-page .responsive-table tbody th{ font-weight:600; white-space:nowrap; width:22%; } .company-page .responsive-table tr:last-child > *{ border-bottom:0; } .company-page .map-embed{ height:100%; display:flex; align-items:stretch; } .company-page media-item::part(media){ border:0; border-radius:.5rem; padding:0; } /* ========================================= Mission Page (clean, minimal) ========================================= */ .mission-page{ color:#000; font-family:"Diatype Variable", system-ui, sans-serif; } .mission-hero{ margin:0; padding:50px 0; min-height:auto; display:grid; place-items:center; } .mission-card{ width:100%; max-width:min(100%, 920px); padding:0 16px; text-align:center; } .mission-card .titlepair{ margin:0; } .mission-card .titlepair h2{ margin:.35rem 0 0; line-height:1.35; } .mission-card .titlepair h2::after{ content:""; display:block; width:min(120px, 35%); height:3px; margin:10px auto 0; border-radius:999px; background: var(--accent, #0076B6); } .mission-card .lede{ margin:12px 0 0; font-size: var(--fs-md); line-height: 1.85; } .mission-card .lede.en{ color: rgba(0, 0, 0, .70); } /* =========================== Contact Form =========================== */ .contact-hero{ color:#000; margin:0; font-family:"Diatype Variable",system-ui,sans-serif; } .contact-hero column-unit{ display:grid; } .contact-hero .ch-col{ align-self:start; display:flex; flex-direction:column; justify-content:flex-start; min-height:auto; } .contact-hero .titlepair{ margin:0; } .contact-hero .ch-lede{ margin-top: clamp(12px,2vw,22px); font-size: var(--fs-md); line-height: 1.85; } .contact-hero .ch-sidebox{ border:1px solid #e1e6eb; border-radius:12px; background:#fff; padding: clamp(12px,1.6vw,16px); box-shadow:0 1px 0 rgba(0,0,0,.03); margin-top: clamp(12px,2vw,18px); } .contact-hero .ch-note{ font-size: var(--fs-sm); line-height: 1.75; margin: 0 0 .6rem; } .contact-hero .ch-meta{ list-style:none; margin:0 0 .6rem; padding:0; font-size: var(--fs-sm); line-height:1.7; } .contact-hero .ch-meta li + li{ margin-top:.2rem; } .contact-hero .ch-company{ margin-top: clamp(10px,1.6vw,16px); font-style: normal; font-size: var(--fs-sm); line-height: 1.75; } .contact-hero .ch-card{ border:1px solid #e1e6eb; border-radius:12px; background:#fff; padding: clamp(14px,2.4vw,20px); box-shadow:0 1px 0 rgba(0,0,0,.03); } .contact-form{ display:grid; gap: clamp(12px,2vw,16px); } .contact-form .cf-row{ display:grid; gap: clamp(10px,2vw,14px); } .contact-form .cf-row.two{ grid-template-columns:1fr 1fr; } .contact-form .cf-field{ display:flex; flex-direction:column; gap:.4rem; } .contact-form label{ font-size: var(--fs-sm); font-weight: 600; color:#0b0b0b; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:100%; padding:.8rem .9rem; font: 400 var(--fs-md) "Diatype Variable",system-ui,sans-serif; color:#000; background:#fff; border:1px solid #dfe5ea; border-radius:10px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .contact-form textarea{ resize: vertical; min-height: 9rem; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:2px solid var(--accent,#0076B6); outline-offset:2px; border-color: var(--accent,#0076B6); box-shadow: 0 0 0 2px rgba(0,118,182,.08); } .contact-form input:user-invalid, .contact-form select:user-invalid, .contact-form textarea:user-invalid{ border-color:#c64b4b; box-shadow:0 0 0 2px rgba(198,75,75,.08); } .contact-form .cf-consent{ display:flex; align-items:center; gap:.6rem; font-size: var(--fs-sm); } .contact-form .cf-consent a{ color: var(--accent,#0076B6); text-decoration: underline; } .contact-form .cf-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .contact-form .cf-note{ font-size: var(--fs-xs); color: rgba(0,0,0,.65); } .contact-form .cf-status{ margin-top:.25rem; font-size: var(--fs-sm); color: rgba(0,0,0,.8); } .contact-form .cf-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } /* row that stretches buttons to left/right edges */ .arrow-nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:0; } .arrow-nav .arrow-button{ margin-top:0; } /* override hover motion so arrows move in the direction they point */ .arrow-button--next:hover svg{ transform: translateX(2px); } .arrow-button--prev:hover svg{ transform: translateX(-2px); } /* =========================== Recommended content hover overlay =========================== */ .reco-card{ position: relative; display: block; text-decoration: none; color: inherit; border-radius: 0; overflow: hidden; } .reco-card:hover{ text-decoration:none; } .reco-card media-item{ display:block; } .reco-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.45rem; padding: clamp(12px, 1.6vw, 18px); background: linear-gradient(180deg, rgba(0,0,0,0.00) 35%, rgba(0,0,0,0.70) 100%); opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events:none; } .reco-card:hover .reco-overlay, .reco-card:focus-visible .reco-overlay{ opacity:1; transform: translateY(0); } .reco-card media-item::part(media){ transition: transform .25s ease; } .reco-card:hover media-item::part(media){ transform: scale(1.02); } .reco-eyebrow{ font-family:"Diatype Mono Variable"; font-size: var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.8); } .reco-title{ font-family:"Diatype Variable"; font-size: var(--fs-lg); font-weight:600; line-height:1.25; color:#fff; } .reco-desc{ font-family:"Diatype Variable"; font-size: var(--fs-sm); font-weight:400; line-height:1.6; color: rgba(255,255,255,.88); max-width:46ch; } .bannerSweep--muted-eyebrow .bannerSweep__eyebrow{ color:rgba(255,255,255,1); } .bannerSweep--muted-eyebrow .bannerSweep__eyebrow::before{ background:rgba(255,255,255,1); } .bannerSweep--muted-eyebrow .bannerSweep__eyebrow::after{ background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); } .bannerSweep--muted-eyebrow .bannerSweep__title{ color:rgba(255,255,255,1); } /* ========================================= MOBILE (ONLY) — CLEAN SYSTEM BLOCK (REPLACEMENT) - single @media (no nesting) - tokens live on body.mobile - keeps your :has() override - keeps chart scroll + table no-scroll - keeps overlay (mno) styling + arrow - FIX: testing-flow duplicate → hide .flow-cards on mobile ========================================= */ /* ========================================= MOBILE — CONSOLIDATED ========================================= */ @media (max-width:980px){ .feature2{ grid-column: span 12; } .nav2-burger{ display:block; } .nav2-root{ position:fixed; inset:60px 0 0 auto; width:min(420px,88vw); background:#fff; border-left:1px solid #ccc; box-shadow:-10px 0 30px rgba(0,0,0,.06); flex-direction:column; align-items:stretch; padding:16px; transform:translateX(100%); transition:transform .25s ease; overflow:auto; } .nav2-toggle:checked ~ .nav2-rail .nav2-root{ transform:translateX(0); } .nav2-toggle:checked + .nav2-burger::before{ transform:translateY(13px) rotate(45deg); } .nav2-toggle:checked + .nav2-burger span{ opacity:0; } .nav2-toggle:checked + .nav2-burger::after{ transform:translateY(-13px) rotate(-45deg); } /* inline sublinks on mobile */ .nav2-hasmenu .nav2-menu{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; border:0; background:transparent; padding:6px 0 0; } .nav2-hasmenu > a::after{ display:none; } .bio-better-compare .cards{ grid-template-columns:1fr 1fr; } .bio-better .tri-features{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bio-methods .bio-methods-grid{grid-template-columns:1fr;} .oilc-type .type-tags{ grid-template-columns:1fr; } .oilc-notes{ grid-template-columns:repeat(2, minmax(0,1fr)); } .oppenheimer-03 .opp-features .feat{ grid-template-columns:56px minmax(0, 1fr); } .oppenheimer-03 .opp-features .feat-media{ grid-column:1 / -1; order:3; margin-top:.4rem; aspect-ratio: 3 / 2; } .oppenheimer-03 .opp-features .feat-num::after{ display:none; } .monitoring-reporting .m-grid.four{ grid-template-columns: 1fr 1fr; } /* ========================= TOKENS (single source of truth) ========================= */ body.mobile{ /* layout */ --m-gutter: clamp(25px, 3vw, 28px); --m-max: 640px; /* rhythm */ --m-section-y: clamp(24px, 6vw, 44px); --m-block-gap: 12px; /* cards */ --m-card-pad: 16px; --m-card-radius: 12px; --m-card-border: rgba(0,0,0,0.14); /* tap targets */ --tap: 52px; /* type */ --m-h2: 1.55rem; --m-h3: 1.15rem; --m-body: 1.35rem; --m-small: 1rem; --m-cap: var(--m-small); --m-line: 1.65; } /* ========================= PAGE LAYOUT + GUTTERS ========================= */ body.mobile .page-content{ padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; padding-top: 3rem !important; padding-bottom: 3rem !important; } body.mobile .nav2-wrap{ padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; } body.mobile .page-layout{ max-width: var(--m-max) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* keep your :has() override */ body.mobile .page-content:has(.mobile-nav-header){ padding-top: 3rem !important; padding-bottom: 3rem !important; } /* Mobile nav brand — make the BioRangers text a real home link */ .mobile-nav-brand { color: #000; text-decoration: none; font-weight: 600; font-size: var(--fs-xl); line-height: 1.2; cursor: pointer; display: inline-block; } .mobile-nav-brand:hover { opacity: 0.7; } /* Footer widget — strip the page-content bottom padding so footer sits flush */ body.mobile .page-content:has(.footer-v3){ padding-bottom: 2rem !important; } /* Recruitment overlay popup — override default mobile padding with card spacing */ body.mobile [id="S3923686392"] .page-content{ padding-top: 2rem !important; padding-bottom: 2rem !important; padding-left: 1.75rem !important; padding-right: 1.75rem !important; } /* ========================= GLOBAL MOBILE TYPE ========================= */ body.mobile h2{ font-size: var(--m-h2) !important; line-height: 1.25 !important; } body.mobile h3{ font-size: var(--m-h3) !important; line-height: 1.25 !important; } body.mobile .small-caption{ font-size: var(--m-small) !important; line-height: 1.25 !important; letter-spacing: .06em !important; } body.mobile bodycopy, body.mobile .bodycopy, body.mobile .body, body.mobile .lede, body.mobile .opp-body, body.mobile .oil-intro-lede{ display:block; margin: 0.65em 0 0; font-size: var(--m-body) !important; line-height: var(--m-line) !important; color: var(--swatch-1); } body.mobile b, body.mobile strong{ font-size: inherit !important; line-height: inherit !important; } /* ========================= GLOBAL MOBILE RHYTHM ========================= */ body.mobile .page-content > section{ margin-top: var(--m-section-y) !important; margin-bottom: var(--m-section-y) !important; } body.mobile .page-content > section:first-child{ margin-top: 0 !important; } /* Equal title→content gap regardless of what element follows the .titlepair block. Without this, bodycopy inherits its own margin (0.65em) while other elements get the base clamp value — creating visually inconsistent spacing between pages. */ body.mobile .titlepair + *{ margin-top: clamp(14px, 2vw, 20px) !important; } /* bannerSweep uses h1.bannerSweep__title + .services — not .titlepair. Apply the same post-title gap so 事業内容 → service cards match every other section title→content rhythm. */ /* Unified post-title gap on mobile — same 14px whether the content sits inside the bannerSweep header or follows it as a sibling. */ body.mobile .bannerSweep__title + *, body.mobile .bannerSweep + *{ margin-top: 14px !important; } /* ========================= HERO TITLE ========================= */ body.mobile h1.hero-title{ margin: 0 !important; padding: 0 !important; line-height: 1.50 !important; display: block; } body.mobile h1.hero-title br{ line-height: 0; } body.mobile .hero-title{ margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: clamp(18px, 4vw, 28px) !important; } body.mobile .hero-title.hero-title--light{ color: rgba(255,255,255,1.00) !important; text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.35), 0 0 10px #000000; } /* ========================= ARROW NAV BUTTONS ========================= */ body.mobile .arrow-nav{ display:flex; flex-direction:column; gap: 12px; align-items:stretch; margin-top: clamp(18px, 4vw, 28px) !important; } body.mobile .arrow-button{ font-size: var(--m-body) !important; line-height: 1.1 !important; min-height: var(--tap); border-radius: var(--m-card-radius) !important; border: 1px solid var(--m-card-border) !important; background: rgba(255,255,255,.92) !important; padding: 14px 16px 14px 18px !important; width: 100%; max-width: var(--m-max); margin-left:auto; margin-right:auto; justify-content: space-between !important; align-items: center; box-shadow: 0 1px 0 rgba(0,0,0,.04); -webkit-tap-highlight-color: transparent; } body.mobile .arrow-button svg{ width: 18px !important; height: 18px !important; flex: 0 0 auto; } body.mobile .arrow-button:hover{ background: rgba(255,255,255,.92) !important; } body.mobile .arrow-button:active{ transform: translateY(1px); background: rgba(233,244,251,.70) !important; border-color: rgba(0,118,182,.25) !important; } body.mobile .arrow-button--next{ border-color: rgba(0,118,182,.28) !important; } /* ========================= “CARD-LIKE” NORMALIZATION ========================= */ body.mobile .feature2, body.mobile .oilc-type, body.mobile .oilc-notes .note, body.mobile .opp-features .feat{ border-radius: var(--m-card-radius) !important; } /* ========================= FEATURE2 cards — MOBILE FIX ========================= */ body.mobile .services{ grid-template-columns: 1fr !important; gap: var(--m-block-gap) !important; margin-top: 0; } /* NOTE: .bannerSweep__title and .services live in separate Cargo stacked pages — they are never DOM siblings. Gap between them is controlled by inter-page padding (pb: 0 + pt: 3rem = 3rem). */ body.mobile .feature2{ grid-column: 1 / -1 !important; grid-template-columns: 1fr auto !important; align-items: center !important; padding: 14px 14px !important; gap: 12px !important; min-height: 0 !important; } body.mobile .feature2-text{ gap: 6px !important; } body.mobile .feature2-text h2{ font-size: var(--m-h2) !important; line-height: 1.25 !important; margin: 0 !important; } body.mobile .feature2-text bodycopy{ font-size: var(--m-body) !important; line-height: 1.55 !important; margin-top: 2px !important; max-width: none !important; } body.mobile .feature2-cta{ width: 36px !important; height: 36px !important; align-self: center !important; } body.mobile .feature2 svg{ width: 16px !important; height: 16px !important; } body.mobile .feature2:active{ transform: translateY(1px); border-color: rgba(0,118,182,.25) !important; background: rgba(233,244,251,.55) !important; } /* ========================= LINE BREAK HELPERS ========================= */ body.mobile .mob-break{ font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; } body.mobile .mob-break::after{ content:"\A"; white-space:pre; } body.mobile .bannerSweep__title .mob-break{ display:inline; } body.mobile .bannerSweep--resources gallery-freeform > media-item:nth-child(n+5){ display:none !important; } /* ========================= OIL 01 — TAGS FIX (chips) ========================= */ body.mobile .oil-01 .oilc-type{ padding: var(--m-card-pad) !important; } body.mobile .oil-01 .oilc-type .type-tags{ display:flex !important; flex-wrap:wrap !important; gap: 8px 8px !important; margin-top: .65rem !important; padding: 0 !important; } body.mobile .oil-01 .oilc-type .type-tags li{ padding: .42rem .62rem !important; border: 1px solid #e1e6eb !important; border-radius: 999px !important; line-height: 1.05 !important; font-weight: 600 !important; color: #000 !important; } body.mobile .oil-01 .oilc-type .type-tags li::before{ display:none !important; } body.mobile .oil-01 .oilc-type .type-head{ column-gap: 12px !important; margin-bottom: .35rem !important; } body.mobile .oil-01 .oilc-type .type-icon{ width: 26px !important; height: 26px !important; border-radius: 7px !important; } /* ========================= OIL 03 — NOTES + CHART (scrollable) ========================= */ body.mobile .oil-03 .oilc-notes{ display:grid !important; gap:0.9rem !important; margin-top:1rem !important; } body.mobile .oil-03 .oilc-notes .note{ padding: var(--m-card-pad) !important; line-height: var(--m-line) !important; word-break: break-word; overflow-wrap: anywhere; } body.mobile .oil-03 .oilc-notes .note strong{ display:block; margin-bottom:0.35rem; } body.mobile .oil-03 .oilc-comp .oilc-track{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding-bottom:0.75rem; } body.mobile .oil-03 .oilc-comp .oilc-track > *{ min-width:720px; } body.mobile .oil-03 .oilc-comp .axis em, body.mobile .oil-03 .oilc-comp .bar span{ font-size:0.85rem !important; line-height:1.2 !important; white-space:nowrap; } /* ========================= OPPENHEIMER 03 — MOBILE RESET ========================= */ body.mobile .oppenheimer-03 .opp-features .feat{ display:block !important; padding: 1.25rem 0 !important; border-top: 1px solid #e1e6eb; } body.mobile .oppenheimer-03 .opp-features .feat:first-child{ border-top:0; padding-top:0; } body.mobile .oppenheimer-03 .opp-features .feat-media{ display:none !important; } body.mobile .oppenheimer-03 .opp-features .feat-num{ display:inline-flex; align-items:center; gap:.75rem; margin-bottom:.6rem; } body.mobile .oppenheimer-03 .opp-features .badge{ width:32px; height:32px; font-size:.85rem; flex:0 0 32px; } body.mobile .oppenheimer-03 .opp-features .feat-text{ width:100%; gap:.6rem; } body.mobile .oppenheimer-03 .opp-features .title{ font-size: var(--m-h2) !important; line-height:1.35 !important; margin:0 !important; } body.mobile .oppenheimer-03 .opp-features .body{ font-size: var(--m-body) !important; line-height: var(--m-line) !important; } body.mobile .oppenheimer-03 .responsive-table{ margin-top:.75rem; } body.mobile .oppenheimer-03 .table-caption{ font-size:.9rem !important; margin:.75rem 0 .4rem !important; } body.mobile .oppenheimer-03 .opp-features .feat-num::after{ display:none !important; } /* Safety accordion: match body text size on mobile (--fs-lg stays desktop-only) */ body.mobile #safety-accordion details.sacc > summary { font-size: var(--m-body) !important; line-height: var(--m-line) !important; padding: 14px 16px !important; } body.mobile #safety-accordion .sacc-body { font-size: var(--m-small) !important; line-height: var(--m-line) !important; padding: 12px 16px !important; } /* PDF download buttons in testing-overview: remove stacked margins that create awkward gaps */ body.mobile .testing-overview .opp-body { margin-top: 0.75rem !important; } body.mobile .testing-overview .opp-body .arrow-button { margin-top: 0 !important; } /* ========================= TABLES — scrollable on mobile ========================= */ body.mobile .responsive-table{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body.mobile .responsive-table table{ min-width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; } body.mobile .responsive-table th, body.mobile .responsive-table td{ padding: 10px 8px !important; font-size: 0.85rem !important; line-height: 1.4 !important; word-break: break-word !important; white-space: normal !important; vertical-align: top !important; } /* thead column labels: don't wrap, keep readable */ body.mobile .responsive-table thead th{ white-space: nowrap !important; font-size: 0.8rem !important; } /* First column (year / date / row header): never break digits or short labels */ body.mobile .responsive-table td:first-child, body.mobile .responsive-table th:first-child { white-space: nowrap !important; word-break: normal !important; min-width: 3.5rem; } /* ========================= BIOINPUTS — ghost-height fix Desktop sets column-unit { min-height:100% } so the image column stretches to match the tall text column. On mobile the columns stack, but that min-height stays → empty space below the image. Reset height to auto so each column-unit is exactly as tall as its own content. No reordering — source order (text then image). ========================= */ body.mobile .bioinputs column-set { display: flex !important; flex-direction: column !important; align-items: stretch !important; } body.mobile .bioinputs column-unit { width: 100% !important; min-height: 0 !important; height: auto !important; } /* ========================= Cargo overlay: centered but scroll-safe ========================= */ #mno-root{ position: fixed; inset: 0; z-index: 2147483647; background: #fff; display: flex; justify-content: center; align-items: center; padding: 16px; box-sizing: border-box; } #mno-panel, .mno-panel{ width: 100%; max-width: 420px; max-height: calc(100svh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; } .mno-card{ display: block; padding: 16px; border: 1px solid rgba(0,0,0,.14); border-radius: 14px; text-decoration: none; color: #000; line-height: 1.15; box-sizing: border-box; } .mno-card span{ display:block; margin-top:6px; font-size:0.75rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(0,0,0,.45); } /* mno card row layout + arrow */ #mno-root .mno-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; } #mno-root .mno-text{ min-width:0; } #mno-root .mno-arrow{ width:18px; height:18px; fill:var(--accent,#0076B6); flex:0 0 auto; pointer-events:none; transition:transform .18s ease; } #mno-root .mno-card:hover .mno-arrow{ transform:translateX(2px); } #mno-root .mno-card:active .mno-arrow{ transform:translateX(3px); } /* ========================= BIO 01 — 比較 (mobile accordion only) ========================= */ body.mobile #bio-better .bio-better-compare .cards{ grid-template-columns: 1fr !important; gap: var(--m-block-gap, 12px) !important; } body.mobile #bio-better .bio-better-compare .card{ padding: 0 !important; border-radius: var(--m-card-radius, 12px) !important; border: 1px solid var(--m-card-border, rgba(0,0,0,.14)) !important; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.04); } body.mobile #bio-better .bio-better-compare .card h4{ margin: 0 !important; padding: 14px 16px !important; font-size: var(--m-body, 1.25rem) !important; line-height: 1.25 !important; font-weight: 600 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.mobile #bio-better .bio-better-compare .card h4::after{ content:""; width: 10px; height: 10px; flex: 0 0 10px; border-right: 2px solid rgba(0,0,0,.55); border-bottom: 2px solid rgba(0,0,0,.55); transform: rotate(45deg); transition: transform .18s ease; margin-top: -2px; } body.mobile #bio-better .bio-better-compare .card ul{ display: none !important; margin: 0 !important; padding: 12px 16px 14px !important; border-top: 1px solid rgba(0,0,0,.10); font-size: var(--m-small, .98rem) !important; line-height: 1.55 !important; gap: .55rem !important; } body.mobile #bio-better .bio-better-compare .card.is-open ul{ display: grid !important; } body.mobile #bio-better .bio-better-compare .card.is-open h4::after{ transform: rotate(-135deg); margin-top: 2px; } body.mobile #bio-better .bio-better-compare .card ul li{ gap: 1.6rem !important; } body.mobile #bio-better .bio-better-compare .card ul li::before{ flex: 0 0 14px !important; height: 15px !important; margin-top: -0.40rem !important; } body.mobile #bio-better .bio-better-compare .card.is-primary{ border-color: rgba(0,118,182,.28) !important; background: rgba(233,244,251,.55) !important; } body.mobile #bio-better .bio-better-compare .card.is-muted{ background: rgba(255,255,255,.92) !important; } body.mobile #bio-better .bio-better-compare .card:active{ transform: translateY(1px); border-color: rgba(0,118,182,.22) !important; } /* ========================= BIO-BETTER tri-features — MOBILE unclamp ========================= */ body.mobile .bio-better .tri-features{ grid-template-columns: 1fr !important; gap: var(--m-block-gap) !important; } body.mobile .bio-better .tri-features .feat{ padding: var(--m-card-pad) !important; border-radius: var(--m-card-radius) !important; gap: 12px !important; } body.mobile .bio-better .tri-features .badge{ width: 34px !important; height: 34px !important; font-size: .9rem !important; } body.mobile .bio-better .tri-features .feat-text .title{ font-size: var(--m-h3) !important; line-height: 1.25 !important; margin: 0 !important; } body.mobile .bio-better .tri-features .feat-text .title br{ display:none !important; } body.mobile .bio-better .tri-features .feat-text .body{ font-size: var(--m-body) !important; line-height: var(--m-line) !important; margin: 0 !important; } body.mobile .bio-better .tri-features .feat-media{ aspect-ratio: 16 / 9 !important; border-radius: var(--m-card-radius) !important; } /* ========================= BIO-METHODS — MOBILE unclamp ========================= */ body.mobile .bio-methods .bio-methods-lede{ font-size: var(--m-body) !important; line-height: var(--m-line) !important; margin-top: 10px !important; } body.mobile .bio-methods .bio-methods-grid{ grid-template-columns: 1fr !important; gap: var(--m-block-gap) !important; } body.mobile .bio-methods .bm-card{ padding: var(--m-card-pad) !important; border-radius: var(--m-card-radius) !important; } body.mobile .bio-methods .bm-head{ margin-bottom: 10px !important; } body.mobile .bio-methods .bm-label{ font-size: var(--m-cap) !important; letter-spacing: .08em !important; } body.mobile .bio-methods .bm-title{ font-size: var(--m-h2) !important; line-height: 1.25 !important; margin: 0 !important; } body.mobile .bio-methods .bm-title br{ display:none !important; } body.mobile .bio-methods .bm-body p{ font-size: var(--m-body) !important; line-height: var(--m-line) !important; margin: 0 !important; } body.mobile .bio-methods .bm-media{ margin-top: 12px !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: var(--m-card-radius) !important; } body.mobile .bio-methods .bm-media media-item{ width: 100% !important; height: 100% !important; object-fit: contain !important; } /* ========================= Consulting 01 — MOBILE: compact Q + A ========================= */ body.mobile .consulting-01 .c-grid{ grid-template-columns: 1fr !important; gap: 12px !important; } body.mobile .consulting-01 .c-card{ position: relative !important; height: auto !important; min-height: 0 !important; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,.10) !important; background: rgba(255,255,255,.88) !important; box-shadow: none !important; } body.mobile .consulting-01 .c-face{ position: static !important; inset: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: none !important; text-align: left !important; } body.mobile .consulting-01 .c-front, body.mobile .consulting-01 .c-back{ display: grid !important; grid-template-columns: 14px 1fr !important; column-gap: 10px !important; align-items: start !important; opacity: 1 !important; } body.mobile .consulting-01 .c-front{ font-weight: 600 !important; font-size: var(--m-body) !important; line-height: 1.35 !important; color: rgba(0,0,0,.88) !important; } body.mobile .consulting-01 .c-back{ margin-top: 8px !important; font-weight: 450 !important; font-size: var(--m-small) !important; line-height: 1.45 !important; color: rgba(0,0,0,.62) !important; } body.mobile .consulting-01 .ic-bullet, body.mobile .consulting-01 .ic-check{ width: 12px !important; height: 12px !important; margin-top: .22rem !important; opacity: .55 !important; } /* ========================= Consulting 02/03 — FLOW: evenly spaced, FULL WIDTH ========================= */ body.mobile .consulting-02 .flow-line, body.mobile .consulting-03 .flow-line{ display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap: 0 !important; width: 100% !important; overflow: visible !important; padding: 0 !important; margin: 12px 0 0 !important; mask-image: none !important; -webkit-mask-image: none !important; } body.mobile .consulting-02 .flow-step, body.mobile .consulting-03 .flow-step{ flex: 1 1 0 !important; min-width: 0 !important; text-align:center !important; } body.mobile .consulting-02 .flow-step .dot, body.mobile .consulting-03 .flow-step .dot{ margin: 0 auto 6px !important; display:grid !important; place-items:center !important; } body.mobile .consulting-02 .flow-step .label, body.mobile .consulting-03 .flow-step .label{ white-space: normal !important; line-height: 1.15 !important; font-size: 0.75rem !important; opacity: .75 !important; } /* ========================= TESTING — FLOW - keep

...

用途	油による土壌汚染・地下水汚染の浄化
内容	パーム油由来の陰イオン系界面活性剤
性状	白色のパウダー
荷姿	25kg入り袋

グリーンバイオ 6718