:root{
 --canvas:#F6F4EF; --navy:#071B33; --slate:#68788A; --stone:#E8E6E1; --oxblood:#6E1F2A; --ink:#17202A;
 --serif:"Tiempos Text","Tiempos",Georgia,"Times New Roman",serif;
 --sans:"Söhne","Sohne","Helvetica Neue",Arial,sans-serif;
 --max:1340px; --gutter:clamp(24px,6vw,108px);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.62}
a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--oxblood);outline-offset:4px}
img{max-width:100%;display:block}
.wrap{width:min(calc(100% - 2*var(--gutter)),var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(246,244,239,.96);border-bottom:1px solid rgba(104,120,138,.15);backdrop-filter:blur(8px)}
.nav{height:82px;display:flex;align-items:center;gap:clamp(28px,3.2vw,58px)}
.nav-logo{width:45px;height:45px;margin-right:auto}.nav-logo img{width:100%;height:100%}
.nav a:not(.nav-logo){font-size:14px;white-space:nowrap;position:relative}
.nav a.active:after,.nav a:not(.nav-logo):hover:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--oxblood)}
.menu-btn,.mobile-panel{display:none}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);font-weight:600}
h1,h2,.display{font-family:var(--serif);font-weight:400;color:var(--navy);line-height:1.08;margin:0}
h1{font-size:clamp(42px,5vw,68px);max-width:920px} h2{font-size:clamp(31px,3.2vw,46px)}
.lead{font-size:clamp(19px,1.55vw,23px);max-width:760px;color:var(--navy)}
.copy{max-width:760px}.copy p{margin:.65em 0}
.section{padding:clamp(90px,11vw,170px) 0}.section-tight{padding:clamp(70px,8vw,120px) 0}
.rule{border-top:1px solid rgba(104,120,138,.35)}
.cta{display:inline-flex;gap:10px;align-items:center;color:var(--oxblood);font-size:16px;font-weight:500;margin-top:22px}
.hero{min-height:72vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-copy{position:relative;z-index:3;width:min(58%,760px)}
.photo-field{position:absolute;inset:0 0 0 auto;width:58%;z-index:1;background-size:cover;background-position:center}
.photo-field:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--canvas) 0%,rgba(246,244,239,.96) 8%,rgba(246,244,239,.55) 28%,rgba(246,244,239,0) 62%)}
.sequence{display:flex;align-items:center;gap:clamp(10px,2vw,28px);font-family:var(--serif);font-size:clamp(22px,2.4vw,34px);color:var(--navy);flex-wrap:wrap}
.sequence .arrow{color:var(--oxblood);font-family:var(--sans);font-size:.7em}
.disclosure-list{border-top:1px solid rgba(104,120,138,.35)}
.disclosure{border-bottom:1px solid rgba(104,120,138,.35)}
.disclosure button{width:100%;border:0;background:none;padding:25px 0;text-align:left;font:500 21px/1.3 var(--sans);color:var(--navy);display:flex;justify-content:space-between;gap:24px;cursor:pointer}
.disclosure button:after{content:"+";color:var(--oxblood);font-size:26px;font-weight:300}.disclosure.open button:after{content:"–"}
.disclosure-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}.disclosure-content>div{overflow:hidden}
.disclosure.open .disclosure-content{grid-template-rows:1fr}.disclosure-content .inner{padding:0 0 28px;max-width:820px}
.surface{color:var(--slate);font-size:17px;margin:0 0 12px}.includes{font-size:15px;color:var(--slate);margin-top:16px}
.four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(104,120,138,.35);border-bottom:1px solid rgba(104,120,138,.35)}
.four-grid>div{padding:30px 24px;border-right:1px solid rgba(104,120,138,.25)}.four-grid>div:last-child{border-right:0}
.four-grid .num{color:var(--oxblood);font-size:12px;letter-spacing:.12em}.four-grid h3{font:500 19px/1.25 var(--sans);color:var(--navy);margin:12px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,120px);align-items:start}
.soft{background:rgba(232,230,225,.38)}
.footer{padding:46px 0;border-top:1px solid rgba(104,120,138,.3);font-size:13px;color:var(--slate)}
.footer .wrap{display:flex;justify-content:space-between;gap:30px}
.chess-field{position:relative;min-height:620px;overflow:hidden}
.chess-image{position:absolute;right:0;top:0;width:55%;height:100%;background-size:cover;background-position:center}
.chess-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--canvas),rgba(246,244,239,.45) 30%,rgba(246,244,239,0) 65%)}
.chess-copy{position:relative;z-index:2;width:54%;padding-top:40px}
.ocean-hero{min-height:80vh;position:relative;display:flex;align-items:center;overflow:hidden}
.ocean-image{position:absolute;right:0;top:0;width:65%;height:100%;background-size:cover;background-position:center}
.ocean-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--canvas) 0%,rgba(246,244,239,.9) 15%,rgba(246,244,239,.25) 50%,transparent 75%)}
.ocean-copy{position:relative;z-index:2;width:52%}
.ocean-secondary{position:relative;min-height:620px;overflow:hidden}.ocean-secondary .image{position:absolute;left:0;bottom:0;width:55%;height:100%;background-size:cover;background-position:center}
.ocean-secondary .image:after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,var(--canvas),rgba(246,244,239,.55) 28%,transparent 66%)}
.ocean-secondary .content{position:relative;z-index:2;margin-left:auto;width:50%}
.process{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:40px}.process span{padding:10px 0;color:var(--navy);font-size:14px;letter-spacing:.08em;text-transform:uppercase}.process b{color:var(--oxblood);font-weight:400}
.form-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(50px,8vw,120px)}
label{display:block;font-size:13px;color:var(--slate);margin-bottom:8px}.field{margin-bottom:28px}input,textarea{width:100%;border:0;border-bottom:1px solid var(--slate);background:transparent;padding:8px 0 12px;font:18px var(--sans);color:var(--ink)}textarea{min-height:150px;resize:vertical;border:1px solid rgba(104,120,138,.55);padding:14px}
.submit{border:0;background:none;color:var(--oxblood);font:500 16px var(--sans);padding:8px 0;cursor:pointer}.success{display:none;font-family:var(--serif);font-size:30px;color:var(--navy)}
.home{min-height:100svh;display:grid;place-items:center;text-align:center;padding:45px var(--gutter)}
.home-inner{display:flex;flex-direction:column;align-items:center}
.home-seal{width:clamp(210px,24vw,330px);height:auto;margin-bottom:42px;filter:drop-shadow(3px 5px 6px rgba(7,27,51,.12))}
.home .brand{font-size:13px;letter-spacing:.22em;color:var(--navy);margin-bottom:25px}
.home h1{font-size:clamp(38px,4.6vw,64px);max-width:1050px}.home h1 span{display:block}
.home .domains{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin:28px 0 20px}
.enter{color:var(--oxblood);font-size:16px;padding:12px 18px}
.entering .home-inner{opacity:0;transform:translateY(-8px);transition:.45s ease}
@media(max-width:900px){
 body{font-size:17px}.nav{height:70px}.nav>a:not(.nav-logo){display:none}.menu-btn{display:block;border:0;background:none;font:15px var(--sans);color:var(--navy);cursor:pointer}
 .mobile-panel{position:fixed;inset:70px 0 0;background:var(--canvas);z-index:40;padding:40px var(--gutter);flex-direction:column;gap:24px}.mobile-panel.open{display:flex}.mobile-panel a{font:32px/1.2 var(--serif);color:var(--navy)}
 .hero{min-height:auto;padding:100px 0 340px}.hero-copy{width:100%}.photo-field{top:auto;width:100%;height:380px;bottom:0}.photo-field:after{background:linear-gradient(180deg,var(--canvas),rgba(246,244,239,.35) 35%,transparent 75%)}
 .split,.form-grid{grid-template-columns:1fr}.four-grid{grid-template-columns:1fr 1fr}.four-grid>div:nth-child(2){border-right:0}.four-grid>div{border-bottom:1px solid rgba(104,120,138,.25)}
 .chess-field{padding-bottom:430px}.chess-copy{width:100%}.chess-image{top:auto;bottom:0;width:100%;height:460px}.chess-image:after{background:linear-gradient(180deg,var(--canvas),rgba(246,244,239,.25) 45%,transparent)}
 .ocean-hero{min-height:auto;padding:100px 0 390px}.ocean-copy{width:100%}.ocean-image{top:auto;bottom:0;width:100%;height:430px}.ocean-image:after{background:linear-gradient(180deg,var(--canvas),rgba(246,244,239,.25) 45%,transparent)}
 .ocean-secondary{padding-bottom:390px}.ocean-secondary .content{width:100%}.ocean-secondary .image{width:100%;height:420px}.ocean-secondary .image:after{background:linear-gradient(180deg,var(--canvas),rgba(246,244,239,.2) 45%,transparent)}
}
@media(max-width:560px){
 .four-grid{grid-template-columns:1fr}.four-grid>div{border-right:0}.home .domains{max-width:300px;line-height:1.8}.footer .wrap{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* TASK 5 — RESPONSIVE ART DIRECTION
   Desktop files remain the default. Tablet/mobile use independently prepared crops. */
@media (max-width:1200px){
 .photo-field{background-image:url('/assets/images/page2_ordinen_international_chamber_tablet.webp')!important}
 .chess-image{background-image:url('/assets/images/page4_small_state_statecraft_chess_tablet.webp')!important}
 .ocean-image{background-image:url('/assets/images/page5_oceans_hero_ship_tablet.webp')!important}
 .ocean-secondary .image{background-image:url('/assets/images/page5_oceans_secondary_aquaculture_tablet.webp')!important}
}
@media (max-width:600px){
 .photo-field{background-image:url('/assets/images/page2_ordinen_international_chamber_mobile.webp')!important}
 .chess-image{background-image:url('/assets/images/page4_small_state_statecraft_chess_mobile.webp')!important}
 .ocean-image{background-image:url('/assets/images/page5_oceans_hero_ship_mobile.webp')!important}
 .ocean-secondary .image{background-image:url('/assets/images/page5_oceans_secondary_aquaculture_mobile.webp')!important}
}

/* Task 5 refinements */
@media (min-width:901px){
 .nav{justify-content:flex-end}
 .nav-logo{margin-right:auto}
 .hero-copy{padding:40px 0}
}
@media (max-width:900px){
 .home{padding-top:36px;padding-bottom:36px}
 .home-seal{margin-bottom:34px}
 .home h1{line-height:1.12}
 .section{padding-top:96px;padding-bottom:96px}
 .section-tight{padding-top:76px;padding-bottom:76px}
 .mobile-panel{overflow:auto}
 .mobile-panel a{padding:5px 0}
}
@media (max-width:560px){
 h1{font-size:clamp(38px,11vw,48px)}
 h2{font-size:clamp(29px,8vw,38px)}
 .home h1{font-size:clamp(35px,9.5vw,44px)}
 .home .brand{font-size:11px}
 .hero{padding-bottom:315px}
 .photo-field{height:350px}
 .chess-field{padding-bottom:390px}
 .chess-image{height:420px}
 .ocean-hero{padding-bottom:350px}
 .ocean-image{height:390px}
 .ocean-secondary{padding-bottom:365px}
 .ocean-secondary .image{height:395px}
 .disclosure button{font-size:19px;padding:22px 0}
 .sequence{gap:8px 13px}
}

.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{margin-top:22px;max-width:680px;font:400 24px/1.4 var(--serif);color:var(--navy)}
.form-status.error{font-family:var(--sans);font-size:15px;color:var(--oxblood)}
.form-status.success{font-size:30px}
button:disabled{opacity:.55;cursor:wait}
@media print{.site-header,.mobile-panel,.cta,.enter,.submit{display:none!important}body{background:#fff;color:#111}.section{padding:35px 0}}

/* DESKTOP REFINEMENT PASS — live Safari review, 3 Sep 2026 */
@media (min-width:901px){
  /* Identity: retain restraint, but make the seal legible as the navigation anchor. */
  .nav{height:88px}
  .nav-logo{width:58px;height:58px}

  /* Desktop display hierarchy: preserve authority without forcing awkward line breaks. */
  h1{font-size:clamp(46px,4.25vw,62px);max-width:980px}
  .lead{font-size:clamp(19px,1.4vw,22px)}

  /* Vertical rhythm: generous, but no empty viewport-sized bands between ideas. */
  .section{padding:clamp(82px,7vw,112px) 0}
  .section-tight{padding:clamp(66px,5.5vw,88px) 0}

  /* Home: stronger seal, calmer proposition, tighter business-card composition. */
  .home{padding-top:34px;padding-bottom:34px}
  .home-seal{width:clamp(250px,20vw,360px);margin-bottom:32px}
  .home .brand{margin-bottom:20px}
  .home h1{font-size:clamp(42px,3.85vw,56px);max-width:1220px;line-height:1.08}
  .home h1 span{white-space:nowrap}
  .home .domains{margin:24px 0 14px}

  /* Internal photographic openings. */
  .hero{min-height:64vh}
  .hero-copy{padding:26px 0}
  .chess-field{min-height:570px}
  .chess-copy{padding-top:12px}
  .ocean-hero{min-height:70vh}

  /* Contact: keep invitation and form in one coherent editorial movement. */
  body:has(#contact-form) main>.section:first-child{padding-bottom:46px}
  body:has(#contact-form) main>.section-tight{padding-top:34px;padding-bottom:82px}
  body:has(#contact-form) main>.section.soft{padding-top:82px;padding-bottom:82px}
}

/* Wide desktop: keep the Home proposition as the intended two complete lines. */
@media (min-width:1100px){
  .home h1{font-size:clamp(42px,3.55vw,54px)}
}