/* ============================================================
   SIAL Paris 2026 landing page
   Loaded ONLY on this page template, on top of the main theme
   style.css (for :root color variables, .container, .btn-primary,
   .section-eyebrow, .ports-section/.pw-* etc. - kept shared so the
   Logistics section here stays pixel-identical to the Exports page
   without duplicating all of that CSS).
   ============================================================ */

:root { --sial-topbar-h: 38px; }

.sial-main { overflow: hidden; }
.center { text-align: center; }
.black { color: #000; }

/* ---------- Top ticker bar ----------
   The shared .site-header is `position: fixed; top: 0` (see style.css) so
   it always pins itself to the very top of the viewport, regardless of
   what's above it in the markup - which was covering this in-flow ticker
   bar completely. Fix: make the ticker bar fixed too, pinned above the
   header, then push .site-header down by the ticker bar's own height so
   the two stack as one sticky unit instead of overlapping. Scoped to this
   page only (.sial-landing) so the shared header/site-content rules used
   everywhere else are untouched. */
.sial-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1001; /* above .site-header's z-index: 1000 */
	height: var(--sial-topbar-h);
	display: flex;
	align-items: center;
	background: var(--green-dark);
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
}
.sial-landing .site-header { top: var(--sial-topbar-h); }
.sial-landing .mobile-nav-overlay { z-index: 1002; } /* stay above the topbar when the mobile menu is open */

/* Push page content down to clear BOTH fixed bars - the shared
   `.site-content { padding-top: var(--header-h) }` rule only accounts
   for the header, so this overrides it with the ticker bar added on. */
.sial-site-content { padding-top: calc(var(--header-h) + var(--sial-topbar-h)); }

.sial-ticker { overflow: hidden; width: 100%; }
.sial-ticker-track {
	display: inline-flex;
	width: max-content;
	animation: sial-marquee 28s linear infinite;
	padding: 9px 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sial-ticker-track--dark { animation-duration: 34s; padding: 20px 0; font-size: 14px; }
.sial-ticker-set { display: inline-flex; align-items: center; gap: 16px; padding-right: 10px; letter-spacing: 2px; text-transform: uppercase; }
.sial-dot { color: var(--gold-light); font-size: 10px; margin: 0 2px; }
@keyframes sial-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sial-ticker-track { animation: none; }
}

/* ---------- Header (mostly inherited from main site-header styles) ---------- */
.sial-header .header-inner { padding-block: 14px; }
.sial-book-btn { white-space: nowrap; }

@media (max-width: 768px) {
	:root { --sial-topbar-h: 34px; }

	/* The shared header hides .btn-shop entirely below 768px (it's the
	   "Shop Online" button, only meaningful inside the slide-out menu on
	   the main site) - this page's header CTA is different (a meeting
	   request, not a storefront link) and needs to stay visible in the
	   bar itself, sitting before the hamburger exactly like the markup
	   order already has it. Override by the more specific class instead
	   of touching the shared .btn-shop rule, so the main site's mobile
	   header is unaffected. */
	.sial-book-btn {
		display: inline-flex;
		padding: 9px 14px;
		font-size: 12px;
		border-radius: 6px;
	}
	.sial-book-btn .btn-shop-dot { display: none; }
	.header-right { gap: 10px; }
}

/* ---------- Hero ---------- */
.sial-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	color: #fff;
	padding-block: 60px;
	padding:60px 0 110px;
}
.sial-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.sial-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,58,38,0.55) 0%, rgba(11,58,38,0.82) 100%);
}
.sial-hero-inner { position: relative; z-index: 1; max-width: 860px; text-align: center; margin: 0 auto; padding: 0 20px; }

/* Eyebrow - white letter-spaced label flanked by short gold dashes,
   matching the .section-eyebrow/.eyebrow-dash pattern used in every other
   section on this page, just built for a dark hero background instead of
   inheriting the (differently-colored) shared class. */
