/* InoWood Norge — GeneratePress. Design tokens and section styles.
   Paste into Customizer > Additional CSS, or a child theme stylesheet. */

:root{
  --ino-bg:#F5F3EE; --ino-ink:#171A17; --ino-green:#264A3A; --ino-wood:#A3734F;
  --ino-white:#FFFFFF; --ino-line:#E2DED4; --ino-muted:#5C6059; --ino-body:#3A3E39;
  --ino-gutter:clamp(20px,4.1vw,80px);
  --ino-max:1760px;
  --ino-section:clamp(64px,7vw,128px);
}

body{background:var(--ino-bg);color:var(--ino-ink);font-family:Manrope,system-ui,sans-serif;font-size:17px;line-height:1.6;}
@media (min-width:1024px){body{font-size:18px;}}
body i,body em{font-style:normal;}
a{color:var(--ino-green);text-decoration:none;}
a:hover{color:var(--ino-wood);}
img{max-width:100%;height:auto;}

/* ---------- layout helpers ---------- */
.ino-section{padding:var(--ino-section) var(--ino-gutter) 0;}
.ino-section--divided{border-top:1px solid var(--ino-line);margin-top:var(--ino-section);}
.ino-inner{max-width:var(--ino-max);margin:0 auto;}
.ino-lead{max-width:680px;color:var(--ino-body);text-wrap:pretty;}
.ino-eyebrow{color:var(--ino-wood);font-weight:600;font-size:17px;margin:0 0 10px;}
.ino-h1{font-size:clamp(30px,2.8vw,50px);line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:0 0 20px;}
.ino-h2{font-size:clamp(26px,2.5vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:0 0 22px;}
.ino-h3{font-size:clamp(21px,1.5vw,27px);line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;}
.ino-grid{display:grid;gap:clamp(24px,2.4vw,44px);}
.ino-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.ino-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.ino-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}

/* ---------- buttons ---------- */
.ino-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font-size:17px;font-weight:600;border-radius:0;border:0;}
.ino-btn--green{background:var(--ino-green);color:var(--ino-bg);}
.ino-btn--green:hover{background:var(--ino-ink);color:var(--ino-bg);}
.ino-btn--light{background:var(--ino-bg);color:var(--ino-ink);}
.ino-btn--light:hover{background:var(--ino-wood);color:var(--ino-bg);}
.ino-btn--outline{border:1px solid var(--ino-ink);color:var(--ino-ink);background:transparent;}
.ino-btn--outline:hover{background:var(--ino-ink);color:var(--ino-bg);}
.ino-link{font-weight:600;border-bottom:1px solid #C9C3B6;padding-bottom:3px;}

/* ---------- header ---------- */
.main-navigation .main-nav ul li a{font-weight:600;font-size:17px;}
.inside-header{max-width:var(--ino-max);padding:22px var(--ino-gutter);min-height:92px;align-items:center;}
.site-logo, .ino-logo{display:flex;align-items:baseline;gap:12px;}
.ino-logo__name{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ino-ink);}
.ino-logo__country{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ino-green);}
.main-navigation{margin-left:80px;}
.main-navigation .main-nav ul li{margin-right:40px;}
.ino-tel a{color:var(--ino-green);font-weight:600;white-space:nowrap;}
.main-navigation .main-nav ul li.ino-btn--green a{background:var(--ino-green);color:var(--ino-bg);padding:0 26px;min-height:48px;display:inline-flex;align-items:center;}

/* ---------- hero carousel ---------- */
.ino-hero{position:relative;}
.ino-hero__stage{position:relative;width:100%;height:clamp(380px,38vw,760px);overflow:hidden;background:var(--ino-ink);}
.ino-hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms ease;}
.ino-hero__slide.is-active{opacity:1;}
.ino-hero__overlay{position:absolute;left:0;right:0;bottom:0;pointer-events:none;}
.ino-hero__row{max-width:var(--ino-max);margin:0 auto;padding:0 var(--ino-gutter) clamp(28px,3.5vw,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:32px;}
.ino-hero__panel{pointer-events:auto;background:var(--ino-ink);color:var(--ino-bg);padding:clamp(28px,2.6vw,52px);max-width:720px;}
.ino-hero__panel h1{font-size:clamp(30px,2.9vw,54px);line-height:1.06;font-weight:700;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance;}
.ino-hero__panel p{margin:0 0 26px;max-width:680px;color:#D8D9D5;}
.ino-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;}
.ino-hero__actions .ino-link{color:var(--ino-bg);border-bottom-color:#6F8C7F;}
.ino-hero__nav{pointer-events:auto;display:flex;align-items:center;gap:16px;padding-bottom:6px;}
.ino-hero__count{font-size:17px;font-weight:600;color:var(--ino-bg);white-space:nowrap;}
.ino-arrow{width:56px;height:56px;border:1px solid #C9C3B6;background:transparent;color:var(--ino-ink);font-size:19px;font-weight:600;cursor:pointer;}
.ino-arrow:hover{border-color:var(--ino-ink);}
.ino-hero__nav .ino-arrow{border-color:rgba(245,243,238,.5);background:rgba(23,26,23,.55);color:var(--ino-bg);}
.ino-hero__mobile{display:none;}
@media (max-width:900px){
  /* Same markup, stacked: the panel drops under the image instead of over it,
     so the page keeps exactly one H1 in the DOM. */
  .ino-hero__overlay{position:static;}
  .ino-hero__row{display:block;padding:0;}
  .ino-hero__panel{max-width:none;padding:28px 20px 32px;}
  .ino-hero__panel h1{font-size:31px;line-height:1.08;margin:0 0 16px;}
  .ino-hero__panel p{margin:0 0 24px;}
  .ino-hero__actions{flex-direction:column;align-items:flex-start;gap:18px;}
  .ino-hero__nav{justify-content:flex-end;padding:0 20px 28px;background:var(--ino-ink);}
  .ino-hero__nav .ino-arrow{width:48px;height:48px;background:transparent;}
}

/* ---------- horizontal carousels ---------- */
.ino-carousel__head{max-width:var(--ino-max);margin:0 auto;padding:0 var(--ino-gutter);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;}
.ino-track{margin-top:clamp(24px,2.4vw,44px);display:flex;gap:clamp(16px,1.4vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--ino-gutter);cursor:grab;scrollbar-width:none;-ms-overflow-style:none;}
.ino-track::-webkit-scrollbar{display:none;}
.ino-track.is-dragging{cursor:grabbing;}
.ino-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:18px;color:var(--ino-ink);}
.ino-card:hover{color:var(--ino-green);}
.ino-card img{width:100%;display:block;object-fit:cover;}
.ino-card--system{flex:0 0 clamp(280px,27vw,520px);}
.ino-card--system img{aspect-ratio:4/5;}
.ino-card--project{flex:0 0 clamp(300px,42vw,800px);}
.ino-card--project img{aspect-ratio:16/10;}
.ino-card__meta{color:var(--ino-wood);font-weight:600;font-size:17px;margin:0 0 8px;}

/* ---------- trust band ---------- */
.ino-band{margin-top:var(--ino-section);padding:clamp(32px,3vw,56px) var(--ino-gutter);background:var(--ino-ink);color:var(--ino-bg);}
.ino-band__inner{max-width:var(--ino-max);margin:0 auto;display:grid;gap:24px clamp(24px,3vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));}
.ino-band p{margin:0;font-weight:600;}

/* ---------- data lists and tables ---------- */
.ino-dl{margin:0;border-top:1px solid var(--ino-ink);}
.ino-dl__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--ino-line);}
.ino-dl__row dt{margin:0;min-width:0;color:var(--ino-muted);}
.ino-dl__row dd{margin:0;min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere;}
.ino-tech{max-width:1000px;border-top:1px solid var(--ino-ink);}
.ino-tech__row{display:grid;gap:8px 24px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));padding:18px 0;border-bottom:1px solid var(--ino-line);}
.ino-tech__row .k{font-weight:600;}
.ino-tech__row .std{color:var(--ino-muted);}
.ino-tech__row .v{font-weight:600;color:var(--ino-green);}

