/* Start Creating Holding — static-site additions.
   Load AFTER site.css. Only covers what differs in the plain-HTML build
   (links rendered as <a>, the contact form states, small a11y helpers). */

/* Links that reuse button/nav styling must not be underlined. */
.sc-hd__logo,
.sc-hd__link,
.sc-hd__mlink,
.sc-ft__navlink,
.sc-ft__line,
.sc-arrow-link,
.sc-card,
.sc-area,
a.sc-card,
a.sc-area,
a.sc-btn { text-decoration: none; }

/* The whole area card is a link — keep its title and body un-underlined too. */
a.sc-area:hover, a.sc-card:hover,
a.sc-area .sc-h4, a.sc-area .sc-area__body { text-decoration: none; }

a.sc-btn { display: inline-flex; }

/* Skip link (accessibility) */
.sc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-900); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0; font-family: var(--font-display); font-weight: 700;
}
.sc-skip:focus { left: 0; }

/* Language switch as links */
.sc-lang__b { text-decoration: none; }

/* Contact form — status messages */
.sc-form__status { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; margin: 0; }
.sc-form__status--err { color: #b4322b; }
.sc-form__btn[disabled] { opacity: .6; cursor: progress; }

/* Honeypot — visually hidden but present for bots */
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact CTA card (replaces the old form) */
.sc-contact__cta { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-7); align-self: start; }
.sc-contact__cta h2 { margin: 0 0 var(--space-3); }
.sc-contact__cta p { margin: 0 0 var(--space-6); color: var(--fg-muted); }
.sc-contact__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* The static hero keeps its text readable even before the canvas paints. */
.sc-hero__canvas { opacity: 1; }

/* Active nav underline also works on <a> (already handled), ensure pointer */
.sc-hd__link, .sc-hd__mlink, .sc-ft__navlink, .sc-arrow-link { cursor: pointer; }

/* Justified body copy on the reading-heavy blocks. Hyphenation is OFF, so no
   word is ever split with a "-" at the end of a line. Justify keeps both edges
   flush; the text spans the full content width (see below). */
.sc-prose__p,
.sc-arearow__text,
.sc-pb__intro {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none;
}

/* =====================================================================
   v3 — Full-bleed hero, richer scroll motion, fluid mobile typography
   ===================================================================== */

/* ---- 1. Hero fills the whole screen (one dark colour, no white peeking) ---- */
.sc-hero {
  min-height: 100vh;          /* fallback */
  min-height: 100svh;         /* mobile-safe: ignores the browser toolbar */
  padding-block: 96px var(--space-9);
}
/* Scroll cue at the bottom of the hero — invites the user to scroll. */
.sc-hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 64px;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.6); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  transition: color var(--dur-micro) var(--ease-out);
}
.sc-hero__scroll:hover { color: var(--brand-teal); }
.sc-hero__scroll svg { width: 22px; height: 22px; animation: sc-bob 1.9s ease-in-out infinite; }
@keyframes sc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* The tagline sits a touch higher so it never collides with the scroll cue. */
.sc-hero__tagline { bottom: 108px; }

/* ---- 2. Richer scroll-in motion ---- */
/* A bit more travel + a hair of scale reads as more "alive" without jank. */
.sc-reveal { transform: translateY(34px) scale(.985); will-change: opacity, transform; }
.sc-reveal.is-in { transform: none; }
/* Gentle parallax drift applied to the hero content as you scroll (set in JS). */
.sc-hero__inner { will-change: transform; }

/* ---- 3. Fluid typography — text scales itself down on small devices ---- */
:root {
  --text-md:  clamp(1rem,    0.95rem + 0.40vw, 1.125rem);  /* leads / hero sub */
  --text-lg:  clamp(1.15rem, 1.02rem + 0.65vw, 1.375rem);
  --text-xl:  clamp(1.35rem, 1.12rem + 1.05vw, 1.75rem);
  --text-2xl: clamp(1.7rem,  1.34rem + 1.70vw, 2.25rem);
}
/* Comfortable reading rhythm on phones. */
@media (max-width: 600px) {
  .sc-lead, .sc-hero__sub, .sc-pb__intro { line-height: 1.6; }
  .sc-section { padding-block: clamp(2.75rem, 11vw, 3.75rem); }
  .sc-hero__actions { width: 100%; }
  .sc-hero__actions .sc-btn { flex: 1 1 auto; justify-content: center; }
}
/* Keep tap targets >= 44px on touch devices. */
@media (max-width: 700px) {
  .sc-btn { min-height: 46px; }
  .sc-hd__mlink { padding-block: 15px; }
  .sc-hero__scroll { bottom: 40px; }
  .sc-hero__tagline { bottom: 84px; }
}

