/* Cántaro — calm layer. Load AFTER site.css, experience.css, mobile.css, cinema.css.
   Scoped to body.calm so it can be added to a page with one <link> plus the class.
   One type scale, one section rhythm, gold as accent only, no auto-motion. */

body.calm{
  --paper:#f7f5f0;--tint:#eeebe3;--ink:#101e3b;--muted:#585f6d;--line:#dcd8cd;
  --accent:#6f5a24;--gold:#dfc589;
  --gutter:clamp(20px,5vw,64px);--sec:clamp(72px,9vw,120px);
  --fs-h1:clamp(40px,5.2vw,68px);--fs-h2:clamp(30px,3.4vw,44px);--fs-h3:22px;--fs-body:17px;--fs-small:14px;
  background:var(--paper);font-size:var(--fs-body);line-height:1.65;
}
body.calm *,body.calm *:before,body.calm *:after{animation:none!important}
body.calm .wrap{width:min(1200px,calc(100% - 2*var(--gutter)))}
body.calm p{color:var(--muted)}
body.calm img{transition:none}

/* ---------- type scale: one display size, one section size, one card size ---------- */
body.calm h1,body.calm h2{font-weight:400;letter-spacing:-.025em}
body.calm h1{font-size:var(--fs-h1);line-height:1.06}
body.calm h2{font-size:var(--fs-h2);line-height:1.12}
body.calm h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em}
body.calm h1 em,body.calm h2 em{color:var(--accent);font-style:italic}
body.calm .calm-lead,body.calm .contact-grid>div>p{font-size:19px;line-height:1.6;max-width:560px}
body.calm small,body.calm .small{font-size:var(--fs-small)}

/* eyebrows: sentence case, one weight, no rule */
body.calm .eyebrow{font-size:var(--fs-small);letter-spacing:.01em;text-transform:none;font-weight:500;color:var(--accent);margin-bottom:16px}
body.calm .eyebrow:before{display:none}