/* ---------- downloads ---------- */
.ino-files{border-top:1px solid var(--ino-ink);max-width:1000px;}
.ino-file{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:14px 0;border-bottom:1px solid var(--ino-line);color:var(--ino-ink);}
.ino-file:hover{color:var(--ino-wood);}
.ino-file strong{display:block;font-weight:600;}
.ino-file span{display:block;color:var(--ino-muted);font-size:16px;}
.ino-file em{font-style:normal;font-weight:600;color:var(--ino-green);white-space:nowrap;}

/* ---------- FAQ accordion ---------- */
.ino-faq{max-width:680px;border-top:1px solid var(--ino-line);}
.ino-faq__item{border-bottom:1px solid var(--ino-line);}
.ino-faq__q{width:100%;min-height:72px;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;background:transparent;color:var(--ino-ink);font-size:clamp(19px,1.2vw,21px);font-weight:600;text-align:left;cursor:pointer;}
.ino-faq__q:hover{color:var(--ino-wood);}
.ino-faq__sign{flex:0 0 auto;font-size:24px;font-weight:400;color:var(--ino-green);}
.ino-faq__a{margin:0;padding:0 0 24px;color:var(--ino-body);display:none;}
.ino-faq__item.is-open .ino-faq__a{display:block;}

/* ---------- project archive rows ---------- */
.ino-filters{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:clamp(32px,3.5vw,64px);}
.ino-filter{min-height:48px;padding:0 22px;border:1px solid #C9C3B6;background:transparent;color:var(--ino-ink);font-size:17px;font-weight:600;cursor:pointer;}
.ino-filter.is-active{background:var(--ino-ink);color:var(--ino-bg);}
.ino-rows{display:grid;gap:clamp(48px,5vw,104px);}
.ino-row{display:grid;gap:clamp(20px,2.5vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center;color:var(--ino-ink);}
.ino-row img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}

/* ---------- enquiry form ---------- */
.ino-form-section{margin-top:var(--ino-section);padding:clamp(56px,6vw,120px) var(--ino-gutter);background:var(--ino-white);}
.ino-form{display:grid;gap:16px;max-width:680px;}
.ino-form label{display:grid;gap:8px;min-width:0;font-size:16px;font-weight:600;}
.ino-form input,.ino-form select,.ino-form textarea{width:100%;min-width:0;border:1px solid #C9C3B6;background:var(--ino-bg);color:var(--ino-ink);font-size:17px;border-radius:0;}
.ino-form input,.ino-form select{height:52px;padding:0 14px;}
.ino-form textarea{padding:14px;resize:vertical;}
.ino-form input[type=file]{min-height:52px;padding:14px;border-style:dashed;}
.ino-form__row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}

/* ---------- footer ---------- */
.ino-footer{padding:clamp(48px,5vw,96px) var(--ino-gutter);background:var(--ino-ink);color:var(--ino-bg);}
.ino-footer__grid{max-width:var(--ino-max);margin:0 auto;display:grid;gap:clamp(28px,3vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.ino-footer h4{margin:0 0 12px;font-size:17px;font-weight:600;color:#8E918B;}
.ino-footer p{margin:0;color:#B8BAB5;}
.ino-footer a{color:var(--ino-bg);}
.ino-footer__bottom{max-width:var(--ino-max);margin:clamp(36px,4vw,64px) auto 0;padding-top:22px;border-top:1px solid #333832;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;}
.ino-footer__bottom p,.ino-footer__bottom a{font-size:16px;color:#8E918B;}

/* ---------- mobile sticky CTA ---------- */
.ino-sticky{display:none;}
@media (max-width:900px){
  .ino-sticky{position:sticky;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ino-line);border-top:1px solid var(--ino-line);}
  .ino-sticky a{display:flex;align-items:center;justify-content:center;min-height:56px;font-size:17px;font-weight:600;}
  .ino-sticky a:first-child{background:var(--ino-bg);color:var(--ino-ink);}
  .ino-sticky a:last-child{background:var(--ino-green);color:var(--ino-bg);font-weight:700;}
}

/* ================================================================
   Additions for the WordPress build. Same tokens, same rules:
   no gradients, no glass, no rounded corners, no decorative icons.
   ================================================================ */

/* ---------- prose (post_content coming from the editor) ---------- */
.ino-prose p{max-width:680px;color:var(--ino-body);margin:0 0 18px;}
.ino-prose p:last-child{margin-bottom:0;}
.ino-prose ul,.ino-prose ol{max-width:680px;color:var(--ino-body);margin:0 0 18px;padding-left:20px;}
.ino-prose li{margin:0 0 8px;}
.ino-prose h2{font-size:clamp(21px,1.5vw,27px);font-weight:700;letter-spacing:-.02em;margin:32px 0 10px;}
.ino-prose h3{font-size:19px;font-weight:600;margin:26px 0 8px;}
.ino-prose strong{font-weight:600;}

/* ---------- full-width image band ---------- */
.ino-bandimg{margin:0;}
.ino-bandimg img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover;}
@media (max-width:900px){.ino-bandimg img{aspect-ratio:16/9;}}

/* ---------- breadcrumbs ---------- */
.ino-crumbs{padding:22px var(--ino-gutter) 0;}
.ino-crumbs .ino-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;color:var(--ino-muted);}
.ino-crumbs a{color:var(--ino-muted);}
.ino-crumbs a:hover{color:var(--ino-ink);}
.ino-crumbs em{font-style:normal;color:#C0BCB2;}

/* ---------- card variants ---------- */
.ino-card--grid img{aspect-ratio:16/10;}
.ino-card--profile img{aspect-ratio:1/1;background:var(--ino-white);}
.ino-card--system-wide{display:grid;grid-template-columns:minmax(180px,38%) 1fr;gap:clamp(16px,2vw,32px);align-items:center;}
.ino-card--system-wide img{aspect-ratio:4/5;}
.ino-card--system-wide .ino-link{display:inline-block;margin-top:14px;}

/* ---------- product detail ---------- */
.ino-productimages{display:grid;gap:clamp(12px,1.2vw,20px);}
.ino-productimages__main{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--ino-white);}
.ino-productimages__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,20px);}
.ino-productimages__row img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.ino-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.ino-swatch{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #C9C3B6;font-weight:600;font-size:16px;}

/* ---------- CTA band ---------- */
.ino-cta{margin-top:var(--ino-section);padding:clamp(48px,5vw,96px) var(--ino-gutter);background:var(--ino-green);color:var(--ino-bg);}
.ino-cta__inner{max-width:var(--ino-max);margin:0 auto;display:grid;gap:clamp(24px,3vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center;}
.ino-cta h2{color:var(--ino-bg);}
.ino-cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;}

/* ---------- pagination ---------- */
.ino-pagination{display:flex;flex-wrap:wrap;gap:8px;padding-top:clamp(32px,3vw,56px);}
.ino-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 14px;border:1px solid #C9C3B6;font-weight:600;color:var(--ino-ink);}
.ino-pagination .page-numbers.current{background:var(--ino-ink);color:var(--ino-bg);border-color:var(--ino-ink);}

/* ---------- galleries (WordPress core gallery + FooGallery) ---------- */
.ino-section .gallery{display:grid;gap:clamp(12px,1.4vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));margin:0;}
.ino-section .gallery-item{margin:0;width:auto!important;float:none!important;}
.ino-section .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:0!important;display:block;}
.ino-section .gallery-caption{font-size:16px;color:var(--ino-muted);padding-top:8px;}
.fg-image{border-radius:0!important;}
.foogallery{margin:0;}

/* ---------- Contact Form 7 inside .ino-form ---------- */
.ino-form .wpcf7-form{display:grid;gap:16px;}
.ino-form label{display:grid;gap:8px;min-width:0;font-size:16px;font-weight:600;}
.ino-form .ino-form__row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
.ino-form input[type=text],.ino-form input[type=tel],.ino-form input[type=email],
.ino-form select,.ino-form textarea{width:100%;min-width:0;border:1px solid #C9C3B6;background:var(--ino-bg);color:var(--ino-ink);font-size:17px;border-radius:0;font-family:inherit;}
.ino-form input[type=text],.ino-form input[type=tel],.ino-form input[type=email],.ino-form select{height:52px;padding:0 14px;}
.ino-form textarea{padding:14px;resize:vertical;}
.ino-form input[type=file]{width:100%;min-height:52px;padding:14px;border:1px dashed #C9C3B6;background:var(--ino-bg);font-size:16px;}
.ino-form .wpcf7-list-item{margin:0;}
.ino-form .wpcf7-acceptance .wpcf7-list-item-label{font-weight:400;font-size:16px;color:var(--ino-body);}
.ino-form .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font-size:17px;font-weight:600;border:0;border-radius:0;background:var(--ino-green);color:var(--ino-bg);cursor:pointer;justify-self:start;font-family:inherit;}
.ino-form .wpcf7-submit:hover{background:var(--ino-ink);}
.ino-form .wpcf7-not-valid-tip{color:#8B2E2E;font-weight:400;font-size:16px;}
.ino-form .wpcf7-response-output{margin:8px 0 0!important;padding:14px!important;border:1px solid #C9C3B6!important;font-size:16px;}
.ino-form .wpcf7-spinner{margin:0 0 0 12px;}
.ino-hint{font-weight:400;color:var(--ino-muted);font-size:16px;}

/* ---------- header alignment with GeneratePress ---------- */
.ino-logo a{display:flex;align-items:baseline;gap:10px;}
.main-navigation .main-nav ul li.ino-tel a{color:var(--ino-green);}
@media (max-width:900px){
  .main-navigation .main-nav ul li.ino-btn--green a{background:transparent;color:var(--ino-ink);}
}

/* ---------- GeneratePress mobile menu toggle ---------- */
.menu-toggle,.menu-toggle .mobile-menu{font-size:17px;font-weight:600;}

/* ---------- tap targets ----------
   Phone, e-mail and the underlined text links are primary actions on mobile.
   Inline text is ~24px tall, so give them a 44px hit area without changing
   how they look. */
.ino-link,
a[href^="tel"],a[href^="mailto"]{
  display:inline-flex;align-items:center;min-height:44px;
}
/* …except inside body copy, where a link must stay part of the sentence. */
.ino-prose .ino-link,
.ino-prose a[href^="tel"],.ino-prose a[href^="mailto"]{display:inline;min-height:0;}

/* ---------- WebKit grid min-width ----------
   Safari lets grid children keep their intrinsic min-width, which pushes the
   wide system card past the viewport on iPhone. */
.ino-grid > *,.ino-row > *,.ino-card--system-wide > *{min-width:0;}
.ino-card--system-wide{grid-template-columns:minmax(min(180px,40%),38%) 1fr;}

/* ================================================================
   Header under 1200 px — one row: logo left, hamburger right.
   GeneratePress stacks branding and navigation as two blocks, which
   put the menu on a second line; and at 1024 px the eight menu items
   wrapped onto two rows. The drop point is raised to 1199 px (GP
   setting) and the header row is rebuilt as flex here.
   ================================================================ */
@media (max-width:1299px){
  .site-header{position:relative;}
  .inside-header{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--ino-gutter);min-height:0;}
  .site-branding,.site-logo,.ino-logo{flex:0 0 auto;margin:0;text-align:left;}
  .main-navigation{flex:0 0 auto;margin:0 0 0 auto;width:auto;background:transparent;position:static;}
  .main-navigation .menu-toggle{width:auto;padding:0;margin:0;line-height:1;min-height:44px;background:transparent;color:var(--ino-ink);}
  .main-navigation .inside-navigation,.main-navigation .main-nav{position:static;padding:0;}
  .main-navigation .main-nav > ul{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--ino-bg);border-top:1px solid var(--ino-line);box-shadow:0 12px 24px rgba(23,26,23,.12);}
  .main-navigation .main-nav > ul > li{margin:0;border-bottom:1px solid var(--ino-line);}
  .main-navigation .main-nav > ul > li > a{padding:0 var(--ino-gutter);min-height:60px;display:flex;align-items:center;font-size:18px;}
  /* The CTA item is a green bar in the drop-down: keep the label readable. */
  .main-navigation .main-nav ul li.ino-btn--green{background:var(--ino-green);border-bottom:0;}
  .main-navigation .main-nav ul li.ino-btn--green a,
  .main-navigation .main-nav ul li.ino-btn--green a:hover{background:transparent;color:var(--ino-bg);font-weight:700;}
  .main-navigation .main-nav ul li.ino-tel a{color:var(--ino-green);}
}

/* Between 1200 and 1500 px the full menu fits, but only just — tighten it. */
@media (min-width:1300px) and (max-width:1500px){
  .main-navigation{margin-left:40px;}
  .main-navigation .main-nav ul li{margin-right:26px;}
}

/* ================================================================
   Mobile/tablet: edge to edge.
   GeneratePress pads .site-content by 30 px under 769 px, which pushed
   the hero, the image bands and the carousels away from the screen edge.
   Content keeps a flat 20 px inner gutter instead of the fluid one.
   ================================================================ */
@media (max-width:1299px){
  body .one-container .site-content,
  body .separate-containers .inside-article{padding-left:0;padding-right:0;}
}
@media (max-width:1299px){
  :root{--ino-gutter:20px;}
}
@media (max-width:1023px){
  .ino-hero__stage{height:clamp(300px,58vw,420px);}
}

/* Logo sits at the page gutter, not indented by GP's branding padding. */
@media (max-width:1299px){
  .site-branding,.site-logo{padding:0;}
}

/* 1200–1500 px: the phone number as a menu item is what pushes the row over.
   It stays in the footer, on /kontakt/ and in the mobile sticky bar. */
@media (min-width:1300px) and (max-width:1500px){
  .main-navigation .main-nav ul li.ino-tel{display:none;}
  .main-navigation{margin-left:40px;}
  .main-navigation .main-nav ul li{margin-right:24px;}
}

/* Galleries run to the screen edge on mobile, like the other carousels;
   the heading above them keeps the 20 px gutter. */
@media (max-width:1299px){
  .ino-section .foogallery{margin-left:calc(var(--ino-gutter) * -1);margin-right:calc(var(--ino-gutter) * -1);width:auto;max-width:none;display:block;}
}

/* The CTA row in the mobile drop-down is a single line, not a stretched block. */
@media (max-width:1299px){
  .main-navigation .main-nav ul li.ino-btn--green a{min-height:60px;height:auto;}
}

/* ---------- FooGallery carousel: strip the plugin's chrome ----------
   The carousel template keeps its own rounded corners, white frame and drop
   shadow even when those settings are cleared, so the design rules (no radius,
   no shadow, no decorative icons) are enforced here. */
.ino-section .foogallery .fg-item,
.ino-section .foogallery .fg-item-inner,
.ino-section .foogallery .fg-thumb,
.ino-section .foogallery .fg-image{border-radius:0;box-shadow:none;border:0;}
.foogallery .fg-item-inner{background:transparent;}
.foogallery .fg-item .fg-image-overlay,
.foogallery .fg-item-inner::before,
.foogallery .fg-item-inner::after{display:none;}
.foogallery .fg-carousel-prev,.foogallery .fg-carousel-next{
  width:56px;height:56px;border-radius:0;border:1px solid #C9C3B6;background:var(--ino-bg);color:var(--ino-ink);
}
.foogallery .fg-carousel-prev:hover,.foogallery .fg-carousel-next:hover{border-color:var(--ino-ink);}

/* ================================================================
   Consumer product page.
   Sections are separated by background and space, not by a line under
   every row. Spacing scale: 64 px between sections, 32 px heading to
   content, 20–24 px between related items.
   ================================================================ */
:root{--ino-gap-section:64px;--ino-gap-head:32px;--ino-gap-item:22px;}

.ino-pd{padding:clamp(24px,3vw,40px) var(--ino-gutter) var(--ino-gap-section);background:var(--ino-bg);}
.ino-pd__top{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));align-items:start;}
.ino-pd__intro h1{margin:0 0 var(--ino-gap-item);}
.ino-pd__excerpt{font-size:clamp(18px,1.3vw,21px);margin:0 0 var(--ino-gap-item);}
.ino-pd__cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:var(--ino-gap-head);}