/* =====================================================================
   v4 — 10-item header menu (added Consultoria + Facilities)
   Tighten the desktop nav so all ten items fit, and switch to the
   mobile burger a little earlier so nothing crowds the logo.
   ===================================================================== */
@media (min-width: 1025px) {
  .sc-hd__nav { gap: clamp(.35rem, 1vw, 1rem); }
  .sc-hd__link { font-size: 0.86rem; letter-spacing: .005em; }
}
/* Below 1180px the ten items get tight next to the logo + PT|EN — use the
   mobile menu instead (overrides the old 1080px breakpoint). */
@media (max-width: 1180px) {
  .sc-hd__nav { display: none; }
  .sc-hd__burger { display: inline-flex; }
  .sc-hd__mobile { display: flex; }
}
/* Mobile menu must fit ten links when open. */
.sc-hd__mobile.is-open { max-height: 760px; }
/* Single column on the smallest screens so nothing feels cramped. */
@media (max-width: 560px) {
  .sc-about__grid, .sc-areas__grid, .sc-fleet { grid-template-columns: 1fr; }
  .sc-gprev__strip { grid-template-columns: 1fr 1fr; }
  .sc-statband__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .sc-ft__top { grid-template-columns: 1fr; }
  .sc-contact__cta-actions .sc-btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   v3.1 — Reading column aligned LEFT (was centred and looked off)
   The narrow reading column now shares the same 1200px box as the page
   banner, so the body copy lines up with the page title's left edge.
   Each text block is capped at a comfortable measure and left-aligned.
   ===================================================================== */
.sc-container--narrow { max-width: var(--container); }
.sc-container--narrow > * { max-width: none; margin-inline: 0; }
/* Body copy spans the full content width (the same 1200px box as everything
   else), flush-left at the page gutter. */
.sc-prose__p,
.sc-arearow__text,
.sc-pb__intro { max-width: none; }

/* Page banner: keep the same 1200 box as every other section and left-align
   its content, so the big page title lines up with the body and the cards
   below (was a centred 820 box that drifted right on wide screens). */
.sc-pb__inner { max-width: var(--container); }
.sc-pb__inner > * { max-width: none; margin-inline: 0; }

/* =====================================================================
   v3.2 — Video facade (no Vimeo branding until played)
   The resting state is a clean poster + a teal play button; the Vimeo
   player only loads on click, and then with its chrome stripped down.
   ===================================================================== */
.sc-video__facade {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--ink-900); -webkit-appearance: none; appearance: none;
}
.sc-video__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* subtle darkening so the play button reads on any still */
.sc-video__facade::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,20,19,.18), rgba(14,20,19,.42));
  transition: background var(--dur-micro) var(--ease-out);
}
.sc-video__facade:hover::after { background: linear-gradient(180deg, rgba(14,20,19,.10), rgba(14,20,19,.34)); }
.sc-video__play {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--fg-on-accent);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.sc-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.sc-video__facade:hover .sc-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--primary-hover); }
.sc-video__facade:active .sc-video__play { transform: translate(-50%, -50%) scale(.96); }
.sc-video__facade:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
@media (max-width: 600px) {
  .sc-video__play { width: 60px; height: 60px; }
  .sc-video__play svg { width: 24px; height: 24px; }
}

/* =====================================================================
   v3.3 — Footer "cookie settings" link (re-opens the consent banner)
   ===================================================================== */
.sc-ft__bottom { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.sc-ft__cookies {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: inherit; opacity: .72; font-family: var(--font-body); font-size: var(--text-sm);
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.sc-ft__cookies:hover { opacity: 1; color: var(--brand-teal); }

/* =====================================================================
   v3.4 — Bigger logo + type rebalanced for 100% zoom, smaller on phones
   ===================================================================== */
/* Logo a touch larger so it holds its own next to the headings. */
.sc-hd__logo img { height: 50px; }
.sc-ft__logo { height: 46px; }

/* Trim the big display sizes so nothing dwarfs the logo at 100% zoom,
   and let everything scale further DOWN on small screens. */
:root {
  --text-3xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.8rem);
  --text-4xl: clamp(2.1rem,  1.60rem + 2.4vw, 3.2rem);
}
.sc-hero__h1    { font-size: clamp(1.6rem,  1.20rem + 1.9vw, 2.7rem); }
.sc-pb__title   { font-size: clamp(1.55rem, 1.20rem + 1.7vw, 2.55rem); }
.sc-about__lead { font-size: clamp(1.12rem, 0.98rem + 0.8vw, 1.62rem); }

@media (max-width: 700px) {
  .sc-hd__logo img { height: 40px; }
}
@media (max-width: 560px) {
  .sc-hd__logo img { height: 36px; }
  .sc-ft__logo { height: 40px; }
}