.sial-hero-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 18px;
}
.sial-hero-eyebrow-dash { width: 30px; height: 1px; background: var(--gold-light); flex-shrink: 0; }

.sial-hero-title {
	font-family: var(--font-heading);
	font-size: clamp(26px, 4.6vw, 45px);
	font-weight: 400;
	line-height: 1.16;
	color: #fff;
	margin: 0 0 18px;
	text-align:center;
}
.sial-hero-highlight { color: var(--gold-light); }
.sial-hero-desc { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0 0 28px; }

/* CTA - the design's primary hero action is gold (distinct from the small
   green "Book a Meeting" button in the header), so it's styled explicitly
   here rather than inheriting the shared green .btn-primary. */
.sial-hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFCA00;
	color: var(--green-dark);
	font-size: 18px;
	font-weight: 400;
	border-radius: 50px;
	padding: 15px 34px;
	transition: var(--transition);
}
.sial-hero-cta:hover { background: #fff; color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.25); }

.sial-hero-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; justify-content: center; }
.sial-pill {
	background: #0D4A2B;
	border: 1px solid #0D4A2B;
	border-radius: 50px;
	padding: 9px 20px;
	font-size: 18px;
	color: rgba(255,255,255,0.92);
	backdrop-filter: blur(2px);
}
.sial-pill strong { color: var(--gold-light); font-weight: 500; }