.ino-benefits{list-style:none;margin:0 0 var(--ino-gap-head);padding:0;display:grid;gap:12px;max-width:680px;}
.ino-benefits li{position:relative;padding-left:26px;color:var(--ino-body);}
.ino-benefits li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--ino-green);}

/* Compact fact block — left aligned, no row borders. */
.ino-facts{display:grid;gap:var(--ino-gap-item);background:var(--ino-white);padding:22px;max-width:680px;}
.ino-facts--plain{background:transparent;padding:0;}
.ino-facts__row{display:grid;grid-template-columns:minmax(140px,34%) 1fr;gap:6px 20px;align-items:baseline;}
.ino-facts__k{color:var(--ino-muted);}
.ino-facts__v{font-weight:600;text-align:left;overflow-wrap:anywhere;}
@media (max-width:520px){.ino-facts__row{grid-template-columns:1fr;gap:2px;}}

.ino-pd__text{padding:0 var(--ino-gutter) var(--ino-gap-section);background:var(--ino-bg);}
.ino-pd__specs{padding:var(--ino-gap-section) var(--ino-gutter);background:var(--ino-white);}

/* Swipe gallery */
.ino-swipe{position:relative;background:var(--ino-white);}
.ino-swipe__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.ino-swipe__track::-webkit-scrollbar{display:none;}
.ino-swipe__slide{flex:0 0 100%;scroll-snap-align:center;}
.ino-swipe__slide img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;}
.ino-swipe__btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:rgba(23,26,23,.62);color:var(--ino-bg);font-size:18px;font-weight:600;cursor:pointer;}
.ino-swipe__btn--prev{left:0;}
.ino-swipe__btn--next{right:0;}
.ino-swipe__btn[disabled]{opacity:.35;cursor:default;}
.ino-swipe__count{position:absolute;right:12px;bottom:12px;padding:4px 10px;background:rgba(23,26,23,.62);color:var(--ino-bg);font-size:16px;font-weight:600;}