/* ---------- top strip + nav ---------- */
body.calm .demo-bar{background:transparent;border-bottom:1px solid var(--line);padding:8px var(--gutter);font-size:12px;letter-spacing:0;color:#515868;justify-content:center;gap:16px;flex-wrap:wrap}
body.calm .demo-bar a{min-height:24px;display:inline-flex;align-items:center}
body.calm .site-nav{height:88px;border-bottom:0}
body.calm .nav-links{gap:32px;font-size:15px}
body.calm .nav-links a,body.calm .nav-right>a:not(.btn){min-height:44px;display:inline-flex;align-items:center}
body.calm .nav-right{gap:20px;font-size:14px}
body.calm .btn{font-size:15px;font-weight:500;min-height:48px;padding:13px 26px;border-radius:2px;gap:0;box-shadow:none;transition:background .2s}
body.calm .btn:hover{transform:none;background:#25345a}
body.calm .btn.small{min-height:44px;padding:10px 20px;font-size:14px}
body.calm .btn.light{background:var(--gold);color:var(--ink);border-color:var(--gold)}
body.calm .btn.light:hover{background:#ead6a6;border-color:#ead6a6}
body.calm .text-link{font-size:15px;font-weight:500;min-height:44px;align-items:center;gap:0;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
body.calm .text-link:hover{color:var(--accent)}
body.calm :focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px #fff}

/* ---------- hero (index): still, text-led ---------- */
body.calm .calm-hero{padding:clamp(48px,7vw,104px) 0 0}
body.calm .calm-hero h1{max-width:12em;margin-bottom:24px}
body.calm .calm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;margin-top:36px}
body.calm .calm-hero-image{width:100%;height:clamp(240px,34vw,460px);object-fit:cover;object-position:center 40%;margin-top:clamp(48px,6vw,80px);background:var(--ink)}

/* ---------- logos: static, quiet ---------- */
body.calm .logo-section{padding:var(--sec) 0 0;border-bottom:0;overflow:visible}
body.calm .logo-heading{padding:0;width:min(1200px,calc(100% - 2*var(--gutter)));margin:0 auto;font-size:var(--fs-small);justify-content:flex-start;color:var(--muted)}
body.calm .logo-window{overflow:visible;margin:28px auto 0;width:min(1200px,calc(100% - 2*var(--gutter)))}
body.calm .logo-track{width:100%;display:block}
body.calm .logo-set{width:100%;flex-wrap:wrap;justify-content:space-between;gap:28px 32px;padding:0}
body.calm .logo-set[aria-hidden=true]{display:none}
body.calm .logo-set img{width:96px;height:48px;filter:grayscale(1);opacity:.7}

/* ---------- section rhythm ---------- */
body.calm .industry-feature,body.calm .visual-services,body.calm .group-experience,body.calm .sector-offering,body.calm .sector-brief,body.calm .section{padding-top:var(--sec);padding-bottom:0}
body.calm .contact-section{padding:var(--sec) 0;margin-top:var(--sec);background:var(--tint)}
body.calm .visual-heading{margin-bottom:40px}
body.calm .visual-heading h2{font-size:var(--fs-h2);margin:0}

/* industry feature */
body.calm .industry-feature{grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
body.calm .industry-feature-image{height:540px;margin:0;background:none;overflow:visible;display:flex;flex-direction:column}
body.calm .industry-feature-image>img{height:100%;min-height:0;flex:1;object-position:68% center;transform:none!important}
body.calm .industry-feature-image figcaption{font-size:13px;color:var(--muted);padding-top:10px;line-height:1.5}
body.calm .industry-feature-copy h2{font-size:var(--fs-h2);line-height:1.12;margin-bottom:0}
body.calm .industry-feature-copy>p{font-size:var(--fs-body);line-height:1.65;margin:20px 0 0}
body.calm .industry-services{display:block;margin:24px 0 28px;font-size:16px;color:var(--ink)}
body.calm .industry-services>span{display:block;border:0;padding:4px 0;font-size:16px;color:var(--ink)}
body.calm .industry-feature-copy>.text-link{margin-top:0}

/* service cards: caption under the picture, no overlay */
body.calm .visual-cards{column-gap:clamp(20px,2.4vw,32px);row-gap:0}
body.calm .visual-card{aspect-ratio:auto;background:none;color:var(--ink)}
body.calm .visual-card:after{display:none}
body.calm .visual-card>img{height:auto;aspect-ratio:4/3;transform:none!important}
body.calm .visual-card>div{position:static;padding-top:16px;display:block}
body.calm .visual-card h3{color:var(--ink);font-size:var(--fs-h3);font-weight:400;font-family:var(--serif)}
body.calm .visual-card:hover h3{color:var(--accent)}
body.calm .visual-service-links{gap:0 clamp(20px,2.4vw,32px);padding-top:24px}
body.calm .visual-service-links>a{font-size:16px;min-height:48px;align-items:center;border-bottom:1px solid var(--line)}
body.calm .visual-service-links>a:hover{color:var(--accent)}

/* production story: the one dark moment */
body.calm .production-story{margin-top:var(--sec)}
body.calm .production-story>img{min-height:480px;max-height:620px}
body.calm .production-story>div{padding:clamp(48px,8vw,104px) clamp(28px,8vw,112px)}
body.calm .production-story h2{font-size:var(--fs-h2);line-height:1.15;margin:0 0 20px;color:#fff}
body.calm .production-story h2 em{color:var(--gold)}
body.calm .production-story p{font-size:var(--fs-body);color:#d3d8e4;max-width:420px;margin-bottom:28px}
body.calm .production-story .text-link{color:#fff}
body.calm .production-story .text-link:hover{color:var(--gold)}

/* group */
body.calm .group-pictures{gap:clamp(20px,2.4vw,32px)}
body.calm .group-photo{height:auto;aspect-ratio:4/3}
body.calm .group-photo>img:first-child{width:100%;height:100%;object-fit:cover}
body.calm .group-caption{padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
body.calm .group-caption p{font-size:16px}
body.calm .group-caption a{min-height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* ---------- contact ---------- */
body.calm .contact-grid{gap:clamp(40px,7vw,100px)}
body.calm .contact-grid h2{margin-bottom:20px}
body.calm .contact-note{border-top:0;padding-top:0;margin-top:28px;font-size:var(--fs-small)}
body.calm .contact-note .small{margin-top:8px!important;color:var(--muted)}
body.calm form#brief-form{background:#fff;padding:clamp(20px,3vw,40px);border-radius:2px}
body.calm .field{font-size:var(--fs-small);font-weight:500}
body.calm input,body.calm select,body.calm textarea{font-size:16px;min-height:48px;background:#f3f1ea;border-color:#dcd8cd}
body.calm .check{font-size:var(--fs-small)}

/* ---------- gateway: two quiet text rows ---------- */
body.calm .client-gateway{background:transparent;color:var(--ink);padding:var(--sec) 0}
body.calm .client-gateway h2{color:var(--ink);font-size:var(--fs-h2);margin-bottom:32px}
body.calm .gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
body.calm .gateway-card{display:block;background:none;border:0;border-top:1px solid var(--ink);border-radius:0;padding:24px 0 8px;min-height:44px;color:var(--ink)}
body.calm .gateway-card h3{font:var(--fs-h3)/1.3 var(--serif);color:var(--ink);margin-bottom:8px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:transparent}
body.calm .gateway-card:hover h3{text-decoration-color:currentColor}
body.calm .gateway-card p{color:var(--muted);font-size:16px}
body.calm .gateway-card small{display:block;margin-top:8px;color:var(--muted);font-size:13px}

/* ---------- footer ---------- */
body.calm .signature-footer{border-top:1px solid var(--line);background:var(--paper)}
body.calm .signature-footer{padding:0}
body.calm .signature-footer .wrap{padding-top:40px;padding-bottom:8px}
body.calm .signature-main{padding-top:0;margin-top:0}
body.calm .signature-footer a{min-height:44px;display:inline-flex;align-items:center}
body.calm .signature-brand{min-height:0}
body.calm .signature-nav{gap:8px 28px;font-size:15px}
body.calm .signature-social a{min-height:44px;min-width:44px;border:0;background:none;justify-content:center}
body.calm .signature-social .social-label{font-size:12px}
body.calm .signature-bottom{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
body.calm .powered-strip{background:var(--ink);padding:16px var(--gutter);display:flex;justify-content:center}
body.calm .powered-by{display:inline-flex;align-items:center;gap:14px;min-height:44px;color:#c7cedd;font-size:13px;letter-spacing:.02em}
body.calm .powered-by img{height:32px;width:auto;opacity:.9}
body.calm .powered-by:hover span{color:#fff}

/* ---------- assistant: a small quiet button, label stays for screen readers ---------- */
body.calm .assistant-launch{padding:0;width:48px;height:48px;justify-content:center;border-radius:50%;box-shadow:none;border:1px solid #3a4a73;right:20px;bottom:20px;opacity:.92}
body.calm .assistant-launch .assistant-launch-label,body.calm .assistant-launch>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.calm .assistant-launch .chat-mark{border:0;width:28px;height:28px}
body.calm .assistant-launch .chat-mark img{width:22px;height:auto}
body.calm .assistant-launch:hover,body.calm .assistant-launch:focus-visible{opacity:1}

/* ---------- sector page ---------- */
body.calm .sector-opening{min-height:0;padding:36px 0 clamp(56px,7vw,96px);background:var(--ink)}
body.calm .sector-opening:after{background:linear-gradient(90deg,#101e3bf2,#101e3bb0 55%,#101e3b66)}
body.calm .sector-opening>img{opacity:.85}
body.calm .sector-opening .eyebrow{color:var(--gold)}
body.calm .sector-opening h1{font-size:var(--fs-h1);line-height:1.08;margin-top:8px;max-width:11em}
body.calm .sector-opening h1 em{color:var(--gold)}
body.calm .sector-opening p{font-size:19px;max-width:520px;margin:24px 0 32px;color:#e3e7f0}
body.calm .sector-opening small{font-size:13px;margin-top:40px;color:#cdd4e3;max-width:none}
body.calm .sector-back{font-size:15px;margin-bottom:clamp(36px,5vw,72px)}
body.calm .sector-offering h2,body.calm .sector-brief h2{font-size:var(--fs-h2);margin-bottom:40px}
body.calm .sector-brief h2{margin-bottom:0}
body.calm .sector-service-grid{gap:clamp(36px,5vw,64px) clamp(20px,2.4vw,32px)}
body.calm .sector-service-grid article>img{height:auto;aspect-ratio:3/2}
body.calm .sector-service-grid article>div{padding-top:16px}
body.calm .sector-service-grid h3{font:var(--fs-h3)/1.3 var(--serif);margin-bottom:8px}
body.calm .sector-service-grid p{font-size:16px;line-height:1.65}
body.calm .sector-brief{gap:clamp(24px,6vw,80px)}
body.calm .sector-brief li{font-size:16px;padding:14px 0 14px 4px;border-bottom:1px solid var(--line)}
body.calm .sector-brief ol+p{font-size:var(--fs-small);margin-top:24px}

/* ---------- service detail page (logistica) ---------- */
body.calm .detail-hero{padding-top:clamp(40px,6vw,80px);padding-bottom:0}
body.calm .detail-hero h1{font-size:var(--fs-h1);margin:16px 0 20px}
body.calm .detail-hero p{font-size:19px;max-width:560px}
body.calm .detail-hero .actions{margin-top:32px}
body.calm .detail-image{width:100%;height:clamp(240px,34vw,460px);object-fit:cover;margin-top:clamp(40px,5vw,72px)}
body.calm .calm-list{list-style:none;margin:32px 0 0;padding:0;max-width:640px}
body.calm .calm-list li{font:var(--fs-h3)/1.3 var(--serif);padding:18px 0;border-top:1px solid var(--line)}
body.calm .calm-list li:last-child{border-bottom:1px solid var(--line)}

body.calm .section>h2{margin-bottom:20px}

/* ---------- mobile ---------- */
@media(max-width:900px){
  body.calm .industry-feature{grid-template-columns:1fr}
  body.calm .industry-feature-image{height:auto}
  body.calm .industry-feature-image>img{height:auto;aspect-ratio:4/3;flex:none}
  body.calm .gateway-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  body.calm{--fs-body:17px}
  body.calm .demo-bar{justify-content:flex-start;padding:8px var(--gutter)}
  body.calm .site-nav{height:72px}
  body.calm .calm-actions{flex-direction:column;align-items:flex-start;gap:4px}
  body.calm .calm-actions .btn{width:100%}
  body.calm .production-story{grid-template-columns:1fr}
  body.calm .production-story>img{min-height:0;height:320px}
  body.calm .production-story p{max-width:none}
  body.calm .group-pictures,body.calm .visual-service-links{grid-template-columns:1fr}
  body.calm .visual-cards{grid-template-columns:1fr}
  body.calm .sector-brief{grid-template-columns:1fr}
  body.calm .logo-set{gap:20px 36px}
  body.calm .logo-set img{width:80px;height:40px}
  body.calm .powered-strip{padding:12px var(--gutter)}
}
@media(prefers-reduced-motion:reduce){
  body.calm *,body.calm *:before,body.calm *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Public request navigation remains readable at narrow widths. */
body.calm .signature-nav{flex-wrap:wrap;min-width:0}
/* Text is readable immediately, including while scroll effects initialize. */
body.calm .reveal-ready{opacity:1!important;transform:none!important}