.sial-countdown { margin-top: 34px; }
.sial-countdown-label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255,255,255,0.75);
	margin-bottom: 12px;
}
.sial-countdown-boxes { display: flex; gap: 14px; justify-content: center; }
.sial-countdown-box {
	background: rgba(11,58,38,0.55);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 14px;
	padding: 8px 20px;
	min-width: 84px;
	text-align: center;
}
.sial-countdown-num {
	display: block;
	font-family: var(--font-heading);
	font-size: 40px;
	font-weight: 400;
	color: #F2C230;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.sial-countdown-num.is-tick { animation: sial-tick 0.4s ease; }
@keyframes sial-tick {
	0%   { transform: translateY(-6px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
.sial-countdown-unit { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }

/* ---------- EU-Standard Rice ---------- */
.section-eyebrow{font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); margin-bottom: 8px;}
.sial-eu-rice { padding-block: 80px; background: #fff; }

/* Title/description (left) + the 3 stat figures (right), sharing one row -
   this is the top half of the section, above the divider. */
.sial-eu-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.sial-eu-head { max-width: 460px; }
.sial-eu-title { font-family: var(--font-heading); font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; color: var(--text-dark); margin: 8px 0 10px; }
.sial-eu-desc { color: var(--text-body); font-size: 16px; line-height: 1.55; margin: 0; }

.sial-eu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 4px; }
.sial-eu-stat { text-align: left; min-width: 100px; }
.sial-eu-stat-bar { display: block; width: 100%; height: 2px; margin-bottom: 12px; }
.sial-eu-stat-bar.sial-tone-green { background: var(--green-mid); }
.sial-eu-stat-bar.sial-tone-lightgreen { background: #1E8A55; }
.sial-eu-stat-bar.sial-tone-gold  { background: var(--gold-light); }
.sial-eu-stat strong { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--green); }
.sial-eu-stat span { display: block; font-size: 16px; color: var(--text-body); margin-top: 2px; }

.sial-eu-divider { border: none; border-top: 1px solid #ECEAE1; margin: 0 0 44px; }

/* Bottom half: the certification badge (its own rounded card, left) beside
   the 3-column variety checklist (right). */
.sial-eu-body { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: center; }
.sial-eu-badge {
	background: var(--green-pale);
	border-radius: var(--radius-lg);
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
}
.sial-eu-badge img { width: 100%; height: 100%; object-fit: contain; }

.sial-eu-varieties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sial-eu-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sial-eu-col li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text-dark); border-bottom: 1px solid #0A563417; padding-bottom: 6px; }
.sial-check {
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--green-mid);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sial-check svg { width: 12px; height: 12px; }

/* ---------- Ramajeyam in numbers ---------- */
.sial-numbers { padding-block: 80px 0; background: var(--cream); }
.sial-numbers-title { text-align: center; font-family: var(--font-heading); font-size: clamp(26px, 3vw, 35px); font-weight: 400; margin: 10px 0 8px; }
.sial-numbers-desc { text-align: center; margin: 0 auto 50px; color: #565656; font-size: 20px; }

.sial-numbers-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	align-items: center;
	padding-bottom: 60px;
}
.sial-number-card {
	background-size: cover;
	background-position: center;
	border-radius: 100px;
	padding: 80px 16px;
	text-align: center;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	/* Two shadows on ONE box-shadow line, comma-separated - CSS only
	   honors the last `box-shadow:` declaration on an element, so a
	   second one lower in the file would silently replace this rather
	   than add to it. The first is the soft drop shadow that lifts the
	   card off the page; the second (inset, offset up-left) is a faint
	   inner highlight that gives the pill a subtle embossed/3D edge. */
	box-shadow:
		0px 24px 40px 0px rgba(0,0,0,0.18),
		-14px -18px 0px 0px rgba(0,0,0,0.07) inset;
}
/* Alternating tilt - the "card rotation" layout. Swapping in a
   background-image per card (via the data-bg attribute in the
   template) will show straight through this same shape. */
.sial-numbers-grid .sial-number-card:nth-child(odd)  { transform: rotate(-4deg); }
.sial-numbers-grid .sial-number-card:nth-child(even) { transform: rotate(4deg); }
.sial-numbers-grid .sial-number-card:hover { transform: rotate(0deg) translateY(-4px); }
.sial-number-card--lead { min-height: 250px; transform: rotate(0deg) scale(1.08); z-index: 1; }
.sial-numbers-grid .sial-number-card--lead:hover { transform: rotate(0deg) scale(1.08) translateY(-4px); }

.sial-tone-cream { background-color: var(--cream-2); }
.sial-tone-green { background-color: var(--green); color: #fff; }
.sial-tone-lightgreen { background-color: #1E8A55; color: #fff; }
.sial-tone-gold  { background-color: var(--gold-light); color: var(--green-dark); }

/* Per-card font color/size control: each card can set --sial-value-color,
   --sial-label-color, --sial-value-size, --sial-label-size as an inline
   style (see the $sial_number_cards array in the template - add
   'value_color' / 'label_color' / 'value_size' / 'label_size' keys to any
   card and they're wired straight through to these variables). Cards that
   don't set one just fall back to the tone class's own color / the
   default size below - nothing extra needed for the common case. */
.sial-number-value {
	font-family: var(--font-heading);
	font-size: var(--sial-value-size, 40px);
	font-weight: 400;
	color: var(--sial-value-color, inherit);
}
.sial-number-card--lead .sial-number-value { font-size: var(--sial-value-size, 40px); }
.sial-number-label {
	display: block;
	font-size: var(--sial-label-size, 15px);
	color: var(--sial-label-color, inherit);
	margin-top: 6px;
	line-height: 1.35;
	max-width: 130px;
}

.sial-varieties-ticker { background: var(--green-dark); color: #fff; overflow: hidden; margin-top:40px; }

/* ---------- EU rice process flow ----------
   Structure (see the template): .sial-process-grid holds three
   .sial-process-row flex rows, each row interleaving 3 real
   .sial-process-step items with 2 real .sial-process-connector items
   (not pseudo-elements) - flexbox naturally sizes the connector to
   whatever space is left between circles at any viewport width, so
   there's no fragile edge-to-edge math to keep in sync with the grid.
   Between rows, a .sial-process-turn draws the curved dashed arc that
   carries the path from the end of one row down into the next. */
:root {
	--sial-ring-size: 130px;
	--sial-ring-border: 2px;
	--sial-ring-gap: 8px;
	/* Equal to the ring itself - NOT wider for the description text (that
	   was the bug: a wider step left 50px of empty space on each side of
	   the ring before the connector/turn lines even started, so they never
	   touched the circle). Title is single-line/auto-width and the
	   description is allowed to overflow its own column via negative
	   margins below, so widening either one never has to touch this. */
	--sial-step-w: var(--sial-ring-size);
	--sial-row-h: 224px;     /* ring + its margin + title + ~3-line description, at the current copy length */
	--sial-row-gap: 46px;    /* vertical space between rows */
}
.sial-process-container{
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}
.sial-process { padding-block: 90px 70px; background: var(--cream); position: relative; }
.sial-process-title { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 34px); font-weight: 600; margin: 10px 0 8px; }
.sial-process-desc { max-width: 560px; margin: 0 auto 56px; color: var(--text-body); font-size: 16px; }

.sial-process-grid { position: relative; }

.sial-process-row { display: flex; align-items: flex-start; margin-bottom: var(--sial-row-gap); }
.sial-process-row:last-of-type { margin-bottom: 0; }

/* Steps are sized to their own content (not stretched to fill 1/3 of the
   row) and the connectors absorb all the leftover space between them -
   this is what keeps the last circle in each row sitting close to the
   row's actual edge, which the turn connectors below are measured against. */
.sial-process-step {
	position: relative; /* anchors this step's own .sial-process-turn, if any - see below */
	flex: 0 0 var(--sial-step-w);
	width: var(--sial-step-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sial-process-ring {
	width: var(--sial-ring-size);
	height: var(--sial-ring-size);
	flex-shrink: 0;
	border-radius: 50%;
	border: var(--sial-ring-border) solid var(--green-mid);
	padding: var(--sial-ring-gap);
	display: flex;
	margin-bottom: 20px;
}
.sial-process-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sial-process-circle.sial-tone-green { background: var(--green-dark); }
.sial-process-circle.sial-tone-gold  { background: var(--gold-light); }
.sial-process-icon svg { width: 42px; height: 42px; }
.sial-process-circle.sial-tone-green .sial-process-icon svg { color: #fff; }
.sial-process-circle.sial-tone-gold  .sial-process-icon svg { color: var(--green-dark); }

/* Wraps the title+description together as ONE flex item inside
   .sial-process-step, so on mobile (where the step switches to a row:
   icon | text) they group into a real second column instead of the icon,
   title and description all becoming separate items side by side in that
   row. On desktop this is just a transparent flex-column wrapper that
   reproduces the same centering .sial-process-step already did directly. */
.sial-process-text { display: flex; flex-direction: column; align-items: center; }

/* Title: always one line - width:auto + nowrap, so it's exactly as wide
   as its own text and never wraps regardless of how long a future title
   is, still centered on the ring above it (the step column itself only
   needs to be as wide as the ring for the connector math above; letting
   both the title and the description overflow past it sideways, via
   negative margins, is what keeps that math simple). */
.sial-process-step h3 {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--green-dark);
	white-space: nowrap;
	margin: 0 0 8px;
}
.sial-process-step p {
	/* .sial-process-step's own align-items: center already centers a
	   child wider than the step itself, symmetrically - no extra margin
	   math needed to re-center it under the (narrower) ring above it. */
	width: 220px;
	font-size: 16px;
	color: var(--text-body);
	line-height: 1.55;
}

/* Horizontal connector between two circles in the same row - a real flex
   child, so it just fills whatever gap flexbox leaves it, centered on the
   ring's vertical middle. */
.sial-process-connector {
	flex: 1 1 40px; /* grows to absorb all leftover row width between the fixed-width steps */
	position: relative;
	align-self: flex-start;
	margin-top: calc(var(--sial-ring-size) / 2 - 1px);
	height: 0;
}
.sial-process-connector-line {
	display: block;
	width: 100%;
	border-top: 2px dashed var(--green-mid);
}
.sial-process-connector-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px; height: 22px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--gold-light);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sial-process-connector-arrow::before {
	content: '';
	width: 0; height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}
.sial-process-connector-arrow--right::before { border-left: 6px solid var(--green-dark); margin-left: 2px; }
.sial-process-connector-arrow--left::before  { border-right: 6px solid var(--green-dark); margin-right: 2px; }

/* Curved "turn" between rows - a quarter-circle-cornered dashed border.
   Nested INSIDE the one step it actually connects to (see the template's
   $turn argument) and positioned relative to THAT step's own box, not the
   whole grid - this is what fixes it landing on the wrong side: the step
   is a fixed, known --sial-step-w wide with its ring centered inside it,
   so the ring's edge is always at a fixed offset from the step's own
   edge, regardless of how wide the row's connectors stretched elsewhere.
     top    = ring radius down from the step's own top (= its ring-center)
     height = from THIS ring-center down to the NEXT row's ring-center:
              (this step's own remaining height below its ring-center)
              + the row gap + (ring radius into the next row) - which
              simplifies to exactly one row-height + one row-gap, since
              the ring-center sits the same ring-radius into every row.
     open edge = ring's edge within its own step - border-radius then
              bulges the curve outward from that point, the closed sides
              forming the path away from the circle. */
/* Width = radius: giving the box's border-radius the SAME value as its
   own width is what makes each rounded corner a true quarter-circle (not
   a shallow corner clip) - two of those stacked top-and-bottom is what
   reads as a proper half-circle bulge rather than a straight line with
   rounded tips. Bigger --sial-turn-w = rounder curve, shorter straight
   middle section. */
:root { --sial-turn-w: 135px; }

.sial-process-turn {
	position: absolute;
	width: var(--sial-turn-w);
	height: calc(var(--sial-row-h) + var(--sial-row-gap));
	top: calc(var(--sial-ring-size) / 2);
	height: calc(var(--sial-row-h) + var(--sial-row-gap));
	border: 2px dashed var(--green-mid);
	pointer-events: none;
}
.sial-process-turn--right {
	/* Open (left) edge sits at this step's ring's right edge; the box
	   bulges rightward from there, out past the ring. */
	left: calc((var(--sial-step-w) + var(--sial-ring-size)) / 2);
	border-left: none; border-top: none; border-bottom: none;
	border-radius: 0 var(--sial-turn-w) var(--sial-turn-w) 0;
}
.sial-process-turn--left {
	/* Open (right) edge sits at this step's ring's left edge; the box
	   bulges leftward from there. */
	right: calc((var(--sial-step-w) + var(--sial-ring-size)) / 2);
	border-right: none; border-top: none; border-bottom: none;
	border-radius: var(--sial-turn-w) 0 0 var(--sial-turn-w);
}

/* Mobile: collapse to a single column per step, connectors/turns replaced
   by one simple vertical dashed line down the left edge. */
@media (max-width: 900px) {
	.sial-process-grid { padding-left: 30px; position: relative; }
	.sial-process-row { flex-direction: column; align-items: flex-start; gap: 34px; }
	/* Column 1: icon. Column 2: title above description (.sial-process-text,
	   see the template - this is what keeps title+desc grouped as one
	   column instead of three items spread across the row). */
	.sial-process-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; width: 100%; }
	.sial-process-ring { width: 84px; height: 84px; margin-bottom: 0; flex-shrink: 0; }
	.sial-process-icon svg { width: 30px; height: 30px; }
	.sial-process-text { flex: 1 1 auto; align-items: flex-start; text-align: left; }
	.sial-process-step h3 { white-space: normal; }
	.sial-process-step p { width: auto; max-width: none; }
	.sial-process-connector, .sial-process-turn { display: none; }
	.sial-process-grid::before {
		content: '';
		position: absolute;
		left: 72px;
		top: 42px;
		bottom: 42px;
		border-left: 2px dashed var(--green-mid);
	}
}

/* ---------- NOW BOARDING (markets) ---------- */
.sial-boarding { padding-block: 90px; background: #fff; }
.sial-boarding-title { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 34px); font-weight: 600; margin: 10px 0 8px; }
.sial-boarding-desc { max-width: 500px; margin: 0 auto 50px; color: var(--text-body); font-size: 20px; font-weight: 300; text-align: center; }

.sial-boarding-line {
	height: 2px;
	max-width: 100%;
	margin: 0 auto 10px;
	background: #B8D0C0;
}

.sial-boarding-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 12px;
	padding-top: 30px;
}
.sial-tag {
	width: 118px;
	border-radius: 14px;
	padding: 28px 10px 40px;
	text-align: center;
	color: #fff;
	position: relative;
	transition: transform 0.25s ease;
}
.sial-boarding-grid .sial-tag:nth-child(odd)  { transform: rotate(-5deg); }
.sial-boarding-grid .sial-tag:nth-child(even) { transform: rotate(5deg); }
.sial-boarding-grid .sial-tag:hover { transform: rotate(0deg) translateY(-4px); }
.sial-tag::before {
	content: '';
	position: absolute;
	top: -40px;
	left: 50%;
	width: 2px;
	height: 40px;
	background: #B8D0C0;
	transform: translateX(-50%);
}
.sial-tag.sial-tone-gold { color: var(--green-dark); }
.sial-tag-top { display: block; font-size: 9px; letter-spacing: 0.08em; opacity: 0.75; text-transform: uppercase; }
.sial-tag-code { display: block; font-family: var(--font-heading); font-size: 26px; font-weight: 700; margin: 6px 0 2px; }
.sial-tag-name { display: block; font-size: 12px; }

/* ---------- LOGISTICS ---------- */
.lp-pw-title {
font-weight: 400;
font-style: Regular;
font-size: 35px;
line-height: 120%;
text-align: center;
color: #fff;
}
.lp-pw-footer{ font-weight: 300; font-style: Regular; font-size: 18px; line-height: 160%; text-align: center;}

/* ---------- Check-in (boarding pass form) ---------- */
.sial-checkin { padding-block: 90px 100px; background: var(--green-pale); }
.sial-checkin-title { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 34px); font-weight: 600; margin: 10px 0 8px; }
.sial-checkin-desc { color: var(--text-body); font-size: 16px; margin: 0 0 48px; }

.sial-boardingpass {
	/* max-width: 1000px; */
	margin: 0 auto;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(11,58,38,0.1);
}
.sial-bp-body { display: grid; grid-template-columns: 1fr 388px; }
.sial-bp-form-col { padding: 34px 38px; text-align: left; }
.sial-bp-submit{background-color: #0D4A2B; color: #F2C230; border-radius: 50px; padding: 18px 36px; font-size: 16px; font-weight: 700; transition: var(--transition); border:none;} 

.sial-bp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.sial-bp-logo { height: 72px; width: auto; }
.sial-bp-head-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-body); font-weight: 300; white-space: nowrap; }

/* Route block now lives inside the gold stub (see .sial-bp-stub below),
   so it's styled for that dark-on-gold context, not the white form. */
.sial-bp-route { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sial-bp-route-col strong { display: block; font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--green-dark); }
.sial-bp-route-col span { font-size: 12.5px; color: var(--green-dark); opacity: 0.75; }
.sial-bp-route-col--end { text-align: left; }
.sial-bp-route-line { flex: 1 1 auto; height: 0; border-top: 2px dashed var(--green-dark); opacity: 0.4; }

.sial-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.sial-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.sial-form-row .sial-field { margin-bottom: 0; }
.sial-field label { font-size: 11px; font-weight: 600; color: #4A5A50; text-transform: uppercase; letter-spacing: 0.08em; }
.sial-req { color: #C0392B; }
.sial-field input,
.sial-field select,
.sial-field textarea {
	border: 1px solid #D5E3DA;
	border-radius: 12px;
	padding: 14px 14px;
	font-size: 16px;
	font-family: var(--font-body);
	background: #FBFDFB;
	color: var(--text-dark);
	width: 100%;
}
.sial-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23165637' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.sial-field input:focus, .sial-field select:focus, .sial-field textarea:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(28,138,89,0.15); }
.sial-field textarea { resize: vertical; }

.sial-carryon-label { font-size: 13.5px; font-weight: 600; color: var(--text-dark); display: block; margin-bottom: 10px; }
.sial-carryon-options { display: flex; flex-wrap: wrap; gap: 10px; }
.sial-chip { position: relative; }
.sial-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sial-chip span {
	display: inline-block;
	border: 1px solid #CFD9D2;
	border-radius: 10px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: var(--transition);
	color: var(--text-dark);
}
.sial-chip input:checked + span { background: #E3F2E8; border:1px dashed #1E8A55; color: #0D4A2B; }
.sial-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(28,138,89,0.25); }

.sial-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.sial-form-note { font-size: 16px; color: #6B7A70; margin: 0; max-width: 360px; }
.sial-bp-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.sial-form-success { margin-top: 16px; padding: 14px 16px; background: var(--green-pale); color: var(--green); border-radius: 10px; font-size: 14px; }
.sial-form-error { margin-top: 16px; padding: 14px 16px; background: #fdecea; color: #b3261e; border-radius: 10px; font-size: 14px; }

.sial-bp-stub {
	background: #F2C230;
	color: var(--green-dark);
	padding: 30px 26px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* The "dashed line overlaid on the yellow box" perforation, in the
	   requested #fbf8ee. The two circular notches below (::before/::after,
	   colored to match the section's own background so they read as
	   cut-outs) are what make it look like a torn ticket stub rather than
	   just a plain border. */
	border-left: 2px dashed #fbf8ee;
}
/* .sial-bp-stub::before,
.sial-bp-stub::after {
	content: '';
	position: absolute;
	left: -11px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--green-pale); /* matches .sial-checkin's own background, so it reads as a cut notch /
} */
.sial-bp-stub::before { top: -11px; }
.sial-bp-stub::after  { bottom: -11px; }
.sial-bp-stub-row { display: flex; flex-direction: column; gap: 2px; }
.sial-bp-stub-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.sial-bp-stub-row strong { font-size: 20px; }
.sial-bp-stub-row a { color: inherit; text-decoration: none; }
.sial-bp-stub-barcode {
	margin-top: auto;
	height: 40px;
	background: repeating-linear-gradient(to right, var(--green-dark) 0 2px, transparent 2px 5px);
	opacity: 0.75;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
	.sial-numbers-grid { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
	.sial-number-card--lead { grid-column: span 1; order: -1; }
}

@media (max-width: 900px) {
	.sial-eu-body { grid-template-columns: 200px 1fr; gap: 30px; }
	.sial-eu-varieties { grid-template-columns: 1fr 1fr; }
	.sial-bp-body { grid-template-columns: 1fr; }
	.sial-bp-stub { border-left: none; border-top: 2px dashed #fbf8ee; }
	.sial-bp-stub::before,
	.sial-bp-stub::after { top: -11px; left: auto; bottom: auto; }
	.sial-bp-stub::before { left: -11px; }
	.sial-bp-stub::after  { left: auto; right: -11px; }
}

@media (max-width: 700px) {
	.sial-hero { min-height: 0; padding-block: 44px; }
	.sial-hero-eyebrow { font-size: 11.5px; gap: 8px; }
	.sial-hero-eyebrow-dash { width: 18px; }
	.sial-hero-desc { font-size: 15.5px; }
	.sial-hero-cta { padding: 13px 28px; font-size: 14.5px; }
	.sial-hero-pills { gap: 8px; }
	.sial-pill { font-size: 12.5px; padding: 8px 16px; }
	.sial-countdown-boxes { gap: 10px; }
	.sial-countdown-box { min-width: 72px; padding: 12px 14px; }
	.sial-countdown-num { font-size: 24px; }

	.sial-eu-rice, .sial-numbers, .sial-process, .sial-boarding, .sial-checkin { padding-block: 56px; }
	.sial-eu-head-row { flex-direction: column; align-items: flex-start; gap: 22px; }
	.sial-eu-stats { gap: 24px 32px; }
	.sial-eu-body { grid-template-columns: 1fr; }
	.sial-eu-badge { width: 100%; height: 180px; margin: 0; aspect-ratio: 1 / 1; padding: 20px; }
	.sial-eu-varieties { grid-template-columns: 1fr 1fr; }

	.sial-boarding-grid{padding-top:10px;}
	.sial-tag::before{top:-20px; height: 20px;}

	.sial-numbers-grid { grid-template-columns: repeat(2, 1fr); }
	.sial-number-card { min-height: 170px; border-radius: 40px; padding: 22px 12px; }
	.sial-number-card--lead { min-height: 190px; }

	.sial-form-row { grid-template-columns: 1fr; }
	.sial-bp-form-col { padding: 26px 22px; }
	.sial-form-footer { flex-direction: column; align-items: stretch; }
	.sial-bp-submit { width: 100%; }
}

/* Very narrow phones - hero pills/countdown still need to fit without
   overflowing or forcing horizontal scroll. */
@media (max-width: 420px) {
	.sial-hero-pills { flex-direction: column; align-items: flex-start; }
	.sial-pill { width: 100%; box-sizing: border-box; }
	.sial-hero-cta { width: 100%; }
	.sial-countdown-boxes { gap: 8px; }
	.sial-countdown-box { min-width: 0; flex: 1; padding: 10px 8px; }
	.sial-countdown-num { font-size: 21px; }

	.sial-eu-stats { gap: 20px 28px; }
	.sial-eu-varieties { grid-template-columns: 1fr; }
}

/* ---------- Footer (shared markup/classes with the main site footer,
   via footer-landing.php - fully responsive already through style.css's
   own breakpoints at 1024px/768px). This page's contact bar has only 3
   items (address, email, phone) instead of the main site's 4, and the
   phone item has its own one-off layout (one shared label, two numbers
   on a line with a divider, one more number below) - so both are scoped
   overrides here rather than touching the shared 4-column footer used
   site-wide. */
/* min-width-scoped so this never fights the shared max-width:1024px/768px
   breakpoints in style.css for the 2-col/1-col mobile stacking - without
   this guard, this rule (loaded after style.css, same specificity) would
   win the cascade tie-break at every width, including narrow ones. */
@media (min-width: 1025px) {
	.sial-landing .footer-contactbar-inner { grid-template-columns: 1.1fr 1fr 1.6fr; }
}

.fcb-item-phone { align-items: flex-start; }
.fcb-phone { display: flex; flex-direction: row; gap: 6px; }
.fcb-phone .fcb-label { font-size: 16px; color: rgba(255,255,255,0.65); font-weight: 300; }
.fcb-phone-row { display: flex; align-items: center; gap: 10px; }
.fcb-phone-row a,
.fcb-phone-extra { font-size: 16px; color: rgba(255,255,255,0.75); white-space: nowrap; }
.fcb-phone-row a:hover,
.fcb-phone-extra:hover { color: var(--green-light); }
.fcb-phone-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.3); }

@media (max-width: 480px) {
	.fcb-phone-row { flex-wrap: wrap; row-gap: 4px; }
}