/* Technical accordion */
.ino-acc{border-top:1px solid var(--ino-line);border-bottom:1px solid var(--ino-line);max-width:900px;}
.ino-acc__head{width:100%;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border:0;background:transparent;color:var(--ino-ink);font-family:inherit;font-size:clamp(19px,1.2vw,21px);font-weight:600;text-align:left;cursor:pointer;}
.ino-acc__head:hover{color:var(--ino-wood);}
.ino-acc__chev{flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--ino-green);border-bottom:2px solid var(--ino-green);transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px;}
.ino-acc.is-open .ino-acc__chev{transform:rotate(-135deg);margin-top:4px;}
.ino-acc__body{padding:0 0 var(--ino-gap-head);display:grid;gap:var(--ino-gap-head);}
/* display:grid would otherwise defeat the [hidden] attribute. */
.ino-acc__body[hidden]{display:none;}
.ino-acc__sub{font-size:17px;font-weight:600;color:var(--ino-muted);margin:0;}

/* Download rows */
.ino-dl-title{margin:var(--ino-gap-section) 0 var(--ino-gap-head);}
.ino-dls{display:grid;gap:2px;max-width:900px;background:var(--ino-line);}
.ino-dls__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;min-height:72px;padding:16px 18px;background:var(--ino-bg);color:var(--ino-ink);}
.ino-dls__row:hover{background:#EFECE4;color:var(--ino-ink);}
.ino-dls__name{display:grid;gap:4px;font-weight:600;}
.ino-dls__meta{font-weight:400;font-size:16px;color:var(--ino-muted);}
.ino-dls__action{font-weight:600;color:var(--ino-green);white-space:nowrap;}

/* Mobile: calmer type, no text against the edge, room for the sticky bar. */
@media (max-width:900px){
  :root{--ino-gap-section:56px;}
  .ino-h1{font-size:clamp(28px,7.4vw,34px);}
  .ino-h2{font-size:clamp(26px,6.6vw,32px);}
  .ino-carousel__head h2.ino-h2{font-size:clamp(24px,6vw,30px);}
  .ino-swipe__slide img{aspect-ratio:1/1;}
  body{padding-bottom:0;}
  .site-footer,.ino-footer{padding-bottom:calc(clamp(48px,5vw,96px) + 72px);}
}

/* Product images run to the screen edge on mobile; the text keeps its 20 px. */
@media (max-width:1299px){
  .ino-pd__top .ino-swipe{margin-left:calc(var(--ino-gutter) * -1);margin-right:calc(var(--ino-gutter) * -1);}
}

/* ================================================================
   POLISH LAYER — global spacing, full-bleed bands, calmer separators.
   Loaded last on purpose: these values supersede the ones above.
   ================================================================ */

:root{
  /* Major section rhythm: 48–64 mobile, 72–96 desktop. */
  --ino-section:clamp(48px,5.4vw,96px);
  /* Heading to content, and between related items. */
  --ino-gap-head:clamp(24px,2vw,32px);
  --ino-gap-item:clamp(16px,1.4vw,24px);
  --ino-gutter:20px;
  --ino-max:1760px;
}
@media (min-width:1300px){
  :root{--ino-gutter:clamp(64px,4.2vw,80px);}
}

/* Coloured bands must reach both browser edges. GeneratePress clamps its
   content container at 1760 px, which left white strips beside the CTA on wide
   screens; the inner container keeps the reading width instead. */
/* The page wrapper itself is what clamps at 1760 px — release it and let
   .ino-inner carry the reading width, so every band fills the viewport. */
.site.grid-container,
.site-content,
.site-content > .container,
.site-content > .grid-container,
.site-main{max-width:none;padding-left:0;padding-right:0;}
.ino-cta,.ino-band,.ino-footer,.ino-form-section,.ino-pd__specs{
  margin-left:0;margin-right:0;border-radius:0;
}
.ino-cta{margin-top:0;}
.ino-band{margin-top:0;}
.ino-footer{margin-top:0;}

/* Section rhythm. Sections carry their own padding; nothing adds margins on
   top of that, so no gap can grow past the scale above. */
.ino-section{padding:var(--ino-section) var(--ino-gutter) 0;}
.ino-section--divided{border-top:0;margin-top:0;}
.ino-section:last-of-type{padding-bottom:var(--ino-section);}
.ino-cta,.ino-band,.ino-form-section{padding-top:var(--ino-section);padding-bottom:var(--ino-section);}
.ino-pd{padding:var(--ino-gap-head) var(--ino-gutter) var(--ino-section);}
.ino-pd__text{padding:0 var(--ino-gutter) var(--ino-section);}
.ino-pd__specs{padding:var(--ino-section) var(--ino-gutter);}
.ino-h2{margin-bottom:var(--ino-gap-head);}
.ino-h3{margin-bottom:12px;}
.ino-grid{gap:var(--ino-gap-item) clamp(20px,2vw,44px);}

/* Alternate calm backgrounds instead of drawing a line across the page. */
.ino-section--alt{background:var(--ino-white);}

/* Carousels: one card plus a hint of the next, aligned to the page gutter. */
.ino-carousel__head{padding:0 var(--ino-gutter);}
.ino-track{gap:16px;padding:0 var(--ino-gutter);scroll-padding-left:var(--ino-gutter);margin-top:var(--ino-gap-head);}
.ino-track::after{content:"";flex:0 0 4px;}
.ino-card__text-clamp,.ino-card--project .ino-lead,.ino-card--system .ino-lead{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:900px){
  .ino-card--system,.ino-card--project,.ino-card--grid{flex:0 0 86%;}
  .ino-card--profile{flex:0 0 66%;}
  .ino-arrow{width:44px;height:44px;}
}

/* Fixed mobile CTA: never let it sit on top of content. */
@media (max-width:900px){
  .ino-footer{padding-bottom:calc(var(--ino-section) + 72px + env(safe-area-inset-bottom,0px));}
  .ino-sticky a{padding-bottom:env(safe-area-inset-bottom,0px);}
}
/* On /kontakt/ the form is right there — the bar would only be in the way. */
.page-kontakt .ino-sticky{display:none;}

/* Navigation: a subtle underline for the current page, not a dark block. */
.main-navigation .main-nav ul li.current-menu-item:not(.ino-btn--green) > a{
  background:transparent;color:var(--ino-green);box-shadow:inset 0 -2px 0 var(--ino-green);
}
@media (max-width:1299px){
  .main-navigation .main-nav ul li.current-menu-item:not(.ino-btn--green) > a{box-shadow:none;color:var(--ino-green);}
}

/* Reading width for long prose. */
.ino-prose p,.ino-prose ul,.ino-prose ol{max-width:70ch;}

/* ---------- Desktop header: one compact 84–88 px line ---------- */
@media (min-width:1300px){
  .inside-header{max-width:var(--ino-max);margin:0 auto;padding:0 var(--ino-gutter);min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .site-branding{margin:0;padding:0;}
  .ino-logo__name{font-size:22px;}
  .ino-logo__country{font-size:12px;letter-spacing:.1em;}
  .main-navigation{margin-left:32px;}
  .main-navigation .inside-navigation{padding:0;}
  .main-navigation .main-nav ul li{margin-right:22px;}
  .main-navigation .main-nav ul li:last-child{margin-right:0;}
  .main-navigation .main-nav ul li a{font-size:16px;line-height:1;padding:0;height:86px;display:flex;align-items:center;}
  .main-navigation .main-nav ul li.ino-tel a{font-size:16px;}
  .main-navigation .main-nav ul li.ino-btn--green a{min-height:44px;height:auto;padding:0 20px;font-size:16px;}
  .main-navigation .main-nav ul li.current-menu-item:not(.ino-btn--green) > a{box-shadow:inset 0 -2px 0 var(--ino-green);}
}
@media (min-width:1300px) and (max-width:1600px){
  .main-navigation .main-nav ul li.ino-tel{display:none;}
  .main-navigation .main-nav ul li{margin-right:18px;}
}

/* ---------- Blog index: one featured article, then a calm grid ---------- */
.ino-blog__intro{padding:clamp(48px,5vw,72px) var(--ino-gutter) 0;}
.ino-blog__intro h1{margin-bottom:16px;}
.ino-featured{display:grid;gap:clamp(20px,2.4vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));align-items:center;color:var(--ino-ink);}
.ino-featured img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.ino-featured:hover{color:var(--ino-green);}
.ino-postgrid{display:grid;gap:clamp(20px,2vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));}
.ino-postcard{display:flex;flex-direction:column;gap:14px;color:var(--ino-ink);}
.ino-postcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.ino-postcard:hover{color:var(--ino-green);}
.ino-postcard__excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ino-body);margin:0;}
.ino-postcard h2,.ino-featured h2{font-size:clamp(20px,1.5vw,26px);line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0;}
.ino-featured h2{font-size:clamp(26px,2.4vw,40px);}

/* ---------- Products: the four things you can build ---------- */
.ino-journey{display:grid;gap:var(--ino-section);}
.ino-journey__block{display:grid;gap:var(--ino-gap-head);}
.ino-journey__head{display:grid;gap:clamp(20px,2.4vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center;}
.ino-journey__head img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.ino-journey__picks{display:grid;gap:var(--ino-gap-item);grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));}
.ino-pick{display:flex;gap:14px;align-items:center;background:var(--ino-white);padding:12px;color:var(--ino-ink);}
.ino-pick:hover{color:var(--ino-green);}
.ino-pick img{width:84px;height:84px;object-fit:cover;flex:0 0 auto;}
.ino-pick strong{display:block;font-weight:600;}
.ino-pick__meta{display:block;font-size:16px;color:var(--ino-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- Full catalogue ---------- */
.ino-catalog__tools{display:grid;gap:var(--ino-gap-item);margin-bottom:var(--ino-gap-item);}
.ino-catalog__search input{width:100%;max-width:420px;height:52px;padding:0 14px;border:1px solid #C9C3B6;background:var(--ino-bg);font-size:17px;font-family:inherit;border-radius:0;}
.ino-catalog .ino-filters{padding-bottom:0;}
.ino-catalog__count{color:var(--ino-muted);font-size:16px;margin:0 0 12px;}
.ino-catalog__list{display:grid;gap:2px;background:var(--ino-line);max-height:min(70vh,720px);overflow-y:auto;}
.ino-catrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;padding:14px 16px;background:var(--ino-bg);color:var(--ino-ink);min-height:56px;}
.ino-catrow:hover{background:#EFECE4;}
.ino-catrow__name{font-weight:600;}
.ino-catrow__meta{color:var(--ino-muted);font-size:16px;}

/* ---------- Product page: consumer-first blocks ---------- */
.ino-pd__block{margin-bottom:var(--ino-gap-item);}
.ino-pd__label{font-size:16px;font-weight:600;color:var(--ino-muted);margin:0 0 4px;text-transform:none;}
.ino-pd__value{margin:0;color:var(--ino-body);max-width:60ch;}
.ino-note{font-size:16px;color:var(--ino-muted);margin:10px 0 0;}
.ino-swatches{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px;}
.ino-swatch{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;font-weight:600;font-size:16px;}
.ino-swatch__chip{width:26px;height:26px;flex:0 0 auto;border:1px solid rgba(23,26,23,.15);}
.ino-pd__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--ino-gap-head);}
.ino-drawings{display:grid;gap:var(--ino-gap-item);grid-template-columns:repeat(auto-fill,minmax(min(200px,45%),1fr));margin-bottom:var(--ino-section);}
.ino-drawings figure{margin:0;background:var(--ino-bg);}
.ino-drawings img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;}

/* ---------- Contact: compact top row, centred form ---------- */
.ino-formtop{display:grid;gap:var(--ino-gap-item) clamp(24px,3vw,56px);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;margin-bottom:var(--ino-gap-head);}
.ino-formtop__contact{display:grid;gap:6px;align-content:start;color:var(--ino-muted);}
.ino-formtop__contact a{color:var(--ino-ink);font-weight:600;}
.ino-formtop__phone{font-size:clamp(20px,1.5vw,24px);font-weight:700;}
@media (max-width:900px){.ino-formtop{grid-template-columns:1fr;}}

.ino-form{max-width:1000px;margin:0 auto;}
.ino-form .wpcf7-form{display:grid;gap:14px;}
.ino-form label{gap:6px;}
.ino-form__submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px;}
.ino-form__promise{color:var(--ino-muted);font-size:16px;}

/* Norwegian file control instead of the browser's English one. */
.ino-upload{display:grid;gap:8px;}
.ino-upload__label{font-size:16px;font-weight:600;}
.ino-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;padding:0;border:0;}
.ino-upload__control{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.ino-upload__btn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--ino-ink);font-weight:600;cursor:pointer;background:transparent;}
.ino-upload__btn:hover{background:var(--ino-ink);color:var(--ino-bg);}
.ino-upload__name{color:var(--ino-muted);font-size:16px;}

/* ---------- Fixed mobile CTA (was sticky, which left a strip under the footer) ---------- */
@media (max-width:900px){
  .ino-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;border-top:1px solid var(--ino-line);}
  /* The bar floats over the footer's own bottom padding, so the page ends where
     the footer ends — no blank strip below it. */
  .ino-footer{padding-bottom:calc(var(--ino-section) + 57px + env(safe-area-inset-bottom,0px));}
  body.page-kontakt .ino-footer{padding-bottom:var(--ino-section);}
}
/* GeneratePress' own footer wrapper is empty (we render our own) — it must not
   add height, or a blank strip appears under the footer. */
.site-footer{padding:0;margin:0;}
@media (max-width:900px){.site-footer{padding:0;}}

/* ---------- Project gallery: one dominant image, thumbs under ---------- */
.ino-pg{position:relative;}
.ino-pg__stage{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;background:var(--ino-white);}
.ino-pg__stage::-webkit-scrollbar{display:none;}
.ino-pg__slide{flex:0 0 100%;scroll-snap-align:center;}
.ino-pg__slide img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;}
.ino-pg__thumbs{display:flex;gap:8px;overflow-x:auto;padding-top:8px;scrollbar-width:none;}
.ino-pg__thumbs::-webkit-scrollbar{display:none;}
.ino-pg__thumb{flex:0 0 108px;padding:0;border:0;background:none;cursor:pointer;opacity:.55;transition:opacity .15s ease;}
.ino-pg__thumb.is-active{opacity:1;box-shadow:inset 0 -3px 0 var(--ino-green);}
.ino-pg__thumb img{width:100%;height:72px;object-fit:cover;display:block;}
@media (max-width:900px){
  .ino-pg{margin-left:calc(var(--ino-gutter) * -1);margin-right:calc(var(--ino-gutter) * -1);}
  .ino-pg__thumbs{padding-left:var(--ino-gutter);padding-right:var(--ino-gutter);}
  .ino-pg__slide img{aspect-ratio:4/3;}
}
.ino-postcard__place{margin:0;color:var(--ino-muted);font-size:16px;}
.ino-filters a.ino-filter{display:inline-flex;align-items:center;text-decoration:none;}

/* ---------- Gallery controls: small, on the image edges ---------- */
.ino-swipe__btn{width:44px;height:44px;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;}
.ino-swipe__count{font-size:15px;padding:3px 9px;}
.foogallery .fg-carousel-prev,.foogallery .fg-carousel-next{width:44px;height:44px;font-size:22px;}
.foogallery .fg-dot,.ino-dot{width:8px;height:8px;border-radius:0;}
@media (max-width:900px){
  .ino-swipe__btn--prev{left:0;}
  .ino-swipe__btn--next{right:0;}
  .ino-pg__thumb{flex:0 0 84px;}
  .ino-pg__thumb img{height:60px;}
}

/* Technical page: one readable column, no reserved media slot. */
.page-for-fagfolk .ino-prose p,
.page-for-fagfolk .ino-prose ul,
.page-for-fagfolk .ino-lead{max-width:880px;}
.page-for-fagfolk .ino-tech{max-width:880px;}

/* ---------- Carousel: arrows on the track edges ---------- */
.ino-carousel{position:relative;}
.ino-carousel__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;max-width:var(--ino-max);margin:0 auto var(--ino-gap-head);padding:0 var(--ino-gutter);}
.ino-carousel__stage{position:relative;}
.ino-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:rgba(23,26,23,.62);color:var(--ino-bg);font-size:22px;line-height:1;cursor:pointer;z-index:2;}
.ino-carousel__arrow--prev{left:0;}
.ino-carousel__arrow--next{right:0;}
.ino-carousel__arrow:hover{background:var(--ino-ink);}
.ino-track{margin-top:0;}
@media (max-width:900px){
  .ino-carousel__arrow{width:44px;height:44px;font-size:22px;}
}

/* Mobile carousels: full-bleed track, one card at 86 % of the screen plus a
   peek of the next, 16 px between cards, 20 px in from each edge. */
@media (max-width:900px){
  .ino-carousel__stage{margin-left:calc(var(--ino-gutter) * -1);margin-right:calc(var(--ino-gutter) * -1);}
  .ino-track{padding:0 var(--ino-gutter);gap:16px;scroll-padding-left:var(--ino-gutter);}
  .ino-track > .ino-card{flex:0 0 86vw;}
  .ino-track > .ino-card--profile{flex:0 0 60vw;}
  .ino-carousel__arrow--prev{left:0;}
  .ino-carousel__arrow--next{right:0;}
}

/* QA: counter must stay readable, and the logo needs a real hit area. */
.ino-swipe__count{font-size:16px;}
.ino-logo a{min-height:44px;display:inline-flex;align-items:baseline;}
@media (min-width:1300px){.ino-logo a{align-items:center;}}

/* Fact lists read as a form when every row has a rule under it. On mobile the
   rows lose their borders and stack label over value. */
@media (max-width:900px){
  .ino-dl{border-top:0;}
  .ino-dl__row{display:block;padding:0 0 var(--ino-gap-item);border-bottom:0;}
  .ino-dl__row dt{font-size:16px;}
  .ino-dl__row dd{text-align:left;font-weight:600;}
  .ino-tech{border-top:0;}
  .ino-tech__row{grid-template-columns:1fr;gap:2px;padding:0 0 var(--ino-gap-item);border-bottom:0;}
  .ino-tech__row .std{font-size:16px;}
}

/* Header CTA sits centred in the 86 px row, not pinned to the top corner. */
@media (min-width:1300px){
  .main-navigation .main-nav ul li.ino-btn--green{display:flex;align-items:center;height:86px;background:transparent;}
  .main-navigation .main-nav ul li.ino-btn--green a{background:var(--ino-green);color:var(--ino-bg);}
  .main-navigation .main-nav ul li.ino-btn--green a:hover{background:var(--ino-ink);}
}

/* Category blocks: a wide crop reads calmer than a tall one. */
.ino-journey__head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.ino-journey__head img{aspect-ratio:16/10;}
@media (max-width:900px){
  .ino-journey__head{grid-template-columns:1fr;}
}

/* ================================================================
   Visual review fixes — desktop pass.
   ================================================================ */

/* 1. Sections need bottom padding: a coloured band is the next element on most
      pages, and buttons and underlines were being sliced by it. */
.ino-section{padding:var(--ino-section) var(--ino-gutter);}
.ino-section + .ino-section{padding-top:0;}
.ino-section > .ino-inner > :last-child,
.ino-section > .ino-inner > .ino-grid > * > :last-child{margin-bottom:0;}

/* 2. GeneratePress paints the page wrapper white over the warm background. */
.site,#page.site,.site-content{background:transparent;}

/* 3. The header must sit on the same grid as the content below it. */
.inside-header{max-width:calc(var(--ino-max) + var(--ino-gutter) * 2);margin:0 auto;padding:0 var(--ino-gutter);}

/* 5. CTA band: same container as the footer, actions pushed to the right. */
.ino-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,2.4vw,48px);}
.ino-cta__inner > div:first-child{flex:1 1 420px;}
.ino-cta__actions{flex:0 0 auto;}

/* 6. Carousel heading sits in the normal inner container; only the track bleeds. */
.ino-carousel__head{max-width:none;margin:0 0 var(--ino-gap-head);padding:0;}
.ino-carousel__stage{margin-left:calc(var(--ino-gutter) * -1);margin-right:calc(var(--ino-gutter) * -1);}
.ino-track{padding:0 var(--ino-gutter);scroll-padding-left:var(--ino-gutter);}

/* 7. FAQ: heading over a full-width accordion instead of a tall empty column. */
.ino-faqblock{display:block;}
.ino-faqblock .ino-faq{max-width:900px;}

/* 4. The form belongs to the heading above it — left aligned, sane field widths. */
.ino-form{max-width:720px;margin:0;}
.ino-form .wpcf7-form{width:100%;}
.ino-form .ino-form__row{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}

/* Hero controls: same 44 px arrows on the image edges as everywhere else. */
.ino-hero{position:relative;}
.ino-hero__arrow{position:absolute;top:calc(clamp(300px,38vw,760px) / 2);transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;
  background:rgba(23,26,23,.62);color:var(--ino-bg);font-size:22px;line-height:1;cursor:pointer;z-index:3;}
.ino-hero__arrow--prev{left:0;}
.ino-hero__arrow--next{right:0;}
.ino-hero__arrow:hover{background:var(--ino-ink);}
.ino-hero__nav{padding:0;}
.ino-hero__count{background:rgba(23,26,23,.62);padding:4px 10px;}

/* 13. Category blocks: landscape crop, balanced columns. */
.ino-journey__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;}
.ino-journey__head img{aspect-ratio:16/10;max-height:420px;}
.ino-journey__picks{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}

/* 11. Blog cards: equal height, link pinned to the bottom. */
.ino-postcard{height:100%;}
.ino-postcard .ino-link{margin-top:auto;}

/* 12. Article: one centred column instead of a body squeezed to the left. */
.single-post .ino-section > .ino-inner,
.single-post .ino-blog__intro > .ino-inner{max-width:820px;margin-inline:auto;}
.single-post .ino-prose p,.single-post .ino-prose ul,.single-post .ino-prose ol,
.single-post .ino-lead,.single-post .ino-h1{max-width:none;}

/* ---------- Mobile review fixes ---------- */
@media (max-width:1299px){
  /* The drop-down is an overlay, not a layer the page scrolls behind. */
  .main-navigation.toggled .main-nav > ul{position:fixed;top:var(--ino-headerh,76px);left:0;right:0;bottom:0;overflow-y:auto;}
  body.ino-menu-open{overflow:hidden;}
  body.ino-menu-open .ino-sticky{display:none;}
  /* The whole green row is the tap target, aligned with every other item. */
  .main-navigation .main-nav ul li.ino-btn--green a{width:100%;padding:0 var(--ino-gutter);justify-content:flex-start;}
}

/* Hero controls must clear the fixed bottom bar. */
@media (max-width:900px){
  .ino-hero__arrow{top:auto;bottom:96px;transform:none;}
  .ino-hero__count{position:absolute;right:var(--ino-gutter);bottom:96px;}
  .ino-hero__nav{display:none;}
}

/* Accordion: readable when open, text off the edge, chevron inside the bar. */
.ino-acc__head{padding:18px 4px;gap:20px;}
.ino-acc.is-open .ino-acc__head{color:var(--ino-green);}
.ino-acc__head:hover{color:var(--ino-green);}
.ino-acc__chev{margin-right:4px;}

/* Gallery counter belongs to the image, not the thumbnail strip. */
.ino-pg{position:relative;}
.ino-pg__stage{position:relative;}
.ino-pg .ino-swipe__count{position:absolute;right:12px;bottom:auto;top:calc(100% - 44px);}
@media (max-width:900px){
  .ino-pg .ino-swipe__count{right:calc(var(--ino-gutter) + 12px);}
}

/* Disabled carousel arrow reads as disabled, never as a solid black block. */
.ino-carousel__arrow[disabled]{opacity:.3;cursor:default;background:rgba(23,26,23,.4);}

/* Header row: pin the logo to the same left edge as the page content, whatever
   GeneratePress' own flex settings do. */
.inside-header{max-width:calc(var(--ino-max) + var(--ino-gutter) * 2);margin:0 auto;padding-left:var(--ino-gutter);padding-right:var(--ino-gutter);}
.inside-header > .site-branding{margin-right:auto;margin-left:0;}
.inside-header > .main-navigation{margin-left:0;}
@media (min-width:1300px){
  .inside-header{display:flex;align-items:center;}
  .inside-header > .main-navigation{margin-left:32px;}
}
/* GeneratePress renders an empty element before the branding; a flex gap on the
   header row would push the logo off the content grid. */
.inside-header{gap:0;}
.inside-header > *:empty{display:none;}
/* Counter belongs on the image, and the menu CTA label lines up with the rest. */
.ino-hero__count--stage{position:absolute;right:0;bottom:0;background:rgba(23,26,23,.62);color:var(--ino-bg);padding:6px 12px;font-size:16px;font-weight:600;z-index:3;}
@media (max-width:900px){
  .ino-hero__count--stage{bottom:auto;top:calc(clamp(300px,58vw,420px) - 44px);}
  .main-navigation .main-nav ul li.ino-btn--green a{padding-left:var(--ino-gutter);}
  .main-navigation .main-nav ul li.ino-btn--green{padding:0;}
}

/* A card without its own photograph is a text card — never an empty frame. */
.ino-card--noimg{background:var(--ino-white);padding:18px;min-height:120px;justify-content:center;}
.ino-card--noimg .ino-h3{margin-bottom:6px;}
.ino-pd__top--noimg{grid-template-columns:1fr;max-width:820px;}

/* ---------- "Hva skal du bygge?" — four visual choices ---------- */
.ino-choices{display:grid;gap:clamp(20px,2.2vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));}
.ino-choice{display:flex;flex-direction:column;background:var(--ino-white);color:var(--ino-ink);}
.ino-choice img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;}
.ino-choice__body{display:flex;flex-direction:column;gap:8px;padding:22px;}
.ino-choice__title{font-size:clamp(22px,1.7vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.ino-choice__text{color:var(--ino-body);}
.ino-choice .ino-link{align-self:flex-start;margin-top:6px;}
.ino-choice:hover{color:var(--ino-green);}
@media (max-width:900px){
  .ino-choices{grid-template-columns:1fr;}          /* one full-width card per row */
  .ino-choice img{aspect-ratio:3/2;}
}
.ino-acc__count{font-weight:400;color:var(--ino-muted);font-size:16px;}

/* ================================================================
   Contrast: dark surfaces always carry light text, in every state.
   ================================================================ */
.ino-cta,.ino-cta *,
.ino-band,.ino-band *,
.ino-footer,.ino-footer *,
.ino-hero__panel,.ino-hero__panel *{color:var(--ino-bg);}
.ino-cta a,.ino-cta a:link,.ino-cta a:visited,.ino-cta a:hover,.ino-cta a:focus,.ino-cta a:active,
.ino-footer a,.ino-footer a:link,.ino-footer a:visited,.ino-footer a:hover,.ino-footer a:focus,.ino-footer a:active,
.ino-band a,.ino-band a:visited,
.ino-hero__panel a,.ino-hero__panel a:link,.ino-hero__panel a:visited,.ino-hero__panel a:hover,.ino-hero__panel a:focus,.ino-hero__panel a:active{color:var(--ino-bg);}
/* :link/:hover above add a pseudo-class to the specificity, so the light
   button has to answer with the same states or its label is painted the same
   colour as its own background — a blank white box. */
.ino-cta .ino-btn--light,.ino-cta .ino-btn--light:link,.ino-cta .ino-btn--light:visited,.ino-cta .ino-btn--light:focus,.ino-cta .ino-btn--light:focus-visible,.ino-cta .ino-btn--light:active,
.ino-hero__panel .ino-btn--light,.ino-hero__panel .ino-btn--light:link,.ino-hero__panel .ino-btn--light:visited,.ino-hero__panel .ino-btn--light:focus,.ino-hero__panel .ino-btn--light:focus-visible,.ino-hero__panel .ino-btn--light:active{color:var(--ino-ink);}
.ino-cta .ino-btn--light:hover,.ino-hero__panel .ino-btn--light:hover{background:var(--ino-wood);color:var(--ino-bg);}
.ino-footer__bottom p,.ino-footer__bottom a,.ino-footer__bottom a:visited{color:#B8BAB5;}
.ino-footer h4{color:#B8BAB5;}

/* The green CTA row in the menu and the sticky bar: white label, always. */
li.ino-btn--green > a,
li.ino-btn--green > a:link,
li.ino-btn--green > a:visited,
li.ino-btn--green > a:hover,
li.ino-btn--green > a:focus,
li.ino-btn--green > a:active,
.ino-sticky a:last-child,
.ino-sticky a:last-child:visited{color:var(--ino-bg);}
.ino-btn--green,.ino-btn--green:link,.ino-btn--green:visited,.ino-btn--green:hover,.ino-btn--green:focus,.ino-btn--green:active{color:var(--ino-bg);}
.ino-swipe__btn,.ino-carousel__arrow,.ino-hero__arrow{color:var(--ino-bg);}

/* Small text on the warm background needs a darker accent to stay readable. */
:root{--ino-wood:#8A5C39;}
.ino-crumbs em{color:var(--ino-muted);}

/* Catalogue heading stays light, never a black bar. */
#alle-profiler{background:var(--ino-white);}
#alle-profiler .ino-acc__head{background:transparent;color:var(--ino-ink);}
#alle-profiler .ino-acc__head:hover,#alle-profiler .ino-acc.is-open .ino-acc__head{color:var(--ino-green);}

/* Mobile menu: one opaque panel flush under the header, nothing showing through. */
@media (max-width:1299px){
  .main-navigation.toggled{background:var(--ino-bg);}
  .main-navigation.toggled .inside-navigation,
  .main-navigation.toggled .main-nav{background:var(--ino-bg);}
  .main-navigation.toggled .main-nav > ul{
    top:var(--ino-headerh,76px);
    background:var(--ino-bg);
    border-top:0;
    box-shadow:none;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  /* Solid backdrop under the panel so no page pixel can show through. */
  .main-navigation.toggled::after{
    content:"";position:fixed;left:0;right:0;top:var(--ino-headerh,76px);bottom:0;
    background:var(--ino-bg);z-index:-1;
  }
  .site-header{position:relative;z-index:70;background:var(--ino-bg);}
}

/* ---------- Direct fixes ---------- */

/* Hero arrows ride the image, vertically centred — never over the buttons. */
.ino-hero__arrow{top:calc(clamp(380px,38vw,760px) / 2);}
@media (max-width:1023px){
  .ino-hero__arrow{top:calc(clamp(300px,58vw,420px) / 2);bottom:auto;transform:translateY(-50%);}
  .ino-hero__count--stage{top:calc(clamp(300px,58vw,420px) - 40px);bottom:auto;}
}

/* No button may render without a readable label. */
.ino-btn:empty,.ino-arrow:empty,.ino-filter:empty{display:none;}
.ino-btn,.ino-filter,.wpcf7-submit{min-width:44px;}

/* Mobile: one small back link instead of the full path. */
@media (max-width:900px){
  .ino-crumbs .ino-inner > *{display:none;}
  .ino-crumbs .ino-inner > a.ino-crumbs__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ino-muted);}
  .ino-crumbs{padding-top:12px;}
}

/* Articles: calmer headings and tighter rhythm on a phone. */
@media (max-width:900px){
  .single-post .ino-h1{font-size:clamp(26px,6.6vw,30px);line-height:1.15;}
  .single-post .ino-prose h2{font-size:clamp(21px,5.2vw,24px);margin:28px 0 8px;}
  .single-post .ino-prose h3{font-size:18px;margin:20px 0 6px;}
  .single-post .ino-prose p,.single-post .ino-prose ul{margin-bottom:14px;}
  .single-post .ino-section{padding-top:clamp(20px,4vw,32px);}
}

/* Article lead image: large, above the text. */
.ino-postimg{margin:0 0 var(--ino-gap-head);}
.ino-postimg img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
@media (max-width:900px){
  .ino-postimg{margin-left:calc(var(--ino-gutter) * -1);margin-right:calc(var(--ino-gutter) * -1);}
  .ino-postimg img{aspect-ratio:3/2;}
}

/* Contact form: compact fields, tighter gaps, shorter message box. */
.ino-form .wpcf7-form{gap:14px;}
.ino-form label{gap:4px;}
.ino-form input[type=text],.ino-form input[type=tel],.ino-form input[type=email],.ino-form select{height:48px;}
.ino-form textarea{min-height:110px;}
.ino-form .ino-upload{gap:6px;}
.ino-form .ino-upload__btn{min-height:44px;}
.ino-form__submit{gap:12px;margin-top:2px;}
.ino-form__privacy{color:var(--ino-muted);font-size:16px;margin:6px 0 0;}

/* ---------------------------------------------------- områder / geo --------
   The service area is stated in four places — footer, CTA band, product page
   and the area pages themselves. All four read from inowood_areas(), so these
   rules only have to make the same list look right on a light and a dark
   surface. */
.ino-footer__areas{max-width:var(--ino-max);margin:clamp(28px,3vw,44px) auto 0;padding-top:22px;border-top:1px solid #333832;}
.ino-footer__areas h4{margin:0 0 10px;}

.ino-footer__areas p{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:0;}
.ino-footer__areas a{display:inline-flex;align-items:center;min-height:40px;color:#F5F3EE;border-bottom:1px solid #6F8C7F;}
.ino-footer__areas a:hover,.ino-footer__areas a:focus-visible{border-bottom-color:#F5F3EE;}
.ino-footer__areas span{color:#8E918B;}

.ino-cta__areas{margin:12px 0 0;color:#B9C6BF;font-size:16px;line-height:1.55;}

.ino-areanote{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ino-muted);}
.ino-areanote a{color:var(--ino-ink);border-bottom:1px solid #C6C2B6;}
.ino-areanote a:hover,.ino-areanote a:focus-visible{border-bottom-color:var(--ino-ink);}

.ino-arealist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--ino-gap-item);}
.ino-areacard{display:flex;flex-direction:column;gap:8px;padding:26px;background:#fff;border:1px solid var(--ino-line);}
.ino-areacard:hover,.ino-areacard:focus-visible{border-color:var(--ino-green);}
.ino-areacard__name{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ino-ink);}
.ino-areacard__text{color:var(--ino-muted);line-height:1.6;}
.ino-areacard .ino-link{margin-top:6px;align-self:flex-start;}

@media (max-width:900px){
  .ino-footer__areas p{gap:10px 16px;}
  .ino-arealist{grid-template-columns:1fr;}
  .ino-areacard{padding:20px;}
}

/* The requested product, echoed above the prefilled form. */
.ino-form__subject{margin:0 0 14px;padding:10px 14px;background:#EDE9E0;border-left:3px solid var(--ino-green);font-weight:600;color:var(--ino-ink);}

/* Kontakt på mobil: skjemaet først, kontaktkolonnene under. Rekkefølgen i
   kilden er uendret, så tastatur og skjermleser møter siden slik den er skrevet. */
@media (max-width:900px){
  .ino-kontakt__flow{display:flex;flex-direction:column;}
  .ino-kontakt__flow > .ino-form-section{order:1;}
  .ino-kontakt__flow > .ino-kontakt__info{order:2;border-top:1px solid var(--ino-line);}
}

/* Privat eller bedrift — to korte spor inn i nettstedet. */
.ino-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--ino-gap-item);margin-top:var(--ino-gap-item);}
.ino-who__card{padding:28px;background:#fff;border:1px solid var(--ino-line);display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.ino-who__card h3{margin:0;}
.ino-who__card p{margin:0;color:var(--ino-muted);line-height:1.65;}
.ino-who__card .ino-link{margin-top:4px;}
@media (max-width:900px){
  .ino-who{grid-template-columns:1fr;}
  .ino-who__card{padding:20px;}
}

/* ------------------------------------------------- trekkspill-overskrifter --
   Etter et trykk ble overskriften nesten svart med mørkegrønn tekst. Årsaken
   er den samme som for den blanke knappen tidligere: temaets `button:focus` og
   `button:active` har en pseudoklasse mer i spesifisitet enn vår egen
   `.ino-acc__head`, og vant derfor over `background:transparent`.
   Her svarer vi med de samme tilstandene, for alle trekkspill på nettstedet:
   lys flate, lesbar tekst — lukket, åpen, trykket, i fokus og etter
   tilbakeknappen. Fokus vises som ramme, aldri som fylt flate. */
.ino-acc__head,.ino-acc__head:hover,.ino-acc__head:focus,.ino-acc__head:focus-visible,
.ino-acc__head:active,.ino-acc__head[aria-expanded="true"],.ino-acc.is-open .ino-acc__head,
.ino-faq__q,.ino-faq__q:hover,.ino-faq__q:focus,.ino-faq__q:focus-visible,
.ino-faq__q:active,.ino-faq__q[aria-expanded="true"],.ino-faq__item.is-open .ino-faq__q,
.ino-filter,.ino-filter:hover,.ino-filter:focus,.ino-filter:focus-visible,.ino-filter:active{
  background-color:transparent;
  -webkit-tap-highlight-color:transparent;
}
.ino-acc__head,.ino-acc__head:focus,.ino-acc__head:active,
.ino-faq__q,.ino-faq__q:focus,.ino-faq__q:active{color:var(--ino-ink);}
.ino-acc__head:hover,.ino-acc__head[aria-expanded="true"],.ino-acc.is-open .ino-acc__head,
.ino-faq__q:hover,.ino-faq__q[aria-expanded="true"],.ino-faq__item.is-open .ino-faq__q{color:var(--ino-green);}
.ino-acc__head:focus-visible,.ino-faq__q:focus-visible{outline:2px solid var(--ino-green);outline-offset:3px;}

/* Filterknappene i katalogen har sin egen aktive tilstand, og den skal ikke
   snus av en fokusregel heller. */
.ino-filter,.ino-filter:focus,.ino-filter:active{color:var(--ino-ink);}
.ino-filter.is-active,.ino-filter.is-active:focus,.ino-filter.is-active:hover{
  background-color:var(--ino-green);color:#F5F3EE;